JWplayer 7 - 添加 active class 到当前播放的视频

Question

我在我的站点中使用 JWplayer 7（HTML5 渲染模式）。我创建了一个带有自定义播放列表的播放器，但点击后无法突出显示当前播放的视频。

是否有任何解决方案可以添加自定义 class，例如单击列表项时 .active。

这是我设置 JWplayer 的代码。

var playerInstance = jwplayer("videoCont");
playerInstance.setup({
    image: "{PLAYLIST_IMAGE}",
    autostart: false,
    aspectratio: "16:9",
    playlist : "{NV_BASE_SITEURL}{MODULE_NAME}/player/{RAND_SS}{PLAYLIST_ID}-{PLIST_CHECKSS}-{RAND_SS}{FAKE_ID}/",
    controls: true,
    displaydescription: true,
    displaytitle: true,
    flashplayer: "{NV_BASE_SITEURL}themes/default/modules/{MODULE_NAME}/jwplayer/jwplayer.flash.swf",
    primary: "html5",
    repeat: false,
    skin: {"name": "stormtrooper"},
    stagevideo: false,
    stretching: "uniform",
    visualplaylist: true,
    width: "100%"
  });

以及生成自定义播放器的代码

var list = document.getElementById("show-list");
var html = list.innerHTML;
html +="<ul class='list-group'>"
playerInstance.on('ready',function(){
var playlist = playerInstance.getPlaylist();
for (var index=0;index<playlist.length;index++){
    var playindex = index +1;
    html += "<li class='list-group-item'><span>"+playlist[index].title+"</span><span class='pull-right'><label onclick='javascript:playThis("+index+")' title='Phát "+playlist[index].title+"' class='btn btn-default btn-xs'><i class='fa fa-play'></i></label><label class='btn btn-default btn-xs' href='"+playlist[index].link+"' title='Xem ở cửa sổ mới' target='_blank'><i class='fa fa-external-link-square'></i></label></span></li>"
    list.innerHTML = html;
}
html +="</ul>"
});
    function playThis(index) {
        playerInstance.playlistItem(index);
    }

解决方案：基于@zer00ne

的想法

添加以下代码：

playerInstance.on('playlistItem', function() {
var playlist = playerInstance.getPlaylist();
var index = playerInstance.getPlaylistIndex();
var current_li = document.getElementById("play-items-"+index);
for(var i = 0; i < playlist.length; i++) {
        $('li[id^=play-items-]').removeClass( "active" )
}
current_li.classList.add('active');
});

之前

function playThis(index) {
    playerInstance.playlistItem(index);
}

然后编辑 html 生成如下：

    html += "<li id='play-items-"+index+"' class='list-group-item'><span>"+playlist[index].title+"</span><span class='pull-right'><label onclick='javascript:playThis("+index+")' title='"+lang_play+" "+playlist[index].title+"' class='btn btn-primary btn-xs mgr_10'><i class='fa fa-play'></i></label><a href='"+playlist[index].link+"' title='"+lang_new_window+"' target='_blank'><label class='btn btn-default btn-xs'><i class='fa fa-external-link-square'></i></label></a></span></li>"

通过添加 id='play-items-"+index+"' 来识别列表中每个项目的唯一性 class。

Answer 1

更新

Firefox 对 li[i] 有问题，因为它是一个 HTMLCollection (nodeList) 而不是来自 querySelectorAll()。需要添加一个额外的步骤才能将 li[i] 转换为真正的数组。更新涉及一个名为 nodeList2Array(sel).

的函数

更新

我误解了 OP 的要求：

Is there any solution to add a custom class, like .active when click on a item of list.

所以需要的是对生成的自定义播放列表的 <li> 进行操作。

解决方案

在脚本的其余部分之后添加：

jw.on('playlistItem', function() {
    var playlist = jw.getPlaylist();
    var idx = jw.getPlaylistIndex();
    //var li = document.querySelectorAll('.group-list-item');
    var li = nodeList2Array('.group-list-item');

    for(var i = 0; i < playlist.length; i++) {
        if(i === idx) {
            li[i].classList.add('active');
        }
        else {
            li[i].classList.remove('active');
        }
    }
});

function nodeList2Array(sel) {
    var li = Array.prototype.slice.call(document.querySelectorAll(sel));
    return li;
}

演示版

！！！重要信息请阅读！！！

以下演示绝对有效，但您需要输入自己的密钥才能运行。 JW7 没有像 JW6 那样的免费版本。

var jw = jwplayer("media1");
jw.setup({
  playlist: "https://content.jwplatform.com/feeds/13ShtP5m.rss",
  displaytitle: false,
  width: 680,
  height: 360
});

var list = document.querySelector(".group-list");
var html = list.innerHTML;

jw.on('ready', function() {
  var playlist = jw.getPlaylist();
  for (var idx = 0; idx < playlist.length; idx++) {
    html += "<li class='group-list-item' title='" + playlist[idx].title + "'><a href='javascript:playThis(" + idx + ");'><img height='75' width='120' src='" + playlist[idx].image + "'><figcaption>" + playlist[idx].title + "</figcaption></a></li>";
    list.innerHTML = html;
  }
});

