비디오 플레이어

Video.js 제어를 위한 <video-player> 커스텀 엘리먼트입니다.

Files

<link rel="stylesheet" href="/ui/lib/videojs/video-js.min.css" />
<script type="module">
  if (!window.customElements.get("video-player")) {
    // Video.js가 이미 불려지지 않았으면 /ui/lib/videojs/video.min.js 파일을 불러옵니다.
    import("/ui/element/video-player.js");
  }
</script>

기본 사용법

<video-player class="v-video-player" autoplay currenttimedisplay>
  <video
    poster="/path/to/poster.jpg"
    width="720"
    height="1280"
    playsinline
    disablepictureinpicture
    disableremoteplayback
    controls
    controlslist="nodownload noremoteplayback nofullscreen"
  >
    <source src="/path/to/video.mp4" type="video/mp4" />
    <source src="/path/to/video.webm" type="video/webm" />
    <!-- ... -->
  </video>
</video-player>

속성 (Attributes)

속성	설명
`autoplay`	• 비디오가 화면에 50% 이상 노출될 때 자동 재생합니다. • `muted`, `loop`, `controls` 속성 자동 추가됩니다.
`currenttimedisplay`	현재 재생 시간을 표시합니다.

메소드

웹 컴포넌트 인스턴스에서 직접 호출할 수 있는 메소드입니다:

// 요소 참조 가져오기
const videoPlayerElement = document.querySelector("video-player");
const videoJsInstance = videoPlayerElement.videojs; // Video.js 적용 못한 경우 HTMLVideoElement API

// 메소드 호출
videoPlayerElement.play(); // 재생
videoPlayerElement.pause(); // 일시정지

메소드	설명
`play()`	비디오 재생 시작
`pause()`	비디오 일시정지
`destroy()`	리소스 정리 (메모리 해제)

참고 링크

Astro

Astro 컴포넌트 사용법

프로젝트에 포함된 VideoPlayer.astro 컴포넌트를 사용하면 더 간편하게 비디오 플레이어를 구현할 수 있습니다.

컴포넌트 가져오기

import VideoPlayer from "@shared/ui/video-player/VideoPlayer.astro";

<VideoPlayer
  src="/videos/sample.mp4"
  poster="/images/sample-poster.jpg"
  width={720}
  height={1280}
  autoplay={true}
  currentTimeDisplay={true}
/>