Question

我正在使用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>

Answer 1

尝试这样的事情：

document.ready(function(){
    var nav = $('.playlistnav');
    $.each(videos, function(i,val){
        nav[i].append("<img src=" + $(this).poster + ">");
    });
});

Answer 2

JSFiddle：http://jsfiddle.net/skoshy/7CMsn/

我添加的唯一部分是：

for (x=0; x < videos.length; x++) {
    $('.playlistnav').append('<img width="200" src="'+videos[x].poster+'"/>');
}

Javascript循环图像

2 个答案: