html5 videojs播放列表设置

Question

我想在共享点网站上实现 videojs 播放器。我已经能够使用播放器的一个静态视频源设置视频播放器。现在我想在播放器的一侧有一个视频网址列表，用户可以单击该列表并将视频加载到同一播放器上。这里已经完成了一些接近的事情：http://jsfiddle.net/Barzi/Jzs6B/9/ 但没有使用 videojs。

如何使用 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>

Answer 1

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

#playlist li {
    color: blue;
    text-decoration: underline;
}
#playlist li:hover {
    color: black;
    cursor: pointer;
}

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");

在jsFiddle 中尝试一下。

显然不同，这里不需要 jQuery。如果您有任何问题，请告诉我。

编辑： 更改了代码，使其使用source 元素和data-* 属性。希望这会有所帮助。

Answer 2

您可以使用 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>

Answer 3

找到了这个 github 项目，效果很好！看看它。 https://github.com/cfx/videojs-playlist