1

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!

MrLentis
  • 11
  • 2

0 Answers0