> cd ..
Zorn - Video Player Test

Zorn - Video Player Test

2025-03-30 ~ 2025-04-01

개요

  • Astro 진영에서 꽤나 잘만든 VideoPlayer 라이브러리인 Zorn을 발견하여 테스트해보기로 결정.

테스트

기본 테스트

Settings 옵션을 추가하지 않으면 아래 에러가 발생함.
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

유튜브

Zorn에서 유튜브 영상을 재생할 때, Invidious를 사용하고 있는데,
이에 대한 처리에서 오류가 발생하여 유튜브 영상을 재생하지 못하고 있음.
관련 사항에 대해 이슈 작성하여 답변 대기 중…

Zorn 이슈 링크

개발자 말로는 개인 invidious instance를 구축해서 사용하라고 함.
invidious는 유튜브에서 막으려고 하는 움직임이 보여 포기.
유튜브는 그냥 iframe으로 갖고 오자.

ZornYoutubeTest.astro
---
import { Zorn } from '@minpluto/zorn';
---


<Zorn
  YouTube
  Audio
  WatchId="uBFTCK1EzM4"
  YouTubeQuality="137"
  Invidious="yewtu.be"
  PlayerName="Junjak111"
  ShowBackAndForward
  ShowPlaybackRate
  BigPlayButton
  Settings={[]}
/>

자막

HTML5 video 하위의 track 태그에서 사용하는 바와 같이 사용함.
그런데 자막 언어가 2개 이상 설정되는 경우, 자막 선택 메뉴를 불러오지 못하는 것 같음…
새로고침 시에는 자막이 잘 나오는데, 페이지 이동 시에는 자막이 나오지 않는 문제가 발생

track 태그 문서

Zorn 이슈 링크

이슈에서 오류 해결법을 제시해줌.
그래서 이제 잘됨.

Buffering...

00:00

--:-- --:--

ZornSubtitleTest.astro
---
import { Zorn } from '@minpluto/zorn';
---


<Zorn
  PlayerName="Junjak222"
  Video="https://www.jun-devlog.win/files/blog/diary/japan-around-trip/assets/IMG_3043.MOV"
  Subtitles
  ShowBackAndForward
  ShowPlaybackRate
  BigPlayButton
  Settings={[
    {
      Type: 'Button',
      Name: 'Subtitles',
      Action: 'document.querySelector(\'#zorn-player-Junjak222 #zorn-menu-subtitles\').style.display = \'flex\'',
    },
  ]}
>
  <slot slot="subtitles">
    <track
      kind="subtitles"
      src="/vtts/testsub.vtt"
      label="Korean"
      srclang="ko"
    />
    <track
      kind="subtitles"
      src="/vtts/testsub.vtt"
      label="Japanese"
      srclang="ja"
    />
  </slot>
</Zorn>

평가

  • 디자인도 좋고 기능도 꽤 많음
  • 하지만 버그가 꽤나 많은 것 같음 (위에서 언급한 문제들)
  • 오류 수정 등의 Contribute 할까 고민 중인데, github가 아니라 개인이 만든 저장소라 기록을 남기기 어려워 좀 꺼려지는 점이 있음
  • 일단 블로그 VideoLoader는 복잡한 기능이 필요하지 않으므로 기존 html video 태그에서 zorn으로 교체함.

참고

Zorn