[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 자동 재생 토글 버튼 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

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>

<video>요소를 HTML에 추가합니다. id 속성을 사용하여 Video.js 플레이어를 초기화하는 데 사용될 요소를 식별합니다. 다음과 같은 코드를 원하는 위치에 추가합니다.

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
  <source src="my-video.mp4" type="video/mp4" />
</video>

자바스크립트 코드로 Video.js 플레이어를 초기화합니다. 다음 코드를 <body> 태그 안에서 스크립트로 실행하는 방식으로 추가합니다.

var player = videojs('my-video', {
  autoplay: false, // 자동 재생 비활성화
});

// 자동 재생 토글 버튼 추가
var autplayButton = document.createElement('button');
autoplayButton.innerHTML = '자동 재생';
autoplayButton.onclick = function() {
  player.autoplay(!player.autoplay());
};
player.controlBar.addChild(autplayButton);

위의 코드는 Video.js 플레이어를 생성하고 자동 재생을 비활성화한 다음, 플레이어 위에 “자동 재생”이라는 텍스트를 가진 버튼을 추가하는 기능을 제공합니다. 버튼을 클릭하면 자동 재생이 토글됩니다.

이렇게 하면 Video.js를 사용하여 동영상 재생 중에 플레이어에 자동 재생 토글 버튼을 추가할 수 있습니다. Video.js 라이브러리에 대한 자세한 내용은 공식 문서를 참조하세요.