本周我正在与一家代理商进行面谈，我的面试官对他的全新Mac书非常满意。当我的小电影播放器在最新版本的Safari上彻底失败时，这有点令人沮丧。帮助
我在搜索了这个网站上的在线教程和一些主题之后拼凑了这个。不知道我在哪里得到代码tbh。它位于kristian.co.nz
将来我想展示下一个播放视频的预览图片，如有任何建议将不胜感激。
感谢您的帮助。
<html>
<head>
<script type="text/javascript">
var videoSources = ["http://kristian.co.nz/video/Showreel2016_H264_website4.webm", "http://kristian.co.nz/video/Craftsmanintro_web.webm", "http://kristian.co.nz/video/GTA 03 shark.m4v", "http://kristian.co.nz/video/dj_intro.webm", "http://kristian.co.nz/video/Sketch.webm", "http://kristian.co.nz/video/Monkeybizz.webm"]
var currentIndex = 0;
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = videoSources[currentIndex];
myVideo.load();
}
// add a listener function to the ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
currentIndex = (currentIndex+1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
}
</script>
</head>
<body onload="myNewSrc()">
<div id="section-title" >
<video preload="auto" onended="myAddListener()" controls width="100%" title="" src="" poster="images/introMovie_poster.gif">
</video>
</div>
</body>
</html>
答案 0 :(得分：0)
一种方法是创建另一个包含视频海报/缩略图的数组。然后添加一个监听器，这样当视频正在进行时，它会显示下一个剪辑的缩略图/海报。在下面的示例中，我只使用一个单独的div标签，显示“下一个剪辑”，并在调用侦听器函数时显示下一个剪辑的缩略图，并访问海报/缩略图数组中的下一个缩略图，并将其加载到img src标签中。
<html>
<head>
<script type="text/javascript">
var videoSources = ["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://kristian.co.nz/video/GTA%2003%20shark.m4v", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"];
var currentIndex = 0;
var videoThumbnails = ["https://placehold.it/150x100.jpg","https://placehold.it/150x200.jpg","https://placehold.it/150x300.jpg","https://placehold.it/150x400.jpg","https://placehold.it/150x480.jpg"];
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = videoSources[currentIndex];
myVideo.load();
}
function myNewThumb() {
var nextThumb = document.getElementsByTagName('img')[0];
nextThumbIndex = (currentIndex+1) % videoThumbnails.length;
nextThumb.src = videoThumbnails[nextThumbIndex];
nextThumb.load();
}
// add a listener function to the ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
currentIndex = (currentIndex+1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
myVideo.addEventListener('progress',myNewThumb,false);
}
</script>
</head>
<body onload="myNewSrc(),myNewThumb()">
<div id="section-title" >
<video preload="auto" onended="myAddListener()" controls width="480" height="360" title="" src="" poster="https://placehold.it/350x150">
</video>
</div>
<div id="movie_image">
<p>Next clip playing:</p>
<img src="" alt="video image">
</div>
</body>
</html>