I have multiple videos in same page using jquery tabs (https://wordpress.org/plugins/tabs-responsive/). So, what i m trying to do is to make them stop when i change tab and autostart again if i choose the same tab again or better reload the player in current tab.
i was playing around and i found how to stop the videos using this piece of code:
events: {
onPlay: function(event) {
if (this.id != idPlayer) {
jwplayer(idPlayer).play(false);
idPlayer = this.id
}
}
}
DEMO: https://jsfiddle.net/b2ce7vw6/
<div id="tabs">
<ul>
<li><a href="#tabs-1">VIDEO 1</a></li>
<li><a href="#tabs-2">VIDEO 2</a></li>
<li><a href="#tabs-3">VIDEO 3</a></li>
</ul>
<div id="tabs-1">
<div id="myElement-1">Loading the player ...</div>
</div>
<div id="tabs-2">
<div id="myElement-2">Loading the player ...</div>
</div>
<div id="tabs-3">
<div id="myElement-3">Loading the player ...</div>
</div>
</div>
Javascript
$(function() {
$("#tabs").tabs();
});
var idPlayer = "myElement-1";
var playerInstance = jwplayer("myElement-1");
playerInstance.setup({
width: "100%",
aspectratio: "16:9",
primary: "html5",
file: "http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4",
hlshtml: true,
//type: "hls",
autostart: true,
stretching: "exactfit",
events: {
onPlay: function(event) {
if (this.id != idPlayer) {
jwplayer(idPlayer).play(false);
idPlayer = this.id
}
}
}
});
var idPlayer = "myElement-2";
var playerInstance = jwplayer("myElement-2");
playerInstance.setup({
width: "100%",
aspectratio: "16:9",
primary: "html5",
file: "http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4",
hlshtml: true,
//type: "hls",
autostart: true,
stretching: "exactfit",
events: {
onPlay: function(event) {
if (this.id != idPlayer) {
jwplayer(idPlayer).play(false);
idPlayer = this.id
}
}
}
});
var idPlayer = "myElement-3";
var playerInstance = jwplayer("myElement-3");
playerInstance.setup({
width: "100%",
aspectratio: "16:9",
primary: "html5",
file: "https://content.jwplatform.com/videos/C4lp6Dtd-640.mp4",
hlshtml: true,
//type: "hls",
autostart: true,
stretching: "exactfit",
events: {
onPlay: function(event) {
if (this.id != idPlayer) {
jwplayer(idPlayer).play(false);
idPlayer = this.id
}
}
}
});
Thanks in advance!