HTML5視頻無法在iPad上使用jQuery bxSlider插件

我正在使用Jquery bxSlider插件爲iPad創建圖片和視頻的滑塊圖庫。我使用HTML5視頻標籤的視頻實現：當自身，然而，當與滑塊的標記合併時，不能播放視頻HTML5視頻無法在iPad上使用jQuery bxSlider插件

<video width="400" height="260" controls> 
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
</video>

視頻源代碼工作在iPad上正常。

測試環節：http://www.ekimmedia.com/totem/TIC/MG/

如果我刪除此腳本：從源代碼

<script src="js/jquery.bxSlider.js" type="text/javascript"></script>

，視頻作品，然後在iPad上。除去與bxSlider腳本

測試環節：http://www.ekimmedia.com/totem/TIC/MG/index10.html

不知道是什麼原因造成的衝突。

感謝，

來源

2011-08-30 Joe Caplin

測試鏈接已損壞：/ –

嘗試用類似Firebug或Safari開發者工具調試工具觀看視頻元素。您可能必須使用PC/Mac瀏覽器來執行此操作。查看視頻元素是否失去任何屬性，或者在jquery腳本運行後添加額外的東西。在完成一些涉及視頻的移動開發之後，我可以告訴你它非常敏感，尤其是因爲在移動設備上大約有820億個不同的瀏覽器和操作系統版本。如果您看到視頻元素髮生了變化，那麼您需要添加一個腳本，將其恢復到iPad上可查看的內容。

您也可以確保您的視頻被正確包裝。它看起來像這個滑塊腳本需要以下格式：

<div id="slideshowcontainer"> 
<div>slide1 content</div> 
<div>slide2 content</div> 
<div>etc...</div> 
</div> 

OR 

<ul id="slideshowcontainer"> 
<li>slide1 content</li> 
<li>slide2 content</li> 
<li>etc...</li> 
</ul>

來源

2012-01-04 17:39:49 Matt

我得到這個滑塊工作的唯一方法是從bxslider官方網站本地下載它。並嘗試關注如何製作響應式視頻滑塊的tutorial。他們沒有提到這些箭頭圖像的任何地方，因爲他們不在CSS中。因此，請記住從下載的bxslider zip抓取圖像文件夾並將其粘貼到項目的js文件夾中。

在我的最終設置中，我在js文件夾中有4個本地文件：jquery-2.2.2.min.js,jquery.bxslider.css,jquery.bxslider.js和jquery.fitvids.js。 js文件夾還包含images子文件夾，其中有controls.png和bx_loader.gif。

這一切都那麼在HTML文件中引用如下：

<head> 
    <link rel="stylesheet" href="js/jquery.bxslider.css"> 
    <script src="js/jquery-2.2.2.min.js"></script> 
    <script src="js/jquery.fitvids.js"></script> 
    <script src="js/jquery.bxslider.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $('.bxslider').bxSlider({ 
     video: true, 
     useCSS: false 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <ul class="bxslider"> 
     <li> 
      <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
     </li> 
     <li> 
      <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
     </li> 
    </ul> 
</body>

我過我的iOS設備，一切就解決方案似乎很好地工作。這個問題有點類似solution，你也可以看看它。

來源

2016-03-29 14:48:02 alljamin

嘗試改變的

`<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`

的位置我的是它是由於圖書館的衝突，把它或底部或任何ELC所有的腳本中，我相信它戈納工作。

來源

2016-03-30 12:20:37

回答

相關問題