我正在使用node.js、javascript和HTML5开发一个参考播放器应用程序。我有一个播放器，可以成功加载单个视频并从中生成诊断数据。我的目标是制作一个加载视频的播放器，并在当前视频结束前 10 秒开始缓冲下一个视频。我尝试复制能够生成另一个视频对象的视频标签，但只是将其与现有的 on 一起显示。任何人都可以就如何实现这一目标提供一些建议。提前谢谢你。
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>
这将按顺序循环浏览多个视频(您可以按照自己喜欢的任何方式加载数组，硬编码或通过 ajax 调用(。在视频结束时，它将移动到下一个并继续在阵列周围循环。
它都是本机JS，因此只要您知道<video>元素的ID，就应该适用于您的node.js/dashjs设置。
我通常的偏好是将处理逻辑转储<head>并尽可能少地保留在正文中，但应该在其他配置中工作......
您如何捕获要报告回服务器的媒体事件，我假设<video>对象上有一个addEventListenter，因此应该能够遵循与用于捕获所有错误处理程序相同的格式...>
<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>