小白失败复现&请教：写一段HTML5代码，要求在一个播放窗口实现多个视频的顺序播放

kim

问题通过js脚本得到了解决，谢谢大佬的帮助。

https://cdn.gouuuu.com/2023/08/2023-08-22-16-49-26-%E6%88%90%E5%8A%9F%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E6%92%AD%E6%94%BE%E7%AA%97%E5%8F%A3%E9%A1%BA%E5%BA%8F%E6%92%AD%E6%94%BE%E5%A4%9A%E4%B8%AA%E8%A7%86%E9%A2%91.mp4

----------------------------------------------------------------------------------------------------------------------自己建设了一个博客，有许多长视频，100*2GB.超过了cloud flare缓存的最大限制（文件大小不超过500MB？才可以通过页面规则被cloud flare强制缓存）.之前使用缓存规则对于这些视频进行了强制绕过，使用后发现。虽然通过bypass，不做缓存，流量经过cloud flare中转，传输视频网络延迟和速度和直连相比好很多，但是bypass的延迟还是比经过缓存的视频文件网络延时更长，速度更慢。

然后尝试通过ffmpeg对MP4文件进行分片，以满足可以强制缓存的要求，同时通过ffmpeg把视频文件的mov信息头移动到最前方。单个分片文件可以正常播放。

例如：

视频文件经过分片，自然而然的希望通过一个播放窗口实现多个视频的顺序播放。

根据Google bard的观点：

模仿尝试编写了一下代码，结果失败了，视频没有顺序播放，播放完第一个视频又自动播放到第一个视频了。

<html>

<head>

<title>视频播放器</title>

</head>

<body>

ﾠﾠ<source src="https://cdn.gouuuu.com/2023/08/tvzongheba-%E6%97%A0%E7%94%A8%E7%9A%84%E8%B0%8E%E8%A8%80-%EC%86%8C%EC%9A%A9%EC%97%86%EC%96%B4-%EA%B1%B0%EC%A7%93%EB%A7%90-My-Lovely-Liar-E01-000.mp4" type="video/mp4">

</video>

function playNextVideo() {

ﾠﾠﾠvar currentVideo = document.getElementById("video");

ﾠﾠﾠvar nextVideo = currentVideo.nextElementSibling;

ﾠﾠﾠif (nextVideo) {

ﾠﾠﾠﾠcurrentVideo.pause();

nextVideo.play();

} else {

currentVideo.play();

}

window.onload = function() {

var video = document.getElementById("video");

video.addEventListener("ended", playNextVideo);

video.play();

};

</script>

</body>

</html>

再次询问bard，尝试更改nextElementSibling为nextSibling，结果失败了。

尝试更改 source src为source1 src，source2 src，source3 src也失败了。

于是猜测是不是 var currentVideo = document.getElementById("video");的问题

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById

依旧失败。

的的确确不知道是哪里的问题，还请诸位大佬指教。😭🫡🐶🐵

小白失败复现&请教：写一段HTML5代码，要求在一个播放窗口实现多个视频的顺序播放

Report Page