HTML电影播放器无法在最新的Safari上运作

我本周正在与一家代理商面试，我的面试官对他的全新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>

做到这一点的一种方法是创建另一个数组，该数组容纳您的视频海报/缩略图。然后添加一个侦听器，以便在视频进展时，它显示了下一个剪辑的缩略图/海报。在下面的示例中，我只使用一个单独的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>

相关内容

最新更新

热门标签：