zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-14 18:04:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: connect html eject skins to media-provider

Browse Source
This commit is contained in:
Darius Cepulis
2025-10-30 00:56:07 -05:00
parent 476fabf7aa
commit f17570156e
6 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/html-eject-frosted/index.html
+1
View File
@@ -42,6 +42,7 @@
"
>
<video
slot="media"
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
playsinline
poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
examples/html-eject-frosted/src/main.ts
+2 -1
View File
@@ -1,7 +1,8 @@
import './frosted.css';
import '@videojs/html/icons';
import '@videojs/html/define/media-container';
// be sure to import media-provider first
import '@videojs/html/define/media-provider';
import '@videojs/html/define/media-container';
import '@videojs/html/define/media-play-button';
import '@videojs/html/define/media-mute-button';
import '@videojs/html/define/media-volume-slider';
examples/html-eject-minimal/index.html
+1
View File
@@ -42,6 +42,7 @@
"
>
<video
slot="media"
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
playsinline
poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
examples/html-eject-minimal/src/main.ts
+2 -1
View File
@@ -1,7 +1,8 @@
import './minimal.css';
import '@videojs/html/icons';
import '@videojs/html/define/media-container';
// be sure to import media-provider first
import '@videojs/html/define/media-provider';
import '@videojs/html/define/media-container';
import '@videojs/html/define/media-play-button';
import '@videojs/html/define/media-mute-button';
import '@videojs/html/define/media-volume-slider';
site/src/content/docs/how-to/customize-skins.mdx
-4
View File
@@ -19,10 +19,6 @@ Video.js v10 comes with pre-built skins like Frosted and Minimal, but you can fu
While eventually we'll have a CLI that'll eject skins in your preferred framework and style, for now we invite you to try it out with these copy-paste-ready implementations.
<FrameworkCase frameworks={["html"]}>
> ⚠️ **Notice:** The HTML examples below aren't quite working, yet. Stay tuned for updates.
</FrameworkCase>
## Frosted Skin
<FrameworkCase frameworks={["react"]} withHydrationWorkaround>
site/src/utils/ejectCodeGenerator.ts
+4 -1
View File
@@ -974,6 +974,7 @@ export function generateHTMLMarkup(skin: Skin): string {
return `<media-provider>
<media-container>
<video
slot="media"
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
playsinline
poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
@@ -1072,6 +1073,7 @@ export function generateHTMLMarkup(skin: Skin): string {
return `<media-provider>
<media-container>
<video
slot="media"
src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4"
playsinline
poster="https://image.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/thumbnail.webp"
@@ -1904,8 +1906,9 @@ media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip {
export function generateHTMLJS(skin: Skin): string {
return `import './${skin}.css';
import '@videojs/html/icons';
import '@videojs/html/define/media-container';
// be sure to import media-provider first
import '@videojs/html/define/media-provider';
import '@videojs/html/define/media-container';
import '@videojs/html/define/media-play-button';
import '@videojs/html/define/media-mute-button';
import '@videojs/html/define/media-volume-slider';