Switch video source on iPad using jQuery
I am trying to use jQuery to switch video playback on iPad by clicking a link. It works fine in the browser, however, when I try to use it on the iPad, it just pauses the video and doesn't load another.
// 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 parent "active" by adding it as a class
//
$(this).parent().addClass("active").siblings().removeClass("active");
});
and this is how I installed the 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>
+3
source to share
1 answer
So, for anyone looking, here is the solution to change video source on iPad:
html is configured like this:
<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"> </a>
<a data-vid="video2.mp4"> </a>
</div>
and jQuery is configured like this:
$(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();
});
Hope this helps anyone in need!
+3
source to share