如何构建 HTML 5 视频播放列表？

Question

嗨<我想知道是否有人知道详细描述如何在 HTML 5 中构建视频播放列表的教程？我还希望这些视频以随机顺序播放。

原文由 partrick mccreanor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我在这里为此创建了一个 JS 小提琴：

http://jsfiddle.net/Barzi/Jzs6B/9/

首先，您的 HTML 标记如下所示：

 <video id="videoarea" controls="controls" poster="" src=""></video>

<ul id="playlist">
    <li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg">First video</li>
    <li movieurl="VideoURL2.webm">Second video</li>
    ...
    ...
</ul>

其次，通过 JQuery 库编写的 JavaScript 代码将如下所示：

 $(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        })
    })
    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})​

最后但同样重要的是，你的 CSS：

 #playlist {
    display:table;
}
#playlist li{
    cursor:pointer;
    padding:8px;
}
#playlist li:hover{
    color:blue;
}
#videoarea {
    float:left;
    width:640px;
    height:480px;
    margin:10px;
    border:1px solid silver;
}​

原文由 Maziar Barzi 发布，翻译遵循 CC BY-SA 3.0 许可协议