[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 스키니 광고 추가하는 방법은 어떻게 되나요?

첫째로, Video.js 라이브러리를 웹 페이지에 추가해야 합니다. 다음은 CDN을 통해 Video.js를 추가하는 예시 코드입니다.

<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>

둘째로, 동영상을 재생하기 위한 HTML 요소를 생성합니다. <video> 태그를 사용하여 동영상 플레이어를 만들어주어야 합니다. 다음은 예시 코드입니다.

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

셋째로, 스키니 광고를 재생 중에 추가하기 위해 Video.js의 ad-plugin을 사용합니다. 이 플러그인을 사용하려면 추가적인 스크립트 파일을 가져와야 합니다.

<script src="https://path/to/videojs-contrib-ads.min.js"></script>

넷째로, 관련된 스키니 광고 정보를 설정합니다. 스크립트에서 videojs 객체를 사용하여 스키니 광고 요소를 만들고 플레이어에 연결합니다. 다음은 예시 코드입니다.

var player = videojs('my-video');

player.on('ready', function () {
   var options = {
      adTagUrl: 'https://path/to/skinni-ad.xml'
   };

   player.ads(options);
   player.trigger('adsready');
});

이제 동영상 플레이어에 스키니 광고를 추가하였습니다. 설정한 adTagUrl에는 광고 파일의 경로(URL)을 입력해야 합니다. 이 코드를 사용하면 동영상이 재생되면서 광고가 스키니 스타일로 플레이어에 추가됩니다.

이 방법을 사용하여 Video.js를 활용하여 동영상 재생 중에 플레이어에 스키니 광고를 추가할 수 있습니다.