我正在使用 node.js、javascript 和 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>
最佳答案
这将按顺序循环播放多个视频(您可以按照自己喜欢的方式加载数组，例如硬编码或通过 ajax 调用)。在视频结束时，它将移动到下一个视频并继续围绕数组循环。
这都是原生 JS，因此应该适用于您的 node.js/dashjs只要你知道 ID 就可以设置的 <video>元素。
我通常的偏好是将处理逻辑转储到 <head> 中并尽可能少地保留在体内，但应该在其他配置中工作....
我不确定您是如何捕获要报告回服务器的媒体事件的问题，我假设一个 addEventListenter在 < video>对象，因此它应该能够遵循与用于捕获所有错误处理程序的相同格式...
<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>
关于javascript - 如何播放多个视频对象，一个接一个地缓冲，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42925056/