<div class="video_area">
<video id="myVideo" poster="img/cover.jpg" width="100%">
<source src="img/video_1.mp4" type="video/mp4">
</video>
<div class="buttons">
<button class="uk-button uk-button-primary second" onclick="pauseVid()" type="button">
<i class="fas fa-pause"></i></button>
<button class="uk-button uk-button-primary first" onclick="playVid()" type="button">
<i class="fas fa-play"></i></button>
</div>
<script>
var vidClip = document.getElementById("myVideo");
function playVid() {
myVideo.play();
}
function pauseVid() {
myVideo.pause();
}
$('button').on('click', function() {
$('.first, .second').toggle();
});
vidClip.onended = function(e) {
$('.first, .second').toggle();
};
</script>
</div>
안녕하세요.
비디오 재생버튼/일시정지버튼 관련 스크립트를 넣었는데
비디오 영역에서 벗어났을 때 일시정지 버튼이 사라지게 하고
다시 비디오 영역에 위치했을 때 재생버튼이 나타나게 하고싶습니다 ㅠㅠ
도와주세여 ㅠㅠ
안녕하세요~^^
마우스 커서가 특정 영역 안에 있을 때
코드를 추가하고 실행되게 하시려면
jQuery mouseover 이벤트를 활용해보시겠어요?
https://api.jquery.com/mouseover/
마우스 커서가 특정 영역에서 벗어났을 때
코드를 추가하고 실행되게 하시려면
jQuery mouseout 이벤트를 활용해보세요.
https://api.jquery.com/mouseout/
고맙습니다.