1

ビデオを bxSlider のスライドに配置すると、デスクトップ ブラウザーでは正常に再生されますが、iOS デバイス (iPhone および iPad) でテストすると、ビデオは再生されません。

現在のhtmlコードを含めました。<video>すべてのデバイスで正常に再生されるスライドショーの下の要素を複製しました。

ビデオの bxSlider ガイドに従って、 jquery.fitvids.jsファイルを含めました。問題はそのプラグインに関係している可能性があります。それを削除すると、スライドのビデオは再生されますが、スライドショーは正しく機能しません (複製されたスライドが表示され、コントロールが失われます)。

もう 1 つの予想外の注意点は、bxSlider を初期化するスクリプトがライブラリの下のヘッドに配置されると、bxSlider がまったく開始されないことです。

jsフィドル

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

1 に答える 1

0

2 番目のビデオ タグを「li」タグでラップし、その「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-02T11:16:53.607 に答える