iPadのjquery bxSliderプラグインでHTML5ビデオが動作しない

Jquery bxSliderプラグインを使用して、iPad用の画像とビデオのスライダーギャラリーを作成しています。私は、ビデオの実装のためのHTML5のvideoタグを使用しています：スライダーマークアップと合併したときに自分自身で、しかし、ビデオが再生されないときiPadのjquery bxSliderプラグインでHTML5ビデオが動作しない

<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

テストリンクが壊れています：/ –

は、放火犯やサファリ開発ツールのようなデバッグツールでvideo要素を見てみてください。これを行うには、PC/Macブラウザを使用する必要があります。 video要素が属性を失っているかどうか、またはjqueryスクリプトの実行後に余分なものが追加されたかどうかを確認してください。ビデオを含むいくつかのモバイル開発を行いましたが、特にモバイルデバイス上に浮かぶ約830億の異なるブラウザとOSバージョンが存在するため、これは非常に面倒です。動画要素が変更されていることがわかったら、iPadで表示できるものに戻すスクリプトを追加する必要があります。

また、ビデオが正しくラップされているかどうかを確認することもできます。私はbxslider公式サイトからローカルにダウンロードした作品には、このスライダーを取得する方法

<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

唯一の方法：このスライダースクリプトは次の形式を必要とするように見えます。応答性の高いビデオスライダーを作成する方法については、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ファイル内で参照されました：私は、iOSデバイスとすべての私の解決策をテストしている

<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>

が正常に動作するようです。この問題には幾分類似した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

iPadのjquery bxSliderプラグインでHTML5ビデオが動作しない

答えて

関連する問題