Question

我正在使用node.js，javascript＆amp;开发参考播放器应用程序HTML5。我有一个成功加载单个视频和播放器的播放器从中生成诊断数据。我的目标是制作一个可以加载视频和播放器的播放器。在当前视频结束前10秒开始缓冲下一个视频。我尝试复制视频标签，该视频标签能够生成另一个视频对象，但只是将其与现有视频对象一起显示。任何人都可以提供一些如何实现这一目标的建议。提前谢谢。

HTML5 ：

<div id="player" class="video"> <video width=1280 height=720 autoplay data-dashjs-player controls id="video" src="{{{ src }}}"></video> // main video object that takes the src variable </div>
<script type="text/javascript">
// media events
var server_log, server_glob, videoArray = [{
    "MediaState": []
}];
// joins the media events into a 'glob' that can be sent every few seconds
server_glob = function(t, v) {
    console.log(t, v);
    videoArray[0]["MediaState"][t] = v;
}
server_log = function() {
    var out = "";
    // Serialize videoArray
    for (var i = 0; i < Object.values(videoArray[0]["MediaState"]).length; i++) {
        var key = Object.keys(videoArray[0]["MediaState"])[i];
        var value = JSON.stringify(videoArray[0]["MediaState"][key]);
        out += key + "=" + value + "&";
    }
    // send a xhr/ajax POST request with the serialized media events
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "/tel", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // this is my favourite format of POST request, looks alot like JSON
    xhttp.send(out);
}
</script>

Answer 1

这将按顺序循环显示多个视频（您可以按照自己喜欢的方式加载数组，硬编码或通过ajax调用）。在视频结束时，它将移动到下一个并继续围绕阵列循环。

只要您知道node.js元素的dashjs，它就是所有原生JS，因此应该适用于您的ID / <video>设置。

我通常倾向于将处理逻辑转储到<head>中并尽可能少地保留在正文中，但应该在其他配置中工作....

我不确定您是如何捕获要报告回服务器的媒体事件的，我在＆lt; addEventListenter对象上假设video>，所以应该能够遵循与catch-all错误处理程序相同的格式...

<head>
....
<script>
var videos = new Array("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4");
var currentVideo = 0;

function nextVideo() {
    // get the element
    videoPlayer = document.getElementById("video")
    // remove the event listener, if there is one
    videoPlayer.removeEventListener('ended',nextVideo,false);

    // update the source with the currentVideo from the videos array
    videoPlayer.src = videos[currentVideo];
    // play the video
    videoPlayer.play()

    // increment the currentVideo, looping at the end of the array
    currentVideo = (currentVideo + 1) % videos.length

    // add an event listener so when the video ends it will call the nextVideo function again
    videoPlayer.addEventListener('ended', nextVideo,false);
}

function ooops() {
    console.log("Error: " + document.getElementById("video").error.code)
}
</script>
</head>

<body> 

<div id="player" class="video">
    <video id="video" width="588" height="318" controls autobuffer muted>
    Your browser does not support the video tag.
    </video>    <!--end video container -->
</div>  

<script>
// add error handler for the video element, just to catch any other issues
document.getElementById("video").addEventListener('error', ooops,false);

// initialize and play the first video
nextVideo();

</script>

如何使用缓冲一个接一个地播放多个视频对象

1 个答案: