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瀏覽器上運行