Zorn - Video Player Test

2025-03-30 ~ 2025-04-01

概要

Astro界隈でよくできたVideoPlayerライブラリのZornを見つけたので、試すことにした。

テスト

基本テスト

Settingsオプションを追加しないと、以下のエラーが発生する。
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

YouTube

ZornはYouTube動画の再生にInvidiousを使っているが、
その処理でエラーが発生し、YouTube動画を再生できていない。
この件についてissueを作成し、返答を待っている…

Zornのissueリンク

開発者によると、自分でInvidiousのインスタンスを構築して使ってほしいとのこと。
YouTubeがInvidiousをブロックしようとしている様子なので断念。
YouTubeはそのままiframeで埋め込もう。

1
---
2
import { Zorn } from '@minpluto/zorn';
3
---
4

5
<Zorn
6
  YouTube
7
  Audio
8
  WatchId="uBFTCK1EzM4"
9
  YouTubeQuality="137"
10
  Invidious="yewtu.be"
11
  PlayerName="Junjak111"
12
  ShowBackAndForward
13
  ShowPlaybackRate
14
  BigPlayButton
15
  Settings={[]}
16
/>

字幕

HTML5のvideo要素内のtrackタグと同じように使う。
ただ、字幕言語を2つ以上設定すると、字幕の選択メニューを読み込めないようだ…
再読み込みでは字幕が正常に出るが、ページ移動時には出ない問題も発生。

trackタグのドキュメント

Zornのissueリンク

issueで解決方法を教えてもらった。
今は正常に動いている。

Buffering...

--:-- --:--

1
---
2
import { Zorn } from '@minpluto/zorn';
3
---
4

5
<Zorn
6
  PlayerName="Junjak222"
7
  Video="https://www.jun-devlog.win/files/blog/diary/japan-around-trip/assets/IMG_3043.MOV"
8
  Subtitles
9
  ShowBackAndForward
10
  ShowPlaybackRate
11
  BigPlayButton
12
  Settings={[
13
    {
14
      Type: 'Button',
15
      Name: 'Subtitles',
16
      Action: 'document.querySelector(\'#zorn-player-Junjak222 #zorn-menu-subtitles\').style.display = \'flex\'',
17
    },
18
  ]}
19
>
20
  <slot slot="subtitles">
21
    <track
22
      kind="subtitles"
23
      src="/vtts/testsub.vtt"
24
      label="Korean"
25
      srclang="ko"
26
    />
27
    <track
28
      kind="subtitles"
29
      src="/vtts/testsub.vtt"
30
      label="Japanese"
31
      srclang="ja"
32
    />
33
  </slot>
34
</Zorn>

評価

デザインがよく、機能も豊富
ただしバグもかなり多そう（上で触れた問題など）
バグ修正などの貢献を考えているが、GitHubではなく個人で運営するリポジトリなので活動記録を残しにくく、少しためらっている。
ひとまずブログのVideoLoaderには複雑な機能が不要なので、従来のHTML videoタグからzornへ置き換えた。

参考

Zorn