html5 video 이어서 재생 자바 스크립트 오류 질문드립니다.
본문
https://jsfiddle.net/z73pkwvm/10/
<video id="video" width="500" height="300" controls autoplay>
<source id="src" src="" type="video/mp4">
</video>
<br>
<button type="button" id="a">버튼 A</button>
<button type="button" id="b">버튼 B</button>
<button type="button" id="c">버튼 C</button>
<script>
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var video = document.getElementById("video");
var src = document.getElementById("src");
var video1 = "https://media.w3.org/2010/05/sintel/trailer.mp4";
var video2 = "http://media.w3.org/2010/05/bunny/trailer.mp4";
var video3 = "https://www.mainconcept.com/fileadmin/user_upload/products/Source_out.mp4";
var video4 = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";
a.addEventListener("click", function(){
gubun = "A";
video.pause();
src.setAttribute("src", video1);
video.load();
video.addEventListener("ended", function(){
if(gubun =="A"){
video.pause();
src.setAttribute("src", video2);
video.load();
gubun = ""; // gubun reset
}
});
});
b.addEventListener("click", function(){
gubun = "B";
video.pause();
src.setAttribute("src", video2);
video.load();
video.addEventListener("ended", function(){
if(gubun =="B"){
video.pause();
src.setAttribute("src", video3);
video.load();
gubun = ""; // gubun reset
}
});
});
c.addEventListener("click", function(){
gubun = "C";
video.pause();
src.setAttribute("src", video3);
video.load();
video.addEventListener("ended", function(){
if(gubun =="C"){
video.pause();
src.setAttribute("src", video4);
video.load();
gubun = ""; // gubun reset
}
});
});
</script>
버튼 A를 클릭하고 영상이 끝나면 B로 넘어가고 B 영상이 끝나면 C 영상으로 넘어가게 하려고 합니다..
A영상에서 B로 넘어갈땐 정상적으로 작동하나 이어서 B영상이 끝나고 C 영상으로 넘어가려고 할때 넘어가지 않고 중지됩니다.. 왜 그럴까요??
요약 : A -> B (정상작동) A -> B -> C (오류)
답변 1
영상이 종료된 후 다음버튼의 클릭 이벤트가 실행되어야 합니다.
<video id="video" width="500" height="300" controls autoplay>
<source id="src" src="" type="video/mp4">
</video>
<br>
<button type="button" id="a">버튼 A</button>
<button type="button" id="b">버튼 B</button>
<button type="button" id="c">버튼 C</button>
<button type="button" id="d">버튼 D</button>
<script>
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("d");
var video = document.getElementById("video");
var src = document.getElementById("src");
var video1 = "https://media.w3.org/2010/05/sintel/trailer.mp4";
var video2 = "http://media.w3.org/2010/05/bunny/trailer.mp4";
var video3 = "https://www.mainconcept.com/fileadmin/user_upload/products/Source_out.mp4";
var video4 = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";
a.addEventListener("click", function(){
gubun = "A";
video.pause();
src.setAttribute("src", video1);
video.load();
video.addEventListener("ended", function(){
if(gubun =="A"){
b.click();
}
});
});
b.addEventListener("click", function(){
gubun = "B";
video.pause();
src.setAttribute("src", video2);
video.load();
video.addEventListener("ended", function(){
if(gubun =="B"){
c.click();
}
});
});
c.addEventListener("click", function(){
gubun = "C";
video.pause();
src.setAttribute("src", video3);
video.load();
video.addEventListener("ended", function(){
if(gubun =="C"){
d.click();
}
});
});
d.addEventListener("click", function(){
gubun = "D";
video.pause();
src.setAttribute("src", video4);
video.load();
video.addEventListener("ended", function(){
if(gubun =="D"){
a.click();
}
});
});
</script>
아.. 이런 간단한 방법이 있었군요.. 답변해주셔서 감사드립니다!!