如何使用javascript创建随机视频播放器

时间:2015-07-30 12:12:32

标签: javascript html5 css3 video

我想创建一个仅使用javascript / css / html的视频播放器并随机选择视频播放。

请参阅下面的评论,以获取示例代码集代码的链接

1 个答案:

答案 0 :(得分:1)

基于您的codepen的简化版本,并回答“如何选择和播放随机视频”#39;问题见下文。

我已经使用了jQuery(这需要稍微复杂的方法来调用DOM元素上的play),但这就是你在样本中使用的

<video id="video" muted controls width=200 height=180></video>
<ul id="playlist">
<li><a href="video-number1.mp4">Number One</a>
<li><a href="video-number2.mp4">Number Two</a>
<li><a href="video-number3.mp4">Number Three</a>
</ul>

<script>
    // Get the playlist from the available URLs on the list 
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    // Select a random item from the list...
    vid = Math.round(Math.random()*len);
    // ... and get the href
    vidURL = tracks[vid].href;

    //console.log(vid + " " + vidURL)
    // Set the source to the selected URL
    $("#video").get(0).src = vidURL
    // Play the selected URL
    $("#video").get(0).play();

</script>