[javascript] Video.js를 사용하여 동영상 재생 중에 텍스트 마스킹 효과를 적용하는 방법은 무엇인가요?

24 Nov 2023

javascript

Video.js를 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>

<video> 태그에 ID를 추가하고, Video.js로 이를 초기화합니다. 다음 코드를 <body> 안에서 원하는 위치에 추가하세요.

<video id="my-video" class="video-js vjs-big-play-centered" controls>
  <source src="path/to/video.mp4" type="video/mp4" />
</video>

<script>
  videojs("my-video", {}, function () {
    // 초기화 완료 시 실행되는 콜백 함수
    this.on("play", function () {
      // 재생 중에 실행되는 코드
      var textMask = document.createElement("div");
      textMask.id = "text-mask";
      document.getElementById("my-video").parentNode.appendChild(textMask);
    });
  });
</script>

이 코드는 동영상이 재생되기 시작할 때마다 텍스트 마스킹을 위한 <div> 요소를 동적으로 생성합니다.

CSS를 사용하여 생성한 <div> 요소에 텍스트 마스킹 효과를 적용합니다. 다음 코드를 CSS 파일에 추가하거나 <style> 태그 안에 추가하세요.
```
#text-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, black 100%);
  pointer-events: none;
}
```
이 코드는 생성한 <div> 요소에 선형 그라데이션 배경을 적용하여 텍스트를 마스킹합니다. 배경은 상단에서 투명하게 시작하여 하단으로 내려갈수록 불투명해집니다.

위의 코드를 적용하면 동영상 재생 중에 텍스트 마스킹 효과가 적용됩니다. path/to/video.mp4 부분을 실제 동영상 파일의 경로로 변경해야 합니다.

참고자료: