I'm using "video.js" and wrote some Javascript to have other videos that are playing stop if another one is clicked and played. This works well in IE9+, Chrome, Safari, and other modern browsers that use the HTML5 <video> tag.
My issue lies, in IE8 and the SWF/Flash fallback. The click event doesn't seem to be firing caught when it is clicked on.
$('div.video-js').on('click', function() {
var $this = $(this),
player = videojs($this[0]);
thisVideo = $this.children('object'); //get <object> for IE8 vs <video>
/*
If videoj.js API is ready then...
call the stop videos, and exception is the one that is clicked
*/
player.ready(function() {
if(player.paused() === false) {
//stopVideos(thisVideo[0]);
}
});
});
The SWF seems to be absorbing the click events that are meant for the containing div.video-js element. Although, when the div is clicked the video still stops, and plays, but I'm not sure why the click event is not firing...
The controls and big-play button still work, and fire the click event above...
You can use the play event to stop the other players. Since you're using jQuery you can use not() to select all players except the one that's triggered the event.
$(".video-js").each(function() {
var id = this.id;
videojs(id).ready(function() {
this.on('play', function() {
$(".video-js").not("#" + id).each(function() {
videojs(this.id).pause(true);
});
});
});
});