Question

我一直在尝试使用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>

Answer 1

所以对于任何人来说，这是一个在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();

}）;

希望这可以帮助任何有需要的人！

使用jQuery在iPad上切换视频源

1 个答案: