如何解决尝试创建具有多个起点的 HTML5 视频序列
我对 JavaScript 还很陌生。
我正在创建一个视频网站,最终用户可以在其中点击他们喜欢的任何视频并开始观看。我希望在第一个选定的视频结束后自动播放一系列视频。因此,假设最终用户选择 videoSource[2],数组从那里开始并在 videoSource[2] 结束时播放 videoSource[3]。
I have managed to create an array that triggers the sequence to play,when the first video - videoSource[0] - has ended,however,when another video is selected,the sequence does not play.
我已阅读有关该主题的所有帖子,但似乎没有一个能解决我的问题。
这是我的 javascript 代码:
<script type='text/javascript'>
let videoSource = new Array();
videoSource[0] = 'VID/Home.mp4';
videoSource[1] = 'VID/MLSS.mp4';
videoSource[2] = 'VID/Ana.mp4';
videoSource[3] = 'VID/FRIEND.mp4';
videoSource[4] = 'VID/LVAletterBox.mp4';
let i = 0;
const videoCount = videoSource.length;
const element = document.getElementById("videoPlayer");
function videoPlay(videoNum) {
element.setAttribute("src",videoSource[videoNum]);
element.autoplay = true;
element.load();
element.play();
}
document.getElementById('videoPlayer').addEventListener('ended',myHandler,false);
videoPlay(0);
function myHandler() {
i++;
if (i == videoCount) {
i = 0;
videoPlay(i);
} else {
videoPlay(i);
}
}
</script>
这是我的 HTML 代码:
<div class="modal fade" id="play-video-2">
<div class="modal-dialog modal-dialog-centered"style="max-width: 80%;" role="document">
<div class="modal-content">
<div class="modal-body">
<video id="videoPlayer" width="100%" muted autoplay controls preload="auto" data-setup='{"fluid": true}' >
<source src="VID/MLSS.mp4" Addtype="video/mp4">
<track kind="captions" src="subs/MLSS SUBS 2021.vtt" srclang="en" label="English">
<track kind="subtitles" src="subs/MLSS SUBS 2021-french.vtt" srclang="fr" label="french">
</video>
</div>
</div>
</div>
</div>
<div class="modal fade" id="play-video-3">
<div class="modal-dialog modal-dialog-centered" style="max-width: 80%;" role="document">
<div class="modal-content">
<div class="modal-body">
<video id="videoPlayer" width="100%" muted autoplay controls preload="auto" data-setup='{"fluid": true}'>
<source src="VID/Ana.mp4" type="video/mp4">
<track kind="captions" src="subs/Ana Subs.vtt" srclang="en" label="English">
<track kind="subtitles" src="subs/Ana Subs-french.vtt" srclang="fr" label="french">
</video>
</div>
</div>
</div>
</div>
<div class="modal fade" id="play-video-4">
<div class="modal-dialog modal-dialog-centered" style="max-width: 80%;" role="document">
<div class="modal-content">
<div class="modal-body">
<video id="videoPlayer" width="100%" muted autoplay controls preload="auto" data-setup='{"fluid": true}'>
<source src="VID/FRIEND.mp4" type="video/mp4">
<track kind="captions" src="subs/FRIEND subs.vtt" srclang="en" label="English">
<track kind="subtitles" src="subs/FRIEND subs-french.vtt" srclang="fr" label="french">
</video>
</div>
</div>
</div>
</video>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。