zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(html): separate provider and container concerns in createPlayer (#635)

Browse Source
This commit is contained in:
rahim
2026-02-27 16:42:47 -08:00
committed by GitHub
parent 7bae887920
commit ed22730592
33 changed files with 348 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html
+12 -10
View File
@@ -1,12 +1,14 @@
<video-player class="html-buffering-indicator-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-buffering-indicator class="html-buffering-indicator-basic__overlay">
<div class="html-buffering-indicator-basic__spinner"></div>
</media-buffering-indicator>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-buffering-indicator class="html-buffering-indicator-basic__overlay">
<div class="html-buffering-indicator-basic__spinner"></div>
</media-buffering-indicator>
</media-container>
</video-player>
site/src/components/docs/demos/controls/html/css/BasicUsage.html
+18 -16
View File
@@ -1,19 +1,21 @@
<video-player class="html-controls-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-controls class="html-controls-basic__root">
<media-controls-group class="html-controls-basic__bottom" aria-label="Playback controls">
<media-play-button class="html-controls-basic__button html-controls-basic__play">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
</media-play-button>
<media-time class="html-controls-basic__time" type="current"></media-time>
</media-controls-group>
</media-controls>
<media-controls class="html-controls-basic__root">
<media-controls-group class="html-controls-basic__bottom" aria-label="Playback controls">
<media-play-button class="html-controls-basic__button html-controls-basic__play">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
</media-play-button>
<media-time class="html-controls-basic__time" type="current"></media-time>
</media-controls-group>
</media-controls>
</media-container>
</video-player>
site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
+13 -11
View File
@@ -1,13 +1,15 @@
<video-player class="html-fullscreen-button-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-fullscreen-button class="html-fullscreen-button-basic__button">
<span class="show-when-fullscreen">Exit Fullscreen</span>
<span class="show-when-not-fullscreen">Fullscreen</span>
</media-fullscreen-button>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-fullscreen-button class="html-fullscreen-button-basic__button">
<span class="show-when-fullscreen">Exit Fullscreen</span>
<span class="show-when-not-fullscreen">Fullscreen</span>
</media-fullscreen-button>
</media-container>
</video-player>
site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html
+12 -10
View File
@@ -1,12 +1,14 @@
<demo-video-player class="html-create-player-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
></video>
<demo-play-toggle class="html-create-player-basic__button">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
</demo-play-toggle>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
></video>
<demo-play-toggle class="html-create-player-basic__button">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
</demo-play-toggle>
</media-container>
</demo-video-player>
site/src/components/docs/demos/html-create-player/html/css/BasicUsage.ts
+3 -2
View File
@@ -7,12 +7,13 @@ import {
MediaElement,
selectPlayback,
} from '@videojs/html';
import '@videojs/html/media/container';
const { PlayerElement, PlayerController, context } = createPlayer({
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [...features.video],
});
class VideoPlayer extends PlayerElement {
class VideoPlayer extends ProviderMixin(MediaElement) {
static readonly tagName = 'demo-video-player';
}
site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
+13 -11
View File
@@ -1,13 +1,15 @@
<video-player class="html-mute-button-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-mute-button class="html-mute-button-basic__button">
<span class="show-when-muted">Unmute</span>
<span class="show-when-unmuted">Mute</span>
</media-mute-button>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-mute-button class="html-mute-button-basic__button">
<span class="show-when-muted">Unmute</span>
<span class="show-when-unmuted">Mute</span>
</media-mute-button>
</media-container>
</video-player>
site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html
+15 -13
View File
@@ -1,15 +1,17 @@
<video-player class="html-mute-button-volume-levels">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-mute-button class="html-mute-button-volume-levels__button">
<span class="level-off">Off</span>
<span class="level-low">Low</span>
<span class="level-medium">Medium</span>
<span class="level-high">High</span>
</media-mute-button>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-mute-button class="html-mute-button-volume-levels__button">
<span class="level-off">Off</span>
<span class="level-low">Low</span>
<span class="level-medium">Medium</span>
<span class="level-high">High</span>
</media-mute-button>
</media-container>
</video-player>
site/src/components/docs/demos/pip-button/html/css/BasicUsage.html
+13 -11
View File
@@ -1,13 +1,15 @@
<video-player class="html-pip-button-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-pip-button class="html-pip-button-basic__button">
<span class="show-when-pip">Exit PiP</span>
<span class="show-when-not-pip">Enter PiP</span>
</media-pip-button>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-pip-button class="html-pip-button-basic__button">
<span class="show-when-pip">Exit PiP</span>
<span class="show-when-not-pip">Enter PiP</span>
</media-pip-button>
</media-container>
</video-player>
site/src/components/docs/demos/play-button/html/css/BasicUsage.html
+13 -11
View File
@@ -1,13 +1,15 @@
<video-player class="html-play-button-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
></video>
<media-play-button class="html-play-button-basic__button">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
<span class="show-when-ended">Replay</span>
</media-play-button>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
></video>
<media-play-button class="html-play-button-basic__button">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
<span class="show-when-ended">Replay</span>
</media-play-button>
</media-container>
</video-player>
site/src/components/docs/demos/player-controller/html/css/BasicUsage.html
+18 -16
View File
@@ -1,18 +1,20 @@
<demo-ctrl-player class="html-player-controller-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
></video>
<div class="html-player-controller-basic__panel">
<demo-ctrl-actions class="html-player-controller-basic__actions">
<button class="action-play">Play</button>
<button class="action-pause">Pause</button>
<button class="action-volume">50% Volume</button>
</demo-ctrl-actions>
<demo-ctrl-state class="html-player-controller-basic__state">
<span class="state-text">Paused: Yes | Time: 0.0s | Volume: 100%</span>
</demo-ctrl-state>
</div>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
></video>
<div class="html-player-controller-basic__panel">
<demo-ctrl-actions class="html-player-controller-basic__actions">
<button type="button" class="action-play">Play</button>
<button type="button" class="action-pause">Pause</button>
<button type="button" class="action-volume">50% Volume</button>
</demo-ctrl-actions>
<demo-ctrl-state class="html-player-controller-basic__state">
<span class="state-text">Paused: Yes | Time: 0.0s | Volume: 100%</span>
</demo-ctrl-state>
</div>
</media-container>
</demo-ctrl-player>
site/src/components/docs/demos/player-controller/html/css/BasicUsage.ts
+3 -2
View File
@@ -1,10 +1,11 @@
import { applyElementProps, createButton, createPlayer, features, MediaElement } from '@videojs/html';
import '@videojs/html/media/container';
const { PlayerElement, PlayerController, context } = createPlayer({
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [...features.video],
});
class DemoPlayer extends PlayerElement {
class DemoPlayer extends ProviderMixin(MediaElement) {
static readonly tagName = 'demo-ctrl-player';
}
site/src/components/docs/demos/poster/html/css/BasicUsage.html
+16 -14
View File
@@ -1,19 +1,21 @@
<!-- biome-ignore-all lint/a11y/useMediaCaption: TODO -->
<video-player class="html-poster-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
playsinline
></video>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
playsinline
></video>
<media-poster class="html-poster-basic__poster">
<img
src="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg"
alt="Video thumbnail"
/>
</media-poster>
<media-poster class="html-poster-basic__poster">
<img
src="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg"
alt="Video thumbnail"
/>
</media-poster>
<media-play-button class="html-poster-basic__button">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
</media-play-button>
<media-play-button class="html-poster-basic__button">
<span class="show-when-paused">Play</span>
<span class="show-when-playing">Pause</span>
</media-play-button>
</media-container>
</video-player>
site/src/components/docs/demos/seek-button/html/css/BasicUsage.html
+17 -15
View File
@@ -1,17 +1,19 @@
<video-player class="html-seek-button-basic">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<div class="html-seek-button-basic__buttons">
<media-seek-button seconds="-5" class="html-seek-button-basic__button">
<span class="show-when-backward">&#9194; 5s</span>
</media-seek-button>
<media-seek-button seconds="10" class="html-seek-button-basic__button">
<span class="show-when-forward">10s &#9193;</span>
</media-seek-button>
</div>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<div class="html-seek-button-basic__buttons">
<media-seek-button seconds="-5" class="html-seek-button-basic__button">
<span class="show-when-backward">&#9194; 5s</span>
</media-seek-button>
<media-seek-button seconds="10" class="html-seek-button-basic__button">
<span class="show-when-forward">10s &#9193;</span>
</media-seek-button>
</div>
</media-container>
</video-player>
site/src/components/docs/demos/time/html/css/CurrentDuration.html
+14 -12
View File
@@ -1,14 +1,16 @@
<video-player class="html-time-current-duration">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time-group class="html-time-current-duration__group">
<media-time type="current"></media-time>
<media-time-separator></media-time-separator>
<media-time type="duration"></media-time>
</media-time-group>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time-group class="html-time-current-duration__group">
<media-time type="current"></media-time>
<media-time-separator></media-time-separator>
<media-time type="duration"></media-time>
</media-time-group>
</media-container>
</video-player>
site/src/components/docs/demos/time/html/css/CurrentTime.html
+10 -8
View File
@@ -1,10 +1,12 @@
<video-player class="html-time-current-time">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time class="html-time-current-time__value" type="current"></media-time>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time class="html-time-current-time__value" type="current"></media-time>
</media-container>
</video-player>
site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
+14 -12
View File
@@ -1,14 +1,16 @@
<video-player class="html-time-custom-negative-sign">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time
class="html-time-custom-negative-sign__value"
type="remaining"
negative-sign="~"
></media-time>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time
class="html-time-custom-negative-sign__value"
type="remaining"
negative-sign="~"
></media-time>
</media-container>
</video-player>
site/src/components/docs/demos/time/html/css/CustomSeparator.html
+14 -12
View File
@@ -1,14 +1,16 @@
<video-player class="html-time-custom-separator">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time-group class="html-time-custom-separator__group">
<media-time type="current"></media-time>
<media-time-separator> of </media-time-separator>
<media-time type="duration"></media-time>
</media-time-group>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time-group class="html-time-custom-separator__group">
<media-time type="current"></media-time>
<media-time-separator> of </media-time-separator>
<media-time type="duration"></media-time>
</media-time-group>
</media-container>
</video-player>
site/src/components/docs/demos/time/html/css/Remaining.html
+10 -8
View File
@@ -1,10 +1,12 @@
<video-player class="html-time-remaining">
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time class="html-time-remaining__value" type="remaining"></media-time>
<media-container>
<video
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
autoplay
muted
playsinline
loop
></video>
<media-time class="html-time-remaining__value" type="remaining"></media-time>
</media-container>
</video-player>