[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 자동으로 인포메이션 광고 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js는 HTML5 비디오 플레이어를 구축하기 위한 JavaScript 라이브러리입니다. Video.js를 사용하여 동영상 재생 중에 자동으로 인포메이션 광고를 추가하는 방법은 다음과 같습니다.

Video.js 라이브러리를 웹 페이지에 추가합니다. 일반적으로는 HTML 파일의 <head> 태그 내에 아래 코드를 추가하여 Video.js를 로드합니다.

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

비디오 엘리먼트를 생성하고 Video.js로 초기화합니다. 이를 위해 HTML 파일에 아래와 유사한 코드를 추가합니다.

<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>

<script>
    var player = videojs('my-video');
</script>

인포메이션 광고를 추가할 시간을 결정합니다. 비디오의 특정 시간에 인포메이션 광고를 추가하려면 timeupdate 이벤트를 사용합니다. 아래 코드와 같이 timeupdate 이벤트 리스너를 추가하고 원하는 시간에 광고가 플레이되도록 구현합니다.

player.on('timeupdate', function() {
    var currentTime = player.currentTime();

    // 플레이어 재생 시간이 특정 시간에 도달하면 인포메이션 광고를 플레이
    if (currentTime >= 10 && currentTime <= 15) {
        player.pause(); // 비디오 재생을 일시 중지합니다.

        // 인포메이션 광고를 비디오 플레이어에 추가합니다.
        var adSource = '<div class="ad-container"><img src="ad-image.png" alt="Information Ad"></div>';
        player.overlay({
            content: adSource,
            align: 'top-right',
            overlays: [{
                start: 'pause', // 인포메이션 광고는 비디오 일시 중지 후 보여집니다.
                end: 'play', // 인포메이션 광고가 끝나고 비디오 재생이 다시 시작됩니다.
            }]
        });
    }
});

위 코드에서는 플레이어의 현재 재생 시간을 확인하고, 재생 시간이 10초부터 15초 사이에 있을 때 인포메이션 광고를 플레이합니다. 광고를 플레이할 때는 player.pause()를 사용하여 비디오 재생을 일시 중지시키고, player.overlay()를 사용하여 비디오 플레이어 위에 인포메이션 광고를 추가합니다.

이렇게하면 Video.js를 사용하여 동영상 재생 중에 플레이어에 자동으로 인포메이션 광고를 추가할 수 있습니다. 동영상 재생시간에 따라 광고를 사용자 정의하려면 timeupdate 이벤트를 적절히 활용하면 됩니다.