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

24 Nov 2023

javascript

캐러셀 광고를 Video.js 플레이어에 추가하는 방법은 비교적 간단합니다. 다음은 캐러셀 광고를 플레이어에 표시하는 단계별로 설명한 예제 코드입니다.

Video.js 다운로드 및 설정 Video.js를 다운로드하고 HTML 파일에 포함시킵니다. 이는 Video.js 플레이어를 생성하는 데 필요한 기본 라이브러리입니다.

<head>
  <link href="path/to/video-js.min.css" rel="stylesheet">
  <script src="path/to/video.js"></script>
</head>

동영상 플레이어 생성 video 태그에 id를 부여하고 해당 ID를 사용하여 Video.js 플레이어를 생성합니다.

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
  <source src="path/to/video.mp4" type="video/mp4">
  <p class="vjs-no-js">동영상을 재생할 수 없습니다.</p>
</video>

캐러셀 광고 추가 Video.js 플레이어의 ended 이벤트를 사용하여 동영상 재생이 종료되면 캐러셀 광고를 플레이어에 표시합니다.

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

player.on('ended', function() {
  // 캐러셀 광고를 플레이어에 추가하는 로직을 작성하세요
});

위의 코드에서 캐러셀 광고를 플레이어에 추가하는 로직에는 캐러셀 컨테이너를 동적으로 생성하고, 광고 이미지를 추가하는 등의 작업이 포함됩니다. 이는 캐러셀 광고를 플레이어에 맞게 디자인하고 개발해야 하는 부분입니다.

캐러셀 광고 제거 동영상 재생이 다시 시작될 때 캐러셀 광고를 플레이어에서 제거할 수 있도록 해야 합니다. 이를 위해서는 Video.js 플레이어의 play 이벤트를 사용할 수 있습니다.

player.on('play', function() {
  // 캐러셀 광고를 플레이어에서 제거하는 로직을 작성하세요
});

위의 코드에서 캐러셀 광고를 플레이어에서 제거하는 로직에는 캐러셀 컨테이너를 제거하는 등의 작업이 포함됩니다. 이는 캐러셀 광고가 동영상 재생에 영향을 주지 않도록 정리하는 부분입니다.

캐러셀 광고를 Video.js 플레이어에 추가하는 방법에 대한 예제 코드를 설명했습니다. 이를 참고하여 동영상 재생 중에 캐러셀 광고를 플레이어에 추가할 수 있습니다.