Javascript JWplayer 7-将活动类添加到当前播放的视频

我正在我的站点中使用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);
    }

并按如下方式编辑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>"

html+=“
“+playlist[index]。title+”
”

通过添加

id='play-items-“+index+”

来识别列表中每个项目的唯一类。

更新 Firefox在li[i]上有一个问题，因为它是一个HTMLCollection（节点列表），并且不是来自

querySelectorAll（）

的实时版本。为了将li[i]转换为真正的数组，需要添加一个额外的步骤。更新涉及一个名为

nodeList2Array（sel）

的函数

更新 我误解了OP的要求：

是否有添加自定义类的解决方案，如单击列表项时的.active

因此，需要对自定义播放列表中生成的

进行操作

解决方案

在脚本的其余部分之后添加以下内容：

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

JWplayer 7-将活动类添加到当前播放的视频
jwplayer.key=“/*………：：：：45_字母数字：
加载。。。

感谢@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');
});

playerInstance.on（'playerItem'，function（））{
var playlist=playerInstance.getPlaylist（）；
var index=playerInstance.getPlayerIndex（）；
var current_li=document.getElementById（“播放项目-”+索引）；
对于（变量i=0；i

---

此代码将从每个li元素中删除所有“活动”，并发现ID与当前播放索引正确，然后添加“活动”类。

谢谢so@zer00ne！但看起来你误解了我的问题。我的意思是，当我们点击一个项目时，JWP将播放这个剪辑，我尝试向这个

项目添加一个新类，以显示正在播放哪个剪辑。我相信我解决了您的问题，请查看我的解决方案。谢谢@zer00ne！你的代码帮助我找到了一个与我的网站兼容的解决方案。当我尝试您的代码时，Firefox的控制台显示“notdefineli[I]”。我想我们必须解决这个问题。尝试替换：

current_li.classList.add（'active'）带有
当前_li.className='active'哇！当替换为
current_li.className='active'时
，原始类（在本例中为
列表组项目
）将完全替换为
活动
，而不是添加新类。我认为
classList.add
是一种安全的方法。如果Firefox不接受li[I]，那么HTMLCollection可能需要转换成真正的数组。等待更新。
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;
}

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