[javascript] Video.js를 사용하여 동영상 재생 중에 플레이어에 슬라이드 쇼를 위한 인터벌 타이머 추가하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js 라이브러리를 프로젝트에 추가하고, HTML에서 동영상 플레이어를 생성합니다.

<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264">
        <source src="my-video.mp4" type="video/mp4">
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>

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

인터벌 타이머를 사용하여 슬라이드 쇼를 구현할 수 있습니다. 아래의 코드는 5초마다 임의의 이미지를 표시하는 간단한 슬라이드 쇼 예제입니다.

var intervalTimer;

function playSlideShow() {
    var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
    var currentImage = 0;

    intervalTimer = setInterval(function () {
        player.poster(images[currentImage]);

        currentImage++;
        if (currentImage >= images.length) {
            currentImage = 0;
        }
    }, 5000);
}

function stopSlideShow() {
    clearInterval(intervalTimer);
}

슬라이드 쇼를 시작하고 멈추기 위해 playSlideShow 및 stopSlideShow 함수를 호출할 수 있습니다. 예를 들어, 버튼을 클릭하여 슬라이드 쇼를 시작하거나 멈출 수 있습니다.

var startButton = document.getElementById('start-button');
var stopButton = document.getElementById('stop-button');

startButton.addEventListener('click', function () {
    playSlideShow();
});

stopButton.addEventListener('click', function () {
    stopSlideShow();
});

Video.js를 사용하면 플레이어에 간단하게 슬라이드 쇼를 추가할 수 있습니다. 이제 동영상 재생 중에 이미지가 플레이어에 나타날 것입니다.