jquery选项卡上的JW Player有机会停止视频和自动启动当前

时间:2017-06-24 02:29:20

标签: javascript jquery jwplayer jquery-ui-tabs jwplayer7

我使用jquery标签(https://wordpress.org/plugins/tabs-responsive/)在同一页面中有多个视频。所以,我想要做的就是当我改变标签并再次自动启动时让它们停止,如果我再次选择相同的标签或者更好地在当前标签中重新加载播放器。

我正在玩游戏,我发现如何使用这段代码停止视频:

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
      }
    }
  }
});

提前致谢!

0 个答案:

没有答案