[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 화면 전환 효과 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

먼저, Video.js를 프로젝트에 추가해야 합니다. npm을 사용한다면, 다음 명령어를 사용하여 Video.js를 설치할 수 있습니다.

npm install video.js

HTML 파일에 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>

동영상을 재생할 HTML 요소를 추가합니다.

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

자바스크립트에서 Video.js 플레이어 인스턴스를 만들고 화면 전환 효과를 추가해보겠습니다.

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

// 화면 전환 효과를 추가합니다.
player.ready(function() {
    var transitionDuration = 500; // 전환 효과의 지속 시간을 설정합니다.
    var transitionEffect = 'fade'; // 사용할 전환 효과를 설정합니다.

    player.addClass('vjs-transitions'); // 전환 효과를 가능하게 함을 나타내는 클래스를 추가합니다.
    player.addClass('vjs-' + transitionEffect); // 설정한 전환 효과 클래스를 추가합니다.

    player.on('play', function() {
        player.addClass('vjs-transitioning'); // 전환 효과가 적용 중임을 나타내는 클래스를 추가합니다.

        setTimeout(function() {
            player.removeClass('vjs-transitioning'); // 전환 효과 완료 후 클래스를 제거합니다.
        }, transitionDuration);
    });
});

위 코드에서 transitionDuration 변수에 전환 효과의 지속 시간(ms)을 설정하고, transitionEffect 변수에 사용할 전환 효과를 설정할 수 있습니다. fade, slide, zoom 중에서 선택할 수 있습니다.

이제 동영상을 재생하면 플레이어에 화면 전환 효과가 적용될 것입니다.

더 자세한 내용은 Video.js 공식 문서를 참고하시기 바랍니다.