Javascript 如何构建 HTML 5 视频播放列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3236921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to build a HTML 5 video playlist?
提问by partrick mccreanor
Hi< I was wondering would anybody know of tutorials describing, in detail, how to build a video playlist in HTML 5? I also would like these videos to play in a random order.
嗨<我想知道有人知道详细描述如何在 HTML 5 中构建视频播放列表的教程吗？我还希望这些视频以随机顺序播放。
回答by Maziar Barzi
I created a JS fiddle for this here:
我在这里创建了一个 JS 小提琴：
http://jsfiddle.net/Barzi/Jzs6B/9/
http://jsfiddle.net/Barzi/Jzs6B/9/
First, your HTML markup looks like this:
首先，您的 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>
Second, your JavaScript code via JQuery library will look like this:
其次，通过 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")
})
})?
And last but not least, your CSS:
最后但并非最不重要的是，您的 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;
}?
回答by user2731816
You can use this. perfect and easily.
你可以用这个。 完美而轻松。
<html>
<head></head>
<style type="text/css">
#media{
background-color:#000;
color:#fff;
float:left;
width:640px;
height:400px;
}
#button_container{
float:left;
}
.media_item{
padding:15px;
border:1px solid #aaa;
background-color:#ccc;
cursor:pointer;
width:200px;
margin:4px 0px 0px 4px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
</style>
<body>
<div id="media">
<p>Some Default Content Should Be Here</p>
</div>
<div id="button_container">
<div class="media_item" id="/mymovie.mov">
My Movie 4:26
</div>
<div class="media_item" id="/anothermovie.mov">
Another Movie 5:22
</div>
</div>
<script type="text/javascript">
function update_source(src){
document.getElementById('media').innerHTML = '<h2>'+src+' Loaded<h2><object height="400" width="640" id="" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=7,3,0,0" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" class="quicktime"> \
<param value="'+src+'" name="src"> \
<param value="false" name="showlogo"> \
<param value="tofit" name="scale"> \
<param value="true" name="saveembedtags"> \
<param value="true" name="postdomevents"> \
<embed height="400" width="640" src="+src+" type="video/quicktime" postdomevents="true" controller="false" showlogo="false" scale="tofit"> \
<param value="false" name="controller"> \
<param value="http://images.apple.com/global/elements/quicktime/qt_endstate640x400.jpg" name="posterframe"> \
<param value="false" name="showlogo"><param value="true" name="autostart"> \
<param value="true" name="cache"> \
<param value="white" name="bgcolor"> \
<param value="false" name="aggressivecleanup"> \
</embed> \
<param value="false" name="controller"> \
<param value="http://images.apple.com/global/elements/quicktime/qt_endstate640x400.jpg" name="posterframe"> \
<param value="false" name="showlogo"> \
<param value="true" name="autostart"> \
<param value="true" name="cache"> \
<param value="black" name="bgcolor"> \
<param value="false" name="aggressivecleanup"> \
</object>';
}
var container = document.getElementById('button_container');
var buttons = container.getElementsByTagName('div');
for(var i = 0; i < buttons.length; i++){
buttons[i].setAttribute('onclick', 'update_source(this.id)');
}
</script>
</body>
</html>
