flv.js使用(原生js)


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();
    });

  

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM