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