두 개의 비디오가 있습니다. 첫 번째 비디오를 10 초 동안 재생하고, 일시 중지 한 다음 두 번째 비디오를 재생하고, 두 번째 비디오가 중지되면 중단 된 첫 번째 비디오 재생으로 돌아갑니다. 일종의 광고 / 상업적입니다.
현재는 첫 번째 동영상이 완전히 끝난 후 순차적으로 재생되는 두 개의 동영상이 있습니다. 솔루션이 JavaScript 이벤트 처리기에 있다는 것을 알고 있지만 올바르게 얻을 수없는 것 같습니다.
HTML :
<div class="vidBox" id="contain">
<video id="video1" class="vid" muted controls="true" height="300" width="500">
<source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4">
</video>
<video id="video2" class="vid2" autoplay muted controls="true" style="display:none;" height="300" width="500">
<source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4">
</video>
</div>
자바 스크립트 :
var vid = document.getElementById('video1');
vid.addEventListener("ended", hideVideo, false);
function hideVideo() {
var vid = document.getElementById('video1');
var vid2 = document.getElementById('video2');
vid.removeEventListener("ended", hideVideo, false);
vid.style.display='none';
vid2.style.display='block';
}
다음은 크롬, 사파리, 파이어 폭스에서 테스트 한 한 가지 솔루션입니다. (작동하는지 알 수 있도록 두 번째 비디오를 변경했지만 물론 원하는 것을 설정할 수 있습니다) :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="vidBox" id="contain">
<video id="video1" class="vid" muted controls="true" height="300" width="500" autoplay>
<source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4">
</video>
<video id="video2" class="vid2" autoplay muted controls="true" style="display:none;" height="300" width="500">
<source src="myVideo3.mp4" type="video/mp4">
</video>
</div>
<script type="text/javascript">
var vid = document.getElementById('video1');
vid.addEventListener("ended", hideVideo, false);
function hideVideo(event) {
console.log("hideVideo");
var vid = document.getElementById('video1');
vid.pause();
vid.style.display='none';
vid.removeEventListener("ended", hideVideo, false);
var vid2 = document.getElementById('video2');
vid2.style.display='block';
vid2.addEventListener("ended", hideVideo2, false);
vid2.load();
}
function hideVideo2(event) {
console.log("hideVideo2");
var vid2 = document.getElementById('video2');
vid2.style.display='none';
var vid = document.getElementById('video1');
vid.style.display='block';
vid.play();
}
// start timer in milliseconds
setTimeout( hideVideo, 10000);
</script>
</body>
</html>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다