javascript - JWPlayer7获取当前视频信息并点击缩略图时显示

Question

尝试让此播放器代码正常工作时遇到问题。我正在将 jwplayer7 与 jwplayer 的 api 和播放列表一起使用。我试图获取当前视频的信息，仅显示在左侧视频下方。现在我让它循环浏览所有视频信息，并立即显示所有信息。如何仅显示当前视频，然后在单击缩略图时显示新视频的信息？预先感谢您提供任何提示!

CSS:

<style>
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}
div {
    position:relative;
}
body {
    background: #bdbaba;

}
.container {
    width: 960px;
    margin: 30px auto;
    background: #fff;
}
#fullPlaylist {
    background: #ebebeb;
    padding: 10px 0;
}
.videoLeft {
    width: 632px;
    float:left;
    margin-right: 10px; 
}

.VideoPlayer {
    background: #fff;
    margin-bottom: 10px;
}

.VideoInfo {
    background: #fff;
    padding: 10px 20px;
}

.ListItems {
    background: #fff;
    padding: 10px;
    float:right;
    width: 317px;
    height: 470px;
}

#list {
    list-style: none;
    margin: 0;
padding: 0;
/*height: 421px;
overflow: hidden;*/
}

#list li {
    display: block;
    margin-bottom: 30px;
    line-height: 1.2;
    font-size: 11px;
}

.clear {
    clear:both;
}

#list li img {
width: 114px;
display:block;
}

.thumbimg {
float: left;
margin-right: 6px;
width: 114px;
}

.thumbimg span {
position:absolute;
background: #000;
color: #fff;
font-size: 9px;
display: inline-block;
padding: 2px;
right: 0;
bottom: 0;
}

#list li:after {
    clear:both;
    content: "";
    display:table;
}

#list li a {
    text-decoration: none;
    color: #666;
    font-weight: 600;
}
.byline {
    display: block;
    color: #666;
    font-weight: 400;
}
.viewline {
    display: block;
    color: #666;
    font-weight: 400;
}
.videoTitle {
    font-size: 17px;
    font-weight: 300;
    color: #555556;
    margin-bottom: 10px;
}
.viewbox {
    padding-bottom: 5px;
}

.viewImg {
    width: 43px;
    display: inline-block;
    margin-right: 4px;
    vertical-align:middle;
}
.viewby {
    display: inline-block;
    font-size: 10px;
    vertical-align:middle;
    color: #555556;
}

.viewviews {
    display: inline-block;
    float:right;
    vertical-align:middle;
    text-align:right;
    font-weight: 400;
    color: #555556;
    font-size: 17px;
}
</style>

JavaScript:

    <script type="text/javascript">
