[javascript] Video.js를 사용하여 동영상을 전체화면으로 보는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js는 HTML5 비디오 플레이어 라이브러리로서, 동영상을 손쉽게 처리하고 제어할 수 있게 해줍니다. 전체화면 모드를 활성화하는 방법에 대해 알아보겠습니다.

Video.js 라이브러리를 HTML 페이지에 추가합니다. <head> 태그 내에서 아래의 코드를 사용하여 Video.js를 호출하세요.

<head>
  <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
</head>

동영상 요소를 생성합니다. <body> 태그 내에 <video> 태그를 추가하고, id 속성으로 동영상 요소를 식별합니다.

<body>
  <video id="my-video" class="video-js" controls>
    <source src="path/to/my-video.mp4" type="video/mp4" />
  </video>
</body>

JavaScript 코드를 작성하여 전체화면 모드를 활성화합니다. <script> 태그 내에 다음과 같이 코드를 추가하세요.
```
<script>
  var player = videojs("my-video");
  player.ready(function () {
    var myPlayer = this;
    myPlayer.on("fullscreenchange", function (e) {
      if (!myPlayer.isFullscreen()) {
        // 화면 전체를 벗어나면 추가 동작을 삽입하세요.
      }
    });
  });
</script>
```
이제 동영상 플레이어는 전체화면 모드로 전환이 가능합니다. 동영상 플레이어에서 전체화면으로 전환할 때마다 fullscreenchange 이벤트가 발생하며, 위 코드에서는 전체화면을 벗어날 때 추가 동작을 삽입할 수 있습니다.

참고 자료:

Video.js 공식 문서: https://docs.videojs.com/
Video.js 전체화면 모드 관련 문서: https://docs.videojs.com/tutorial-fullscreen.html