Javascript循環播放圖像

我使用video.js創建播放列表視頻組件。我試圖循環訪問數組，並將圖像放在div「playlistnav」中。以下是我的代碼。海報變量是持有圖像的東西。Javascript循環播放圖像

<!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>

來源

2013-12-12 Dondada

您可以使用jQuery的[。每次做到這一點（）]（http://api.jquery.com/jQuery.each/）函數。請看第二個例子，它用「易燃」的東西來循環對象。 – MonkeyZeus

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

我說的唯一的部分是：

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

來源

2013-12-12 16:14:17 Steve

嘗試是這樣的：

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

來源

2013-12-12 16:13:35 RealityDysfunction

Javascript循環播放圖像

回答

相關問題