[javascript] Plyr을 사용한 동영상 플레이어에 광고 삽입하는 방법

27 Nov 2023

javascript

Plyr 설치하기 먼저 Plyr을 사용하기 위해 웹 페이지에 필요한 파일을 다운로드하고 적절한 위치에 포함시켜야 합니다. 다음과 같이 <head> 태그 안에 스타일시트와 스크립트 파일을 추가합니다.
```
<link rel="stylesheet" href="path/to/plyr.css">
<script src="path/to/plyr.js"></script>
```
동영상 플레이어 생성하기 Plyr 플레이어를 생성하려면 HTML에 동영상 요소(<video>)를 추가하고 Plyr 클래스를 할당해야 합니다.
```
<video id="player">
    <source src="path/to/video.mp4" type="video/mp4">
</video>
```
그리고 JavaScript에서 Plyr 인스턴스를 생성하고 동영상 요소를 결합합니다.
```
const player = new Plyr('#player');
```
광고 삽입하기 Plyr 플레이어는 ads 옵션을 지원하며, 이를 통해 광고를 삽입할 수 있습니다. 방법은 다음과 같습니다.
```
const player = new Plyr('#player', {
    ads: {
        enabled: true,
        publisherId: 'your-publisher-id',
        tagUrl: 'path/to/ad-tag.xml'
    }
});
```
위의 코드에서 publisherId는 광고 송출을 위한 발행자 ID를, tagUrl은 광고 태그를 포함한 XML 파일의 경로를 나타냅니다. 이를 적절한 값으로 변경하여 사용하시면 됩니다.

광고 효과 적용하기 (선택 사항) 필요에 따라 광고의 시청 동안 화면에 어두운 효과를 적용할 수도 있습니다. 이를 위해 Plyr의 volume 이벤트를 활용하여 광고 재생 중에만 화면을 가릴 수 있습니다.

player.on('volume', event => {
    if (event.detail.muted) {
        // 광고 재생 중이므로 어두운 효과 적용
        // Ex: document.body.classList.add('darken-effect');
    } else {
        // 광고 재생이 끝났으므로 어두운 효과 제거
        // Ex: document.body.classList.remove('darken-effect');
    }
});

위의 단계를 따라하면 Plyr 동영상 플레이어에 광고를 쉽게 삽입할 수 있습니다. Plyr은 강력하고 유연한 플레이어 라이브러리이므로, 광고 외에도 다른 기능을 추가하여 동영상 플레이어를 커스터마이징할 수도 있습니다.

참고: