リンクをクリックして、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>