html5 videojs настройка плейлиста

Question

Я хочу реализовать плеер videojs на сайте sharepoint. Я смог настроить видеоплеер с одним статическим видеоисточником для проигрывателя. Теперь я хочу иметь список видеороликов на стороне плеера, который пользователь может щелкнуть и загрузить видео на том же игроке. Что-то близко сделано здесь: http://jsfiddle.net/Barzi/Jzs6B/9/, но без использования видео.

Как я могу сделать что-то подобное с реализацией 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. Дайте знать, если у вас появятся вопросы.

EDIT: Измененный код, чтобы он использует 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