Javascript 在Chrome中同时播放6个以上基于HTML5的webm视频
我正在寻找一种在谷歌Chrome上为CCTV应用程序流式传输多（16）个实时webm视频的方法。到目前为止，我尝试的每件事都会在6个直播流中进行，然后视频开始触发“暂停”事件——有人知道解决这个问题的方法吗 以下是我正在使用的代码：Javascript 在Chrome中同时播放6个以上基于HTML5的webm视频,javascript,google-chrome,video-streaming,html5-video,webm,Javascript,Google Chrome,Video Streaming,Html5 Video,Webm,我正在寻找一种在谷歌Chrome上为CCTV应用程序流式传输多（16）个实时webm视频的方法。到目前为止，我尝试的每件事都会在6个直播流中进行，然后视频开始触发“暂停”事件——有人知道解决这个问题的方法吗 以下是我正在使用的代码： <html> <head> <script src="jquery-1.9.1.min.js" type="text/javascript"></script> </head> <body style
<html>
<head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body style="border: 0px; margin: 0px; padding: 0px; background-color: #000000; overflow: hidden;">
<div id="divMain" style="display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 0px; margin: 0px;
padding: 0px; overflow: hidden;"></div>
<script language="JavaScript" type="text/javascript">
<!--
var streams = new Array();
streams.Load = function (index) {
console.log(index, 'LOAD');
streams.push(document.createElement('video'));
streams[index].id = 'stream' + index;
streams[index].autoplay = 'autoplay';
streams[index].style.display = 'block';
streams[index].style.position = 'absolute';
streams[index].width = this.Width;
streams[index].height = this.Height;
streams[index].style.left = ((index - (Math.floor(index / 4) * 4)) * this.Width) + 'px';
streams[index].style.top = (Math.floor(index / 4) * this.Height) + 'px';
streams[index].style.width = this.Width + 'px';
streams[index].style.height = this.Height + 'px';
$(streams[index]).bind('loadedmetadata', streams[index], function (event) {
console.log(event.data.id, 'loadedmetadata');
var actualRatio = event.data.videoWidth / event.data.videoHeight;
var targetRatio = $(event.data).width() / $(event.data).height();
var adjustmentRatio = (targetRatio / actualRatio);
$(event.data).css('-webkit-transform', 'scaleX(' + adjustmentRatio + ')');
});
$(streams[index]).bind('loadstart', streams[index], function (event) { console.log(event.data.id, 'loadstart'); });
$(streams[index]).bind('emptied', streams[index], function (event) { console.log(event.data.id, 'emptied'); });
$(streams[index]).bind('canplaythrough', streams[index], function (event) { console.log(event.data.id, 'canplaythrough'); });
$(streams[index]).bind('ended', streams[index], function (event) { console.log(event.data.id, 'ended'); });
$(streams[index]).bind('ratechange', streams[index], function (event) { console.log(event.data.id, 'ratechange'); });
$(streams[index]).bind('stalled', streams[index], function (event) { console.log(event.data.id, 'stalled'); streams.LoadNext();
});
$(streams[index]).bind('playing', streams[index], function (event) { console.log(event.data.id, 'playing'); });
$(streams[index]).bind('durationchange', streams[index], function (event) { console.log(event.data.id, 'durationchange'); });
$(streams[index]).bind('volumechange', streams[index], function (event) { console.log(event.data.id, 'volumechange'); });
$(streams[index]).bind('suspend', streams[index], function (event) { console.log(event.data.id, 'suspend'); });
$(streams[index]).bind('waiting', streams[index], function (event) { console.log(event.data.id, 'waiting'); });
$(streams[index]).bind('timeupdate', streams[index], function (event) { console.log(event.data.id, 'timeupdate'); });
$(streams[index]).bind('abort', streams[index], function (event) { console.log(event.data.id, 'abort'); });
$(streams[index]).bind('loadeddata', streams[index], function (event) { console.log(event.data.id, 'loadeddata'); });
$(streams[index]).bind('seeking', streams[index], function (event) { console.log(event.data.id, 'seeking'); });
$(streams[index]).bind('play', streams[index], function (event) { console.log(event.data.id, 'play'); });
$(streams[index]).bind('error', streams[index], function (event) { console.log(event.data.id, 'error'); });
$(streams[index]).bind('canplay', streams[index], function (event) { console.log(event.data.id, 'canplay'); });
$(streams[index]).bind('seeked', streams[index], function (event) { console.log(event.data.id, 'seeked'); });
$(streams[index]).bind('pause', streams[index], function (event) { console.log(event.data.id, 'pause'); });
streams[index].source = document.createElement('source');
streams[index].source.src = 'http://10.1.1.15:8090/' + index + '.webm';
streams[index].source.type = 'video/webm';
streams[index].appendChild(streams[index].source);
divMain.appendChild(streams[index]);
streams.LoadNext();
};
streams.LoadNext = function () { if (this.length < 16) { this.Load(this.length); } };
streams.Width = 320;
streams.Height = 240;
$(window).ready(function() {
var divMain = document.getElementById('divMain');
streams.Width = divMain.offsetWidth / 4;
streams.Height = divMain.offsetHeight / 4;
var tsource = null;
streams.LoadNext();
});
$(window).resize(function() {
var divMain = document.getElementById('divMain');
streams.Width = divMain.offsetWidth / 4;
streams.Height = divMain.offsetHeight / 4;
for (var i = 0; i < streams.length; i++) {
streams[i].width = streams.Width;
streams[i].height = streams.Height;
streams[i].style.left = ((i - (Math.floor(i / 4) * 4)) * streams.Width) + 'px';
streams[i].style.top = (Math.floor(i / 4) * streams.Height) + 'px';
streams[i].style.width = streams.Width + 'px';
streams[i].style.height = streams.Height + 'px';
var actualRatio = streams[i].videoWidth / streams[i].videoHeight;
var targetRatio = $(streams[i]).width() / $(streams[i]).height();
var adjustmentRatio = (targetRatio / actualRatio);
if (adjustmentRatio >= 1) {
$(streams[i]).css('-webkit-transform', 'scaleX(' + adjustmentRatio + ')');
} else {
$(streams[i]).css('-webkit-transform', 'scaleY(' + (1 / adjustmentRatio) + ')');
}
}
});
//-->
</script>
</body>
</html>