3

我正在寻找一种在 Google Chrome 中为 CCTV 应用程序流式传输多个 (16) 实时 webm 视频的方法。到目前为止，我尝试的所有内容都在 6 个直播流中结束，之后视频开始触发“停滞”事件 - 有人知道解决这个问题的方法吗？

这是我正在使用的代码：

<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>
4

1 回答 1

0

我通过设置多个指向同一 IP 地址的子域并在每个子域上运行 4 个流来解决这个问题（为了保持理智而将 2 个打开，以防万一其他任何东西决定攻击它们）。它仍然不是一个允许多个浏览器窗口的解决方案，但它至少可以让所有流同时运行。

于 2013-03-20T12:43:26.407 回答