[javascript] Video.js를 사용하여 동영상의 음소거 기능을 구현하는 방법은 어떻게 되나요?

24 Nov 2023

javascript

Video.js는 HTML5 동영상 재생을 위한 오픈 소스 JavaScript 라이브러리입니다. 동영상 플레이어를 쉽게 커스터마이징하고 다양한 기능을 추가할 수 있습니다. 음소거 기능을 구현하는 방법에 대해 알아보겠습니다.

먼저, Video.js를 웹 페이지에 추가하고 동영상 플레이어를 설정해야합니다. 다음은 간단한 Video.js 설정 코드의 예입니다.

<!DOCTYPE html>
<html>
<head>
    <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
</head>
<body>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
        <source src="my-video.mp4" type="video/mp4">
    </video>

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

이제 음소거 기능을 추가해보겠습니다. Video.js는 muted 속성을 사용하여 음소거를 설정합니다. 아래의 코드를 사용하여 동영상을 음소거 상태로 변경할 수 있습니다.

// 음소거 설정
player.muted(true);

위 코드는 동영상 플레이어를 음소거 상태로 변경합니다. true 값을 사용하여 음소거를 적용할 수 있습니다. 이제 동영상이 음소거 상태로 재생됩니다.

또한, 동영상을 다시 음소거 해제하려면 아래의 코드를 사용할 수 있습니다.

// 음소거 해제
player.muted(false);

위 코드는 동영상 플레이어의 음소거 상태를 해제합니다. false 값을 사용하여 음소거를 해제할 수 있습니다.

이제 Video.js를 사용하여 동영상의 음소거 기능을 구현하는 방법을 알게 되었습니다. 음소거 상태를 원하는 시점에 설정하고 해제하여 소리를 관리할 수 있습니다.

더 많은 Video.js 기능 및 옵션에 대해서는 Video.js 공식 문서를 참조하세요.