I am trying to control HTML5 videos using JQuery. I have two clips in a tabbed interface, there are six tabs in total, the others just have images. I am trying to make the video clips play when their tab is clicked and then stop when any of the others are clicked.
This must be a simple thing to do but I cant seem to get it to work, the code I am using to play the video is:
$('#playMovie1').click(function(){
$('#movie1').play();
});
I have read that the video element needs to be exposed in a function to be able to control it but can't find an example. I am able to make it work using JS:
document.getElementById('movie1').play();
Any advice would be great. Thanks
Your solution shows the issue here -- play is not a jQuery function but a function of the DOM element. You therefore need to call it upon the DOM element. You give an example of how to do this with the native DOM functions. The jQuery equivalent -- if you wanted to do this to fit in with an existing jQuery selection -- would be $('#videoId').get(0).play(). (get gets the native DOM element from the jQuery selection.)
You can do
$('video').trigger('play');
$('video').trigger('pause');
This is how I managed to make it work:
jQuery( document ).ready(function($) {
$('.myHTMLvideo').click(function() {
this.paused ? this.play() : this.pause();
});
});
All my HTML5 tags have the class 'myHTMLvideo'