[英]JWplayer 7 - Add active class to current playing video
我在網站上使用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+"'
為列表的每個項目標識唯一的類。
感謝@ 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元素中刪除所有“活動”,並找到當前播放索引正確的ID,然后添加“活動”類。
Firefox的li [i]有問題,因為它是HTMLCollection(nodeList),而不是來自querySelectorAll()
。 為了將li [i]轉換為真正的數組,需要添加一個額外的步驟。 更新涉及一個名為nodeList2Array(sel)
的函數。
我曲解了OP的要求:
是否有任何解決方案來添加自定義類,如單擊列表項時的.active。
因此,需要對自定義播放列表的生成的<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;
}
DEMO
以下演示程序肯定可以正常工作,但您需要輸入自己的密鑰才能使其正常運行。 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="http://stackoverflow.com/questions/33252950/jwplayer-7-add-active-class-to-current-playing-video"> <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>
當然可以添加.active
這樣的類,然后以這種方式應用樣式,但是JW7具有大量的CSS Skin文檔。 我使用此處詳述的技術為皮膚定型:
http://support.jwplayer.com/customer/en/portal/articles/2092249-sample-css-file
DEMO
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.