首页 > Web开发 > 详细

flv.js使用(原生js)

时间:2020-12-04 16:54:16      阅读:27      评论:0      收藏:0      [点我收藏+]
HHTML部分

  <div id="mainContainer">   </div>

  

js部分
<script src="dist/flv.min.js"></script>
  <script>
    function fnstart() {
      var xhr = new XMLHttpRequest();
      xhr.open(‘GET‘, ‘http://192.168.1.193:8066/v1/camera/video/url‘)
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
          // console.log(xhr.responseText);//字符串
          let result = JSON.parse(xhr.responseText) // 转换成对象
          console.log(result)
          //数组完整数据
          let data = []
          let Vdata = data.concat(result.data[0].camera_list, result.data[1].camera_list)

          var mainContainer = document.querySelector(‘#mainContainer‘)
          var foot = document.querySelector(‘.foot‘)
          for (var obj in Vdata ) {
            let box = document.createElement("div")
            box.className = "six"
            box.innerHTML = `
                <input name="urlinput" class="urlInput" type="text" value=`+Vdata[obj].camera_url_flv+`>
                <video name="videoElement" class="centeredVideo" muted width="1024" height="576">Your browser is too old which doesn‘t support HTML5 video.</video>      
            `
            mainContainer.appendChild(box)
          }
        }
      }
    }

    let videoElements,
    players = [];
    var player
    
    function flv_load() {
      setTimeout(() =>{
        videoElements = document.getElementsByName(‘videoElement‘);
        for (let i = 0, len = videoElements.length; i < len; i++) {
          let videoEle = videoElements[i];
          let input = videoEle.parentElement.firstElementChild;
          let urlinput = input.value;

          // urlinput = ‘http://service2.camera.com:8068/live?port=8065&app=live&stream=1781599078‘

          player = flvjs.createPlayer({
            type: ‘flv‘,
            url: urlinput,
            isLive: true
          });
          player.attachMediaElement(videoEle);
          player.load();
          player.play();

          players.push(player)
        }
      },100)

    }


    document.addEventListener(‘DOMContentLoaded‘, function () {
      fnstart()
      flv_load();
    });

  

  

 

flv.js使用(原生js)

原文:https://www.cnblogs.com/wybs/p/14086125.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!