html5 video 이어서 재생 자바 스크립트 오류 질문드립니다.

dispit 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.06.25 22:20:52 3216 (1.♡.♡.44)

본문


<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 (오류)

#자바스크립트 #javascript #html5 #video

답변 1

로또루아 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2018-06-25 23:57:54 125.♡.♡.221

영상이 종료된 후 다음버튼의 클릭 이벤트가 실행되어야 합니다.

<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>

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>