var playerInstance = jwplayer("vidcontainer");
playerInstance.setup({
    visualplaylist: false,
    displaytitle: false,
    width: 632,
    height: 356,
    sharing: {
      code: encodeURI("<iframe src='https://www.youtube-nocookie.com/embed/MEDIAID' frameborder='0' allowfullscreen></iframe>"),
      link: "https://www.youtube.com/watch?v=MEDIAID"
   },
    skin : {
    url:"scripts/jwplayer7/skins/glow.css",
    name:"glow"
    },
playlist: [{
    file: "https://www.youtube.com/watch?v=3pBOUgKc-l4",
    mediaid: "3pBOUgKc-l4",
    image: "http://img.youtube.com/vi/3pBOUgKc-l4/mqdefault.jpg",
    title: "Behind the Scenes at Murad's Environmental Shield Shoot",
    duration: "0:15",
    mediaid: "12345",
    by: "Murad Skincare",
    byimage: "https://yt3.ggpht.com/-nxeQqjt3AzY/AAAAAAAAAAI/AAAAAAAAAAA/n9Vw8vS-2Gg/s88-c-k-no/photo.jpg",
    views: "177"
},
{
    file: "https://www.youtube.com/watch?v=WLir_Ch0DXc",
    mediaid: "WLir_Ch0DXc",
    image: "http://img.youtube.com/vi/WLir_Ch0DXc/mqdefault.jpg",
    title: "Murad Gives Me Clear Skin! - Behind the Scenes at the Murad Acne Shoot",
    duration: "0:43",
    by: "Murad Skincare",
    byimage: "https://yt3.ggpht.com/-nxeQqjt3AzY/AAAAAAAAAAI/AAAAAAAAAAA/n9Vw8vS-2Gg/s88-c-k-no/photo.jpg",
    views: "11,642"
},
{
    file: "https://www.youtube.com/watch?v=tQWeNqtSZCo",
    mediaid: "tQWeNqtSZCo",
    image: "http://img.youtube.com/vi/tQWeNqtSZCo/mqdefault.jpg",
    title: "Behind the Scenes with Murad Skincare | Inspired Skincare for a Beautiful Life",
    duration: "0:15",
    by: "Murad Skincare",
    byimage: "https://yt3.ggpht.com/-nxeQqjt3AzY/AAAAAAAAAAI/AAAAAAAAAAA/n9Vw8vS-2Gg/s88-c-k-no/photo.jpg",
    views: "799"
},
{
    file: "https://www.youtube.com/watch?v=eIL65facc5M",
    mediaid: "eIL65facc5M",
    image: "http://img.youtube.com/vi/eIL65facc5M/mqdefault.jpg",
    title: "Current Skincare Routine: Murad Products",
    duration: "12:20",
    by: "ShadesOfKassie",
    byimage: "https://yt3.ggpht.com/-3FJahxudGyU/AAAAAAAAAAI/AAAAAAAAAAA/Ln9JqctsrBA/s88-c-k-no/photo.jpg",
    views: "15,172"
},
{
    file: "https://www.youtube.com/watch?v=UFg7IwAgJ8o",
    mediaid: "UFg7IwAgJ8o",
    image: "http://img.youtube.com/vi/UFg7IwAgJ8o/mqdefault.jpg",
    title: "My other Murad Video filmed using iMovie. Rapid Lightening system",
    duration: "1:00",
    by: "Laurel Heflin",
    byimage: "https://yt3.ggpht.com/-Zc_DTtzj5Lk/AAAAAAAAAAI/AAAAAAAAAAA/Cp5qKdbtno0/s88-c-k-no-mo/photo.jpg",
    views: "65"
}]
});

var list = document.getElementById("list");
var videoInfoCurrent = document.getElementById("videoInfoCurrent");
var html = list.innerHTML;
var htmlInfo = videoInfoCurrent.innerHTML;

playerInstance.on('ready',function(){
var playlist = playerInstance.getPlaylist();
for (var index=0;index<playlist.length;index++){
var playindex = index +1;
html += "<li><span class='dropt' title='"+playlist[index].title+"'><a href='javascript:playThis("+index+")'><div class='thumbimg'><img src='" + playlist[index].image + "'</img><span>" + playlist[index].duration + "</span></div>"+playlist[index].title+"</a></span><span class='byline'>by " + playlist[index].by + "</span><span class='viewline'>" + playlist[index].views + " views</span></li>";
list.innerHTML = html;


  htmlInfo += "<div class='videoTitle'>" + playlist[0].title + "</div><div class='viewbox'><img class='viewImg' src='" + playlist[0].byimage + "'</img><div class='viewby'>" + playlist[0].by + "</div><div class='viewviews'>" + playlist[0].views + " views</div><div class='clear'></div></div>";
videoInfoCurrent.innerHTML = htmlInfo;  



}

});




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

</script>

HTML:

<div class="container">

<div id="fullPlaylist">
<div class="videoLeft">
<div class="VideoPlayer">
<div id="vidcontainer"></div>
</div>

<div class="VideoInfo">
<div id="videoInfoCurrent"></div>
</div>

</div>
<div class="ListItems">
<ul id="list"></ul>
</div>

<div class="clear"></div>

</div>
<!-- end full playlist -->

</div>

Answer 1

您可以订阅“playlistItem”事件并将 videoInfoCurrent 标记的创建移至该处理程序中:

playerInstance.on('playlistItem', function (e) {
    var currentPlaylistItem = playerInstance.getPlaylistItem(e.index);
    htmlInfo = "<div class='videoTitle'>" + currentPlaylistItem.title + "</div><div class='viewbox'><img class='viewImg' src='" + currentPlaylistItem.byimage + "'</img><div class='viewby'>" + currentPlaylistItem.by + "</div><div class='viewviews'>" + currentPlaylistItem.views + " views</div><div class='clear'></div></div>";
    videoInfoCurrent.innerHTML = htmlInfo;
});