[javascript] Video.js를 사용하여 동영상 플레이어에 로딩 화면을 추가하는 방법은 무엇인가요?

24 Nov 2023

javascript

먼저, Video.js를 다운로드하고 웹 페이지에 해당 파일을 포함해야 합니다. 다음은 로딩 화면을 추가하는 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <link href="path/to/video-js.css" rel="stylesheet">
</head>
<body>
  <!-- 동영상 영역 -->
  <video id="my-video" class="video-js"></video>

  <!-- 로딩 화면 영역 -->
  <div id="loading-overlay" class="loading-overlay">
    <div class="spinner"></div>
  </div>

  <script src="path/to/video.js"></script>
  <script>
    var player = videojs('my-video');

    // 로딩 화면 표시 이벤트
    player.on('waiting', function() {
      showLoadingOverlay();
    });

    // 로딩 화면 감추기 이벤트
    player.on('play', function() {
      hideLoadingOverlay();
    });

    function showLoadingOverlay() {
      document.getElementById('loading-overlay').style.display = 'block';
    }

    function hideLoadingOverlay() {
      document.getElementById('loading-overlay').style.display = 'none';
    }
  </script>
</body>
</html>

위의 코드에서는 Video.js를 사용하여 동영상 플레이어를 생성하고, waiting 이벤트를 감지하여 로딩 화면을 표시합니다. play 이벤트가 발생하면 로딩 화면을 감춥니다.

위의 코드에서는 비디오 영역인 video 요소와 로딩 화면을 가리키는 div 요소를 추가로 정의하였습니다. 로딩 화면 스타일을 적용하기 위해 클래스를 추가하고, 해당 클래스에 대한 CSS 스타일을 정의하여 사용할 수 있습니다.

위의 예제 코드를 참고하여 Video.js를 사용하여 동영상 플레이어에 로딩 화면을 추가해보세요.