//SOLUTION~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

jw.on('playlistItem', function() {
  var playlist = jw.getPlaylist();
  var idx = jw.getPlaylistIndex();
  var li = document.querySelectorAll('.group-list-item');
  for (var i = 0; i < playlist.length; i++) {
    if (i === idx) {
      li[i].classList.add('active');
    } else {
      li[i].classList.remove('active');
    }
  }
});
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function playThis(idx) {
  jw.playlistItem(idx);
}

html {
  box-sizing: border-box;
  font: 400 16px/2 small-caps"Trebuchet MS";
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
  outline: 0;
  text-indent: 0;
}
body {
  height: 100%;
  width: 100%;
  background: #000;
  color: #FFF;
  position: relative;
}
#main {
  margin: auto;
  width: 680px;
}
#frame1 {
  position: absolute;
  top: 12.5%;
  left: 25%;
}
.jwp {
  position: relative;
}
.group-list {
  position: relative;
  list-style-type: none;
  list-style-position: inside;
}
.group-list li {
  list-style: none;
  display: inline-block;
  float: left;
  padding: 15px 0 0 11px;
  line-height: 2;
}
.group-list a {
  text-decoration: none;
  display: inline-block;
  background: #000;
  border: 1px solid #666;
  border-radius: 8px;
  height: 75px;
  width: 120px;
  text-align: center;
}
.group-list a:hover,
.group-list a:active {
  border: 1px solid #ff0046;
  border-radius: 8px;
  color: #FFF;
  background: hsla(180, 60%, 50%, .4);
}
img {
  display: block;
}
.active {
  background: hsla(180, 60%, 50%, .4);
  outline: 3px solid #0FF;
}
.active figcaption {
  color: #000;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>JWplayer 7 - Add active class to current playing video</title>
  <meta name="SO33252950" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <script src="https://d1jtvmpy1cspce.cloudfront.net/lib/jw/7/jwplayer.js"></script>
  <script>
    jwplayer.key = "/*........::::::45_Alphanumerics::::::........*/"
  </script>
</head>

<body>
  <main id="main">
    <section id="frame1" class="frame">
      <div id="media1" class="jwp">Loading...</div>
      <ul id="list1" class="group-list"></ul>
    </section>
  </main>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>

</html>

旧

当然可以添加 class，例如 .active，然后以这种方式应用样式，但是 JW7 有大量的 CSS 外观文档。我使用此处详述的技术设计了皮肤样式：

http://support.jwplayer.com/customer/en/portal/articles/2092249-sample-css-file

演示版

https://glpro.s3.amazonaws.com/_util/smpte/jwp.html

/* Allows you to adjust the color of the playlist item when hovering and has a different active style.*/

.jw-skin-stormtrooper .jw-playlist-container .jw-option:hover,
.jw-skin-stormtrooper .jw-playlist-container .jw-option.jw-active-option {
  background-color:  hsla(210,100%,20%,1);
}

/* Changes the color of the label when hovering.*/

.jw-skin-stormtrooper .jw-playlist-container .jw-option:hover .jw-label {
  color: #0080ff;
}

/* Sets the color of the play icon of the currently playing playlist item.*/
.jw-skin-stormtrooper .jw-playlist-container .jw-label .jw-icon-play {
  color: #0080ff;
}

/* Sets the color of the playlist title */
.jw-skin-stormtrooper .jw-tooltip-title {
    background-color: #000;
    color: #fff
}

/* Style for playlist item, current time, qualities, and caption text.*/
.jw-skin-stormtrooper .jw-text {
  color: #aed4ff;
}

/* Color for all buttons when they are inactive. This is over-ridden with the 
inactive configuration in the skin block.*/
.jw-skin-stormtrooper .jw-button-color {
  color: #cee2ec;
}


/* Color for all buttons for when they are hovered on. This is over-ridden with the 
active configuration in the skin block.*/

.jw-skin-stormtrooper .jw-button-color:hover {
  color: #00e;
}


/* Color for when HD/CD icons are toggled on. */
.jw-skin-stormtrooper .jw-toggle {
  color:  #0080ff;
}

/* Color for when HD/CD icons are toggled off. */
.jw-skin-stormtrooper .jw-toggle.jw-off {
  color: #ffffff;
}

Answer 2

感谢@zer00ne 的创意！您的代码不完全适用于我的网站，但它提供了解决方案。

playerInstance.on('playlistItem', function() {
var playlist = playerInstance.getPlaylist();
var index = playerInstance.getPlaylistIndex();
var current_li = document.getElementById("play-items-"+index);
for(var i = 0; i < playlist.length; i++) {
        $('li[id^=play-items-]').removeClass( "active" )
}
current_li.classList.add('active');
});

此代码将从每个 li 元素中删除所有 "active" 并发现 ID 与当前播放的索引是正确的，然后添加 "active" class.

JWplayer 7 - 添加 active class 到当前播放的视频

JWplayer 7 - Add active class to current playing video

html

javascript

jwplayer

jwplayer7

更新

更新

！！！重要信息请阅读！！！

旧