HTML电影播放器无法在最新的Safari浏览器上运行

本周我正在与一家代理机构进行面试，我的面试官对他全新的mac书很满意。当我的小电影播放器在最新版本的Safari上完全失效时，这有点让人难以置信。帮帮我？HTML电影播放器无法在最新的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>

来源

2017-03-09 Kristian

其中一种方法是创建另一个阵列来保存您的视频海报/缩略图。然后添加一个监听器，以便在视频进行时显示下一个剪辑的缩略图/海报。在下面的示例中，我只是使用一个单独的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>

来源

2017-03-09 21:14:45 l33tstealth

谢谢，今晚会试试。这是否也解决了Safari问题？ – Kristian

Np，因此在测试问题之后，它是与Safari不兼容的.webm视频文件，因此我建议将它们转换为mp4 h.264之类的东西（您可以使用AnyVideoConverter之类的软件在本地机器上转换文件）如果您只想在Chrome，Firefox和Safari支持的视频标签中只提供一个源文件。我的示例现在也可以在Safari中使用，因为我将视频文件更改为Safari可以播放的视频文件。另外需要注意的是，我建议在视频“src”而不是“src ='”中添加内容，以查看没有错误而页面加载。 – l33tstealth

Ninjaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa – Kristian

HTML电影播放器​​无法在最新的Safari浏览器上运行

回答

相关问题

HTML电影播放器无法在最新的Safari浏览器上运行