html5 videojs播放列表設置

Question

我想在sharepoint網站上實現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

您可以使用javascript更改視頻代碼中的視頻。 您可以刪除href並使用與視頻地址一起使用的元素，例如：

    <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 2

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 3

發現這個github項目，效果很好！ 看看它。 https://github.com/cfx/videojs-playlist