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