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(); });
原文:https://www.cnblogs.com/wybs/p/14086125.html