자바 스크립트 질문드립니다. 채택완료
https://jsfiddle.net/L8ozmtye/1/">https://jsfiddle.net/L8ozmtye/1/
</p>
<p><video id="video" width="500" height="300" controls autoplay>
<source id="src" src="" type="video/mp4">
</video></p>
<p>
</p>
<p><button type="button" id="a">버튼 A</button>
<button type="button" id="b">버튼 B</button></p>
<p><script>
var a = document.getElementById("a");
var b = document.getElementById("b");
var video = document.getElementById("video");
var src = document.getElementById("src");
var video1 = "<a href="https://media.w3.org/2010/05/sintel/trailer.mp4";" target="_blank" rel="noopener noreferrer">https://media.w3.org/2010/05/sintel/trailer.mp4";</a>
var video2 = "<a href="http://media.w3.org/2010/05/bunny/trailer.mp4";" target="_blank" rel="noopener noreferrer">http://media.w3.org/2010/05/bunny/trailer.mp4";</a></p>
<p>a.addEventListener("click", function(){
video.pause();
src.setAttribute("src", video1);
video.load();
video.addEventListener("ended", function(){
alert("종료 메세지 A");
});
});</p>
<p>b.addEventListener("click", function(){
video.pause();
src.setAttribute("src", video2);
video.load();
video.addEventListener("ended", function(){
alert("종료 메세지 B");
});
});
</script></p>
<p>
버튼 A를 클릭한 동영상이 끝나면 종료 메세지 A가 나오게 하고
버튼 B를 클릭한 동영상이 끝나면 종료 메세지 B가 나오게 하려고 합니다.
하지만, 버튼 A를 클릭하고 버튼 B를 클릭하면
버튼 B 영상에서 종료메세지 A 이후 종료 메세지 B 총 2개가 뜹니다..
검색도 해보고 했는데 어디가 잘못됐는지 잘 모르겠습니다..
답변 3개
임의로 구분자 값을 줘서 비교해서 알렛창을 사용하면 될듯...
<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>
<script>
var a = document.getElementById("a");
var b = document.getElementById("b");
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";
a.addEventListener("click", function(){
gubun = "A";
video.pause();
src.setAttribute("src", video1);
video.load();
video.addEventListener("ended", function(){
if(gubun =="A"){
alert("종료 메세지 A");
gubun = ""; // gubun reset
}
});
});
b.addEventListener("click", function(){
gubun = "B";
video.pause();
src.setAttribute("src", video2);
video.load();
video.addEventListener("ended", function(){
if(gubun =="B"){
alert("종료 메세지 B");
gubun = ""; // gubun reset
}
});
});
</script>
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
그리고 video 객체에 ended event를 두 번 등록했으니 두번 뜨게 되는게 맞습니다
play여부와 관계 없이 ended event를 한번만 등록하고, 어느 동영상을 재생중이었는지 다른 변수에 저장하세요
</p>
<p>var video_message = "nothing";</p>
<p>$('#a').click(function() {
video_message = "AAA";
// play video
});</p>
<p>$('#b').click(function() {
video_message = "BBB";
// play video
});</p>
<p>$('#video').ended(function() {
alert(video_message);
});</p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
시간 나실 때 답변 부탁드립니다!