자바 스크립트 질문드립니다.
본문
https://jsfiddle.net/L8ozmtye/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>
<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(){
video.pause();
src.setAttribute("src", video1);
video.load();
video.addEventListener("ended", function(){
alert("종료 메세지 A");
});
});
b.addEventListener("click", function(){
video.pause();
src.setAttribute("src", video2);
video.load();
video.addEventListener("ended", function(){
alert("종료 메세지 B");
});
});
</script>
버튼 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>
https://sir.kr/qa/252024?page=0&posting=ok&sst=wr_num
시간 나실 때 답변 부탁드립니다!
일단 jQuery 사용을 권장 드립니다
var a = $('#a');
var b = $('#b');
a.listen(function(){
video.pause();
// ~~
});
형태로 간략히 코드를 작성할 수 있습니다.
그리고 video 객체에 ended event를 두 번 등록했으니 두번 뜨게 되는게 맞습니다
play여부와 관계 없이 ended event를 한번만 등록하고, 어느 동영상을 재생중이었는지 다른 변수에 저장하세요
var video_message = "nothing";
$('#a').click(function() {
video_message = "AAA";
// play video
});
$('#b').click(function() {
video_message = "BBB";
// play video
});
$('#video').ended(function() {
alert(video_message);
});
