javascript html5 videojs 播放列表设置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20223511/
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
html5 videojs playlist setup
提问by Athapali
I want to implement videojs player on a sharepoint site. I have been able to setup the video player with one static video source for the player. Now I want to have a list of video urls on the side of the player, which user can click on and load the video on the same player. Something close has been done here: http://jsfiddle.net/Barzi/Jzs6B/9/but without using videojs.
我想在 sharepoint 站点上实现 videojs 播放器。我已经能够使用播放器的一个静态视频源设置视频播放器。现在我想在播放器的一侧有一个视频网址列表，用户可以点击并在同一播放器上加载视频。这里已经完成了一些接近的事情：http: //jsfiddle.net/Barzi/Jzs6B/9/但没有使用 videojs。
How can I do something similar with videojs implementation? http://jsfiddle.net/6nJ4z/
如何使用 videojs 实现做类似的事情？http://jsfiddle.net/6nJ4z/
<div id="html5videoplayer" style="font-family: Arial Unicode MS;">
<video id="videoarea" class="video-js vjs-default-skin" controls preload="none" data-setup="{}">
<!--<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />-->
</video>
</div>
<ul id="playlist">
<li><a href="http://html5videoformatconverter.com/data/images/happyfit2.mp4">Happy Fit</a></li>
<li><a href="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4">Sintel</a></li>
<li><a href="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</a></li>
</ul>
采纳答案by Ally
HTML
HTML
<div id="html5videoplayer" style="font-family: Arial Unicode MS;">
<video id="videoarea" class="video-js vjs-default-skin" controls preload="none" data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
</video>
</div>
<ul id="playlist">
<li data-loc="http://video-js.zencoder.com/oceans-clip.mp4" data-type="video/mp4">Oceans</li>
<li data-loc="http://html5videoformatconverter.com/data/images/happyfit2.mp4" data-type="video/mp4">Happy Feet</li>
<li data-loc="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" data-type="video/mp4">Sintel</li>
<li data-loc="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm" data-type="video/webm">Big Buck Bunny</li>
</ul>
CSS
CSS
#playlist li {
color: blue;
text-decoration: underline;
}
#playlist li:hover {
color: black;
cursor: pointer;
}
Javascript
Javascript
function doPlayList(listID, playerID) {
var player = document.getElementById(playerID);
var video = player.getElementsByTagName("video")[0];
var s;
video.src = null;
video.setAttribute("data-count", 0);
video.addEventListener("ended", function (e) {
e.preventDefault();
s = this.getElementsByTagName("source")[0];
var c = parseInt(this.getAttribute("data-count")) + 1;
var item = document.getElementById("video" + c);
if (item === null) {
item = document.getElementById("video0");
c = 0;
}
s.src = item.getAttribute("data-loc");
s.type = item.getAttribute("data-type");
this.setAttribute("data-count", c);
this.setAttribute("autoplay", "autoplay");
this.load();
this.play();
});
var list = document.getElementById(listID);
var items = list.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.id = "video" + i;
item.addEventListener("click", function (e) {
e.preventDefault();
var p = document.getElementById("html5videoplayer");
var v = p.getElementsByTagName("video")[0];
var s = p.getElementsByTagName("source")[0];
s.src = this.getAttribute("data-loc");
s.setAttribute("type", this.getAttribute("data-type"));
v.setAttribute("data-count", this.id.substr(5));
v.setAttribute("autoplay", "autoplay");
v.load();
v.play();
});
}
}
document.onready = doPlayList("playlist", "html5videoplayer");
Try it out in a jsFiddle.
在jsFiddle 中尝试一下。
Obviously the difference, here, no jQuery required. Let me know if you have any questions.
明显的区别，在这里，不需要 jQuery。如果您有任何问题，请告诉我。
EDIT:Changed the code so it uses the sourceelement and data-*attributes. Hope this helps.
编辑：更改了代码，使其使用source元素和data-*属性。希望这可以帮助。
回答by Rafael Marcos
You can change the video in video tag with javascript. You can remove the href and use the element onclick with the adress of video, for example:
您可以使用 javascript 更改视频标签中的视频。您可以删除 href 并将元素 onclick 与视频地址一起使用，例如：
<div id="html5videoplayer" style="font-family: Arial Unicode MS;">
<video id="videoarea" class="video-js vjs-default-skin" controls preload="none" data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
</div>
<ul id="playlist">
<li><a href="#" onclick="PlayVideo('happyfit2.mp4')">Happy Fit 2</a></li>
<li><a href="#" onclick="PlayVideo('happyfit3.mp4')">Happy Fit 3</a></li>
<li><a href="#" onclick="PlayVideo('happyfit4.mp4')">Happy Fit 4</a></li>
</ul>
<script type="text/javascript">
var PlayVideo = function(videoSrc){
$("#html5videoplayer").remove("source");
var htmlVideo = '<source type="video/mp4" src="'+ videoSrc +'" />';
$("#html5videoplayer").html(htmlVideo);
}
</script>
回答by Shankar Prakash G
Found this github project, works really well!. Have a look at it. https://github.com/cfx/videojs-playlist
找到了这个 github 项目，效果很好！看看它。 https://github.com/cfx/videojs-playlist
