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

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和視頻的ADRESS使用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