[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 특정 시간마다 효과음 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, HTML에서 Video.js를 초기화하는 스크립트를 추가해야 합니다. 이 스크립트는 Video.js 라이브러리를 로드하고 비디오 요소를 플레이어로 변환합니다.

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.15.0/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.15.0/video.js"></script>
</head>
<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
    <source src="my-video.mp4" type="video/mp4">
  </video>

  <script>
    var player = videojs('my-video');
  </script>
</body>
</html>

이제 특정 시간마다 효과음을 추가하기 위해 Video.js의 timeupdate 이벤트를 사용합니다. timeupdate 이벤트는 비디오의 재생 시간이 업데이트될 때마다 발생합니다.

<script>
  var player = videojs('my-video');
  
  player.on('timeupdate', function() {
    var currentTime = player.currentTime();
    
    // 특정 시간마다 효과음을 추가하는 조건문을 작성합니다.
    if(currentTime >= 10 && currentTime < 15) {
      // 플레이어에 효과음을 추가하는 로직을 구현합니다.
      // 예를 들어, 효과음을 재생할 오디오 요소를 생성하고 플레이어에 붙입니다.
      var audio = new Audio('effect-sound.mp3');
      audio.play();
    }
  });
</script>

위 코드에서 timeupdate 이벤트 핸들러 내부에 원하는 특정 시간을 지정하는 조건문을 추가합니다. 조건문은 비디오 재생 시간이 10초부터 15초 사이일 때 실행됩니다. 그리고 해당 조건문이 충족되면, 효과음을 재생하는 로직을 구현합니다. 예를 들어, Audio 객체를 사용하여 효과음을 로드하고 재생합니다.

적절한 시간과 효과음을 설정하여 효과음이 플레이어에 추가되는지 확인할 수 있습니다. Video.js를 사용하면 비디오 재생 중에 다양한 사용자 정의 기능을 추가할 수 있으므로, 필요에 맞게 활용할 수 있습니다.

더 자세한 내용은 Video.js 공식 문서를 참고하세요.