javascript - JWplayer 7 - 将事件类添加到当前播放的视频

Question

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

是否有任何解决方案可以在单击列表项时添加自定义类，例如 .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+"' 来标识列表中每个项目的唯一类。

Answer 1

感谢@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”类。