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

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

QA

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>

답변을 작성하시기 전에 로그인 해주세요.
전체 57
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT