我正在使用 video.js 创建一个播放列表视频组件。我正在尝试遍历数组并将图像放在 div“playlistnav”中。下面是我的代码。海报变量保存图像。
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="videojs-playlists.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<div class="playlistnav">
<h1></h1>
<button type="button" data-action="prev">Previous</button>
<button type="button" data-action="next">Next</button>
</div>
<div class="wrapper">
<div class="videocontent">
<video id="videoplayer" class="video-js vjs-default-skin vjs-fullscreen" controls preload="none" width="auto" height="auto"
data-setup="{}">
</video>
</div>
</div>
<script type="text/javascript">
var vid = videojs("videoplayer");
vid.on("ended", function(){
alert("This is the end");
})
</script>
<script>
var videos = [
{
src:['http://stream.flowplayer.org/bauhaus/624x260.mp4'],
poster : 'http://flowplayer.org/media/img/demos/minimalist.jpg',
title : 'Video 1'
},
{
src : ['http://stream.flowplayer.org/night3/640x360.mp4'],
poster : 'http://flowplayer.org/media/img/demos/playlist/railway_station.jpg',
title : 'Video 2'
},
{
src : ['http://stream.flowplayer.org/functional/624x260.mp4'],
poster : 'http://flowplayer.org/media/img/demos/functional.jpg',
title : 'Video 3'
}
];
var player = videojs('videoplayer');
player.playList(videos, {
getVideoSource: function(vid, cb) {
cb(vid.src, vid.poster);
}
});
$('[data-action=prev]').on('click', function(e) {
player.prev();
});
$('[data-action=next]').on('click', function(e) {
player.next();
});
</script>
</body>
</html>
最佳答案
尝试这样的事情:
document.ready(function(){
var nav = $('.playlistnav');
$.each(videos, function(i,val){
nav[i].append("<img src=" + $(this).poster + ">");
});
});
关于Javascript 循环遍历图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20548278/