Overview

• I found Zorn, a fairly polished VideoPlayer library in the Astro ecosystem, and decided to try it.

Tests

Basic test

The error below occurs if the Settings option is not added.
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

YouTube

Zorn uses Invidious to play YouTube videos,
but an error in that handling currently prevents YouTube playback.
I filed an issue about this and am waiting for a response…

Zorn issue link

The developer said to host and use my own Invidious instance.
I gave up because YouTube appears to be taking steps to block Invidious.
I will just embed YouTube with an 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
/>

Subtitles

It is used in the same way as the track tag inside an HTML5 video element.
However, setting two or more subtitle languages seems to prevent the subtitle selection menu from loading…
Subtitles display correctly after a refresh but fail to appear after navigating to the page.

track tag documentation

Zorn issue link

A solution was provided in the issue.
It now works correctly.

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>

Assessment

• Good design and quite a few features
• But there seem to be quite a few bugs (including those mentioned above)
• I am considering contributing bug fixes, but the repository is privately hosted rather than on GitHub, which makes leaving a contribution record difficult and leaves me hesitant.
• For now, the blog’s VideoLoader does not need complex features, so I replaced the existing HTML video tag with zorn.

References

Zorn