아마도 html의 비디오 루프를 사용하여 비디오를 반복하지 않는 이유를 생각하고 계실 것입니다. 문제는 비디오를 반복 할 때 부드럽고 매끄럽지 않습니다. 나는 다른 해결책을 찾으려고했지만 아무것도 찾지 못했습니다. 그래서 대신에 비디오가 끝날 때 (또는 거의 끝날 때) 처음으로 돌아가도록 만들려고합니다.
자바 스크립트를 사용하여 어떻게합니까?
<video autoplay id="testvideo" width="100%" height="900px">
<source src="examplevideo.mp4" type="video/mp4" />
</video>
동영상이 끝에 도달하면 동영상이 반복됩니다.
var video = document.getElementById('testvideo')
// When the 'ended' event fires
video.addEventListener('ended', function(){
// Reset the video to 0
video.currentTime = 0;
// And play again
video.play();
});<video id="testvideo" autoplay controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>더 일찍하고 싶다면 timeupdate를 확인할 수 있습니다.이 경우 비디오의 75 %에 도달했는지 확인하겠습니다.
var video = document.getElementById('testvideo')
// When the 'ended' event fires
video.addEventListener('timeupdate', function(){
if(video.currentTime > video.duration * .75){
// Reset the video to 0
video.currentTime = 0;
// And play again
video.play();
}
});<video id="testvideo" autoplay controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>검색 (시간 재설정)은 데이터를 검색해야하므로 항상 조금씩 움직입니다. 이를 해결하는 유일한 방법은 잠재적으로 두 개의 비디오를 사용하고 다른 하나가 끝나기 전에 하나에서 다른 비디오로 전환하는 것입니다. 다음 코드는 약간 광범위하지만 실제로는 매우 간단합니다.
// Get both videos
var video1 = document.getElementById('testvideo');
var video2 = document.getElementById('testvideo2');
// Add an event that will switch the active class when the video is about to end
// CSS3 transitions will take into effect and fade one into the other.
video1.addEventListener('timeupdate', function(){
if(video1.currentTime > video1.duration - .5){
video1.className = '';
video2.className = 'active';
video2.play();
}
});
video2.addEventListener('timeupdate', function(){
if(video2.currentTime > video2.duration - .5){
video2.className = '';
video1.className = 'active';
video1.play();
}
});
// This will reset the video to be replayed
video1.addEventListener('ended', function(){
video1.currentTime = 0;
});
video2.addEventListener('ended', function(){
video2.currentTime = 0;
});video {
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
}
video.active {
z-index: 1;
opacity: 1;
-webkit-transition-delay: 200ms;
transition-delay: 200ms;
}<video id="testvideo" class="active" autoplay controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>
<video id="testvideo2" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" />
</video>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다