3

リンクをクリックして、jQueryを使用してiPadで再生するビデオを切り替えようとしています。ブラウザでは問題なく動作しますが、iPadで試してみると、ビデオが一時停止し、他のビデオはロードされません。

// switch video sources on the fly
    //

}).on('click', '.video-nav a', function(e){

    // pause the current video
    //
    $("#" + $(this).attr("data-video-id"))[0].pause();

    // change the source of the video in question
    //
    $("#" + $(this).attr("data-video-id") + " > source").attr("src", $(this).attr("data-video"));


    // load the new source
    //
    $("#" + $(this).attr("data-video-id"))[0].load();


    // play the new video
    //
    $("#" + $(this).attr("data-video-id"))[0].play();

    // make the button's parent "active" by adding it as a class
    //
    $(this).parent().addClass("active").siblings().removeClass("active");


});

これが私のhtmlの設定方法です：

<video id="non" width="444" height="339" controls="true" preload="false" poster="images/image1.png">
                <source src="videos/video1.mp4" type='video/mp4' />
            </video>        

            <div class="video-nav">

                <ul>
                    <li class="active"><a class="fourty-ten-ten" href="#" rel="external" data-video="videos/video1.mp4" data-video-id="non" data-poster="images/image1.png"></a></li>

                    <li><a class="fourty-ten-twenty" href="#" rel="external" src="" data-video="videos/video2.mp4" data-video-id="non" data-poster="images/image2.png"></a></li>
                </ul>
            </div>
4

1 に答える 1

3

だから、探している人のために、iPadのビデオソースを変更するための解決策は次のとおりです。

htmlは次のように設定されます。

<div class="vid-wrapper">
   <video id="video" data-vid="video" controls preload="none">
      <source src="videos/video1.mp4" type='video/mp4' />
   </video>

   <a data-vid="video1.mp4">&nbsp;</a>
   <a data-vid="video2.mp4">&nbsp;</a>
</div>

jQueryは次のように設定されています。

$(document).on('click', 'a[data-vid]', function(){
        var $this = $(e.target),
            video = $this.attr('data-vid'),
            newVid = $this.siblings('video');

        // pause the current video
        newVid[0].pause();
        // change the source of the video in question
        newVid.attr('src', 'videos/' + video);
        // load the new source
        newVid[0].load();
        // play the new video
        newVid[0].play();

}）;

これが困っている人に役立つことを願っています！

于 2012-05-09T16:33:20.277 に答える