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

【问题标题】：How to create a random video player with javascript如何使用 javascript 创建随机视频播放器
【发布时间】：2015-08-01 11:31:39
【问题描述】：

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

请参阅下面的 cmets 以获取示例 codepen 代码的链接

【问题讨论】：

没有代码就无法解决您的问题。也许您可以在jsfiddle.net 中重现该问题？
你做了什么？创建了一个帐户，根本没有看任何东西，问了一个问题？你知道这个网站的目的是什么吗？请访问here。
codepen.io/anon/pen/ZGmPym 我为我的电脑编辑了一点代码，我认为所有视频都不能在你的电脑上运行
示例中的第一个链接是 404，第三个是无法在

标签： javascript html css video

【解决方案1】：

基于您的 codepen 的简化版本，并仅回答“如何选择和播放随机视频”问题，请参见下文。

我为此使用了 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>

【讨论】：