html5 videojs 재생 목록 설정

Question

sharepoint 사이트에서 videojs player를 구현하고 싶습니다. 나는 플레이어를위한 하나의 정적 비디오 소스로 비디오 플레이어를 설정할 수있었습니다. 이제 플레이어 옆에있는 비디오 URL 목록을 원합니다.이 플레이어는 동일한 플레이어에서 비디오를 클릭하여로드 할 수 있습니다. 뭔가 가까운 것이 여기에서 완료되었습니다 : 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; 
} 

자바 스크립트

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에 온 클릭 요소를 사용할 수 있습니다

<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