我想创建一个仅使用javascript / css / html的视频播放器并随机选择视频播放。
请参阅下面的评论,以获取示例代码集代码的链接
答案 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>