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

feat(ui): skin design improvements, add html frosted skin (WIP) (#133)

Browse Source
This commit is contained in:
Sam Potts
2025-10-25 14:35:48 +11:00
committed by GitHub
parent 52b91d3bd8
commit 75a90e7104
14 changed files with 547 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/html-demo/index.html
+9
View File
@@ -3,6 +3,15 @@
<head>
<meta charset="UTF-8" />
<title>VJS HTML Demo</title>
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<style>
body {
font-family:
InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
}
</style>
</head>
<body>
<div id="app"></div>
examples/html-demo/src/main.ts
+4 -5
View File
@@ -1,16 +1,15 @@
import { defineVjsPlayer } from '@videojs/html';
import '@videojs/html/skins/default';
import '@videojs/html/skins/frosted';
defineVjsPlayer();
document.body.innerHTML = /* html */ `
<media-provider>
<div style="width: 100%; max-width: 800px; margin: 0 auto;">
<media-skin-default>
<div style="display: grid; place-items: center; min-height: 100vh;">
<media-skin-frosted style="border-radius: 2rem; width: 100%; max-width: 800px; margin: 2rem auto;">
<video slot="media" src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4" muted></video>
</media-skin-default>
</media-skin-frosted>
</div>
</media-skin-default>
</media-provider>
`;