視頻外部按鈕不會在手機上播放，但適用於臺式機/手機

我使用流式播放器作爲我的html5視頻播放器（https://flowplayer.org/latest/）。我已經爲用戶添加了一個附加按鈕，用戶點擊該按鈕後即可播放該視頻。它適用於我的筆記本電腦或臺式機，只要用戶點擊「播放視頻」按鈕，視頻就會播放。視頻外部按鈕不會在手機上播放，但適用於臺式機/手機

但是，當我在我的手機或我的朋友的手機或任何其他手機（已嘗試所有的iPhone和一些機器人）上測試它時，視頻將無法播放。

所以，我試着用我的桌面上的谷歌瀏覽器進行調試，並激活移動模式。它在控制檯上給我這個錯誤「Uncaught TypeError: Cannot read property 'play' of undefined」，只要我點擊那個按鈕。但是，當我退出移動模式時，它再次正常工作而不會出現任何錯誤。

你知道我該如何解決這個問題？謝謝。

<html> 
    <head> 
     <!-- player skin --> 
     <link rel="stylesheet" href="skin/functional.css"> 
     <!-- site specific styling --> 
     <style> 
     body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; } 
     .flowplayer { width: 80%; } 
     </style> 
     <!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ --> 
     <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
     <!-- include flowplayer --> 
     <script src="flowplayer.min.js"></script> 
    </head> 
    <body> 
     <!-- the player --> 
     <div> 
     <div class="player" style="width:50%;" data-embed="false"> 
     <!-- <di class="player" data-embed="false" data-swf="flowplayer.swf" data-ratio="0.4167"> --> 
      <video id="player"> 
       <source type="video/webm" src="https://stream.flowplayer.org/bauhaus.webm"> 
       <source type="video/mp4" src="https://stream.flowplayer.org/bauhaus.mp4"> 
      </video> 
     </div> 

     <button id="playbutton">Play Video</button> 


     </div> 
    </body> 
    </html> 
<script> 
    // run script after document is ready 
    $(function() { 
     $('#playbutton').click(function(e){ 
      $('#player').get(0).play(); 
     }); 
    }); 
</script>

來源

2015-10-07 nodeffect

你會得到這個錯誤，因爲當檢測到移動設備時，Flowplayer會更改頁面的HTML。它會更改video標記，因此，您的Javascript無法找到#player。你應該使用Flowplayer Javascript API。在這裏您可以找到桌面和移動瀏覽器上運行一個小例子：

<html> 
    <head> 
     <!-- The "functional" skin - choose from: "functional.css", "minimalist.css", "playful.css" --> 
     <link rel="stylesheet" href="http://releases.flowplayer.org/6.0.3/skin/functional.css"> 
     <!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ --> 
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
     <!-- include flowplayer --> 
     <script src="http://releases.flowplayer.org/6.0.3/flowplayer.min.js"></script> 
     <script> 
      // run script after document is ready 
      $(function() { 
       $('#playbutton').click(function(e){ 
        flowplayer(0).load({ 
         sources: [ 
          { type: "video/webm", src: "http://stream.flowplayer.org/functional.webm" }, 
          { type: "video/mp4", src: "http://stream.flowplayer.org/functional.mp4" } 
         ] 
         }); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <!-- the player --> 
     <div> 
      <div class="flowplayer" data-ratio="0.4167"> 
       <video> 
        <source type="video/webm" src="http://stream.flowplayer.org/functional.webm"> 
        <source type="video/mp4" src="http://stream.flowplayer.org/functional.mp4"> 
       </video> 
      </div> 
      <button id="playbutton">Play Video</button> 
     </div> 
    </body> 
</html>

有關的例子，你可以在這裏看到更多的信息： http://demos.flowplayer.org/api/load.html

來源

2015-10-07 14:11:37

嗨，這肯定能行！但是如果我想保留自己的格式，有沒有其他解決方案呢？或者我只需要堅持這個唯一的解決方案？謝謝！ – nodeffect

視頻外部按鈕不會在手機上播放，但適用於臺式機/手機

回答

相關問題