HTML5視頻不能在iOS上以bxSlider幻燈片播放（可能是由fitvids.js引起的）

當我將視頻放入bxSlider上的幻燈片中時，它會在桌面瀏覽器上播放，但在iOS設備 - iPhone和iPad上測試時，視頻將無法播放。HTML5視頻不能在iOS上以bxSlider幻燈片播放（可能是由fitvids.js引起的）

我已經包含了當前的html代碼。我在所有設備上播放幻燈片下方的<video>元素。

根據bxSlider guide on video，我已經包含了jquery.fitvids.js文件。這個問題可能與該插件有關，因爲當我刪除該插件時，幻燈片中的視頻將播放，但幻燈片無法正常顯示（重複的幻燈片可見並且控件丟失）。

另一個值得注意的事情是，當初始化bxSlider的腳本放置在庫的頭部時，bxSlider根本不會啓動。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Vid test</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="jquery.fitvids.js"></script> 
    <script src="jquery.bxslider.js"></script> 
</head> 
<body> 

<ul class="bxslider"> 
    <li> 
     <video width="100%" height="300" id="video1" controls preload="auto"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg"> 
     </video> 
    </li> 
</ul> 

<video width="100%" height="300" id="video1" controls preload="auto"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg"> 
</video> 

<script> 
    $(".bxslider").bxSlider({ 
     video: true, 
     useCSS: false 
    }); 
</script> 


</body> 
</html>

來源

2013-06-13 Fisu

有這個相同的問題:( – turkeyhundt

總結你的第二個視頻標籤在「禮」的標籤，並認爲「UL」標籤的內部。

<ul class="bxslider"> 
    <li> 
     <video width="100%" height="300" id="video1" controls preload="auto"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm"> 
      <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg"> 
     </video> 
    </li> 
<li> 
<video width="100%" height="300" id="video1" controls preload="auto"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2013/06/Becel_15s.mp4" type="video/mp4"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.webm" type="video/webm"> 
    <source src="http://dev.kirnauskis.com/kirnauskis/design-update01/wp-content/uploads/2012/10/Becel_15s_120822b.ogv" type="video/ogg"> 
</video> 
</li> 
</ul>

來源

2015-01-02 11:16:53

HTML5視頻不能在iOS上以bxSlider幻燈片播放（可能是由fitvids.js引起的）

回答

相關問題