Javascript 如何播放多个视频对象，一个接一个地使用缓冲
我正在使用Javascript 如何播放多个视频对象，一个接一个地使用缓冲,javascript,node.js,html,video,Javascript,Node.js,Html,Video,我正在使用node.js，javascript和HTML5开发一个参考播放器应用程序。我有一个播放器，可以成功加载一个视频并从中生成诊断数据。我的目标是制作一个能够加载视频的播放器，并在当前视频结束前10秒开始缓冲下一个视频。我试图复制视频标签，它能够生成另一个视频对象，但只是将其显示在现有的视频对象旁边。谁能提供一些建议，如何实现这一点，请。先谢谢你 HTML5： <div id="player" class="video"> <video width=1280 height
node.jsjavascriptHTML5<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>
//获取src变量的主视频对象
//媒体活动
var服务器日志、服务器全局、视频阵列=[{
“MediaState”：[]
}];
//将媒体事件加入“全局”，每隔几秒钟发送一次
服务器\全局=功能（t，v）{
控制台日志（t，v）；
视频阵列[0][“MediaState”][t]=v；
}
服务器日志=函数（）{
var out=“”；
//序列化视频阵列
对于（var i=0；iID节点.JSdashjsAddEventListener<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>
....
var videos=新阵列（“BigBuck.m4v”、“Video.mp4”、“BigBuck.m4v”、“Video2.mp4”）；
var-currentVideo=0；
函数nextVideo（）{
//获取元素
videoPlayer=document.getElementById（“视频”）
//删除事件侦听器（如果有）
videoPlayer.removeEventListener（'ended'，nextVideo，false）；
//使用视频阵列中的当前视频更新源
videoPlayer.src=视频[当前视频]；
//播放视频
播放
//增加currentVideo，在阵列末尾循环
当前视频=（当前视频+1）%videos.length
//添加事件侦听器，以便视频结束时再次调用nextVideo函数
videoPlayer.addEventListener（'ended'，nextVideo，false）；
}
函数ooops（）{
log（“错误：+document.getElementById（“视频”）.Error.code）
}
您的浏览器不支持视频标记。
//为视频元素添加错误处理程序，以捕获任何其他问题
document.getElementById（“视频”）.addEventListener（'error'，oops，false）；
//初始化并播放第一个视频
nextVideo（）；
结束时加载新的video.srcdashjs