HTML 비디오에 버퍼링을 추가하는 방법

Question

페이지에 여러 개의 비디오가 있습니다.

<div class="row text-center"> 
    <video width="320" height="240" controls class="myvideo"> 
     <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4"> 
     Your browser does not support the video tag. 
    </video> 
</div> 

<div class="row text-center"> 
    <video width="320" height="240" controls class="myvideo"> 
     <source src="http://www.html5videoplayer.net/videos/fantasy.mp4" type="video/mp4"> 
     Your browser does not support the video tag. 
    </video> 
</div> 

버퍼링 이벤트를 추가하고 싶습니다. 또한 동영상 1을 클릭하면 동영상 2 (재생중인 경우)가 자동으로 중지됩니다. 이것을 어떻게 할 수 있습니까? 그들은 공통된 수업을 가지고 있습니다. 그들과 ID를 구현해야합니까? 비디오에

Answer 1

주고 IDS :

function videoPlay1() { 
    var video1 = document.getElementById("myVideoOne"); 
    var video2 = document.getElementById("myVideotwo"); 

    if (video1.paused) { 
     video1.play(); 
     video2.pause(); 
    } else { 
     video1.pause(); 
     video2.pause(); 
    } 
} 

function videoPlay2() { 
    var video1 = document.getElementById("myVideoOne"); 
    var video2 = document.getElementById("myVideotwo"); 

    if (video2.paused) { 
     video2.play(); 
     video1.pause(); 
    } else { 
     video1.pause(); 
     video2.pause(); 
    } 
} 

예 : 당신이 당신의 videoPlay1 및 videoPlay2 함수 내부에 이것을 사용할 수 있습니다 자동을 stoping에 대한

var vid = document.getElementById("myVideoOne"); 
alert("Start: " + vid.buffered.start(0) 
    + " End: " + vid.buffered.end(0)); 

var vid = document.getElementById("myVideoTwo"); 
alert("Start: " + vid.buffered.start(0) 
    + " End: " + vid.buffered.end(0)); 

: 버퍼링

<video width="320" height="240" controls class="myvideo" id="myVideoOne"> 
<video width="320" height="240" controls class="myvideo" id="myVideoTwo"> 

: myVideoOne에 대한 로더를 설정하려면이 jquery를 사용할 수 있습니다. css :

video.loading { 
    background: black url(/yourGifImg.gif) center center no-repeat; 
} 

JQuery와 :

$('#myVideoOne').on('loadstart', function (event) { 
    $(this).addClass('loading') 
}); 
$('#myVideoOne').on('canplay', function (event) { 
    $(this).removeClass('loading') 
});