자바스크립트 제이쿼리 video 태그 동영상 재생 정지 상호작용 버튼 기능

자바스크립트 (JavaScript)

 

See the Pen video tag 동영상 재생 정지 상호작용 버튼 기능 (영상 여러개 적용 가능) by kimyangsun (@kimyangsun) on CodePen.

 

자바스크립트 제이쿼리 video 태그 동영상 재생 정지 상호작용 버튼 기능 코드펜 예제 소스코드입니다.

실무에서 작업하면서 이 기능은 기록해두는게 좋을거 같아서 저장해둔 소스인데 블로그에 올립니다. :)

 

// 메타버스 콘텐츠 비디오 재생, 정지
let videoBox = $('.video-box');
let video = videoBox.find('video');

$('.video-box .video-buttons .play-button').on('click', function(){
  var targetVideoBox = $(this).closest('.video-box');
  var targetVideo = targetVideoBox.find('video').get(0);
  targetVideo.play();
  $(this).hide();
  targetVideoBox.focus();
})

$('.video-box .video-buttons .stop-button').on('click', function(){
  var targetVideo = $(this).closest('.video-box').find('video').get(0);
  targetVideo.pause();
  $(this).hide();
  $(this).siblings('.play-button').show().focus();
})

// 재생중
video.on('playing', function(){
  var targetBox = $(this).parent();
  var stopButton = $(this).siblings('.video-buttons').find('.stop-button');
  targetBox.on("mouseover focus", function (){
    stopButton.show();
  });
  targetBox.on("mouseout", function (){
    stopButton.hide();
  });
  stopButton.on("mouseout blur", function (){
    stopButton.hide();
  });
})

// 정지중
video.on('pause', function(){
  var targetBox = $(this).parent();
  var playButton = $(this).siblings('.video-buttons').find('.play-button');
  var stopButton = $(this).siblings('.video-buttons').find('.stop-button');
  targetBox.on("mouseover", function (){
    stopButton.hide();
  });
  targetBox.on("focus", function (){
    stopButton.hide();
  });
  playButton.show();
})

// 재생완료
video.on('ended', function(){
  var target = $(this).get(0);
  var playButton = $(this).siblings('.video-buttons').find('.play-button');
  target.load();
  playButton.show();
})