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

docs(site): add thumbnail reference page (#654)

Browse Source
This commit is contained in:
rahim
2026-02-28 00:40:44 -08:00
committed by GitHub
parent ed43d52f8f
commit e63d591d6e
20 changed files with 532 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/docs/demos/thumbnail/html/css/BasicUsage.astro
+10
View File
@@ -0,0 +1,10 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './BasicUsage.html?raw';
import './BasicUsage.css';
---
<HtmlDemo html={html} />
<script>
import './BasicUsage.ts';
</script>
site/src/components/docs/demos/thumbnail/html/css/BasicUsage.css
+24
View File
@@ -0,0 +1,24 @@
.html-thumbnail-text-track {
position: relative;
display: block;
max-width: 280px;
}
.html-thumbnail-text-track__media {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.html-thumbnail-text-track__thumbnail {
display: block;
width: auto;
min-width: 0;
max-width: 240px;
}
.html-thumbnail-text-track__thumbnail[data-hidden] {
display: none;
}
site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html
+22
View File
@@ -0,0 +1,22 @@
<section class="html-thumbnail-text-track">
<video-player>
<media-container>
<video
class="html-thumbnail-text-track__media"
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
preload="auto"
muted
playsinline
crossorigin="anonymous"
>
<track
kind="metadata"
label="thumbnails"
src="/docs/demos/thumbnail/basic.vtt"
default
/>
</video>
<media-thumbnail class="html-thumbnail-text-track__thumbnail" time="12"></media-thumbnail>
</media-container>
</video-player>
</section>
site/src/components/docs/demos/thumbnail/html/css/BasicUsage.ts
+2
View File
@@ -0,0 +1,2 @@
import '@videojs/html/video/player';
import '@videojs/html/ui/thumbnail';
site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.astro
+9
View File
@@ -0,0 +1,9 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './JsonSpriteUsage.html?raw';
---
<HtmlDemo html={html} />
<script>
import './JsonSpriteUsage.ts';
</script>
site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.html
+1
View File
@@ -0,0 +1 @@
<media-thumbnail time="12" style="max-width: 240px;"></media-thumbnail>
site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.ts
+41
View File
@@ -0,0 +1,41 @@
import '@videojs/html/ui/thumbnail';
type DemoThumbnailImage = {
url: string;
startTime: number;
endTime?: number;
width?: number;
height?: number;
coords?: { x: number; y: number };
};
type ThumbnailDemoElement = HTMLElement & { thumbnails?: DemoThumbnailImage[] };
const thumbnail = document.querySelector<ThumbnailDemoElement>('media-thumbnail');
if (thumbnail) {
thumbnail.thumbnails = [
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
startTime: 0,
endTime: 10,
width: 284,
height: 160,
coords: { x: 0, y: 0 },
},
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
startTime: 10,
endTime: 20,
width: 284,
height: 160,
coords: { x: 284, y: 0 },
},
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
startTime: 20,
width: 284,
height: 160,
coords: { x: 568, y: 0 },
},
];
}
site/src/components/docs/demos/thumbnail/html/css/JsonUsage.astro
+9
View File
@@ -0,0 +1,9 @@
---
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
import html from './JsonUsage.html?raw';
---
<HtmlDemo html={html} />
<script>
import './JsonUsage.ts';
</script>
site/src/components/docs/demos/thumbnail/html/css/JsonUsage.html
+1
View File
@@ -0,0 +1 @@
<media-thumbnail time="12" style="max-width: 240px;"></media-thumbnail>
site/src/components/docs/demos/thumbnail/html/css/JsonUsage.ts
+29
View File
@@ -0,0 +1,29 @@
import '@videojs/html/ui/thumbnail';
type DemoThumbnailImage = {
url: string;
startTime: number;
endTime?: number;
};
type ThumbnailDemoElement = HTMLElement & { thumbnails?: DemoThumbnailImage[] };
const thumbnail = document.querySelector<ThumbnailDemoElement>('media-thumbnail');
if (thumbnail) {
thumbnail.thumbnails = [
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=0',
startTime: 0,
endTime: 10,
},
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=10',
startTime: 10,
endTime: 20,
},
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=20',
startTime: 20,
},
];
}
site/src/components/docs/demos/thumbnail/react/css/BasicUsage.css
+23
View File
@@ -0,0 +1,23 @@
.react-thumbnail-text-track {
position: relative;
max-width: 280px;
}
.react-thumbnail-text-track__media {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.react-thumbnail-text-track__thumbnail {
display: block;
width: auto;
min-width: 0;
max-width: 240px;
}
.react-thumbnail-text-track__thumbnail[data-hidden] {
display: none;
}
site/src/components/docs/demos/thumbnail/react/css/BasicUsage.tsx
+26
View File
@@ -0,0 +1,26 @@
import { createPlayer, Thumbnail } from '@videojs/react';
import { Video, videoFeatures } from '@videojs/react/video';
import './BasicUsage.css';
const Player = createPlayer({ features: videoFeatures });
export default function TextTrackUsage() {
return (
<Player.Provider>
<Player.Container className="react-thumbnail-text-track">
<Video
className="react-thumbnail-text-track__media"
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
preload="auto"
muted
playsInline
crossOrigin="anonymous"
>
<track kind="metadata" label="thumbnails" src="/docs/demos/thumbnail/basic.vtt" default />
</Video>
<Thumbnail className="react-thumbnail-text-track__thumbnail" time={12} />
</Player.Container>
</Player.Provider>
);
}
site/src/components/docs/demos/thumbnail/react/css/JsonSpriteUsage.tsx
+31
View File
@@ -0,0 +1,31 @@
import { Thumbnail } from '@videojs/react';
const THUMBNAILS = [
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
startTime: 0,
endTime: 10,
width: 284,
height: 160,
coords: { x: 0, y: 0 },
},
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
startTime: 10,
endTime: 20,
width: 284,
height: 160,
coords: { x: 284, y: 0 },
},
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
startTime: 20,
width: 284,
height: 160,
coords: { x: 568, y: 0 },
},
];
export default function JsonSpriteUsage() {
return <Thumbnail thumbnails={THUMBNAILS} time={12} style={{ maxWidth: 240 }} />;
}
site/src/components/docs/demos/thumbnail/react/css/JsonUsage.tsx
+22
View File
@@ -0,0 +1,22 @@
import { Thumbnail } from '@videojs/react';
const THUMBNAILS = [
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=0',
startTime: 0,
endTime: 10,
},
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=10',
startTime: 10,
endTime: 20,
},
{
url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=20',
startTime: 20,
},
];
export default function JsonUsage() {
return <Thumbnail thumbnails={THUMBNAILS} time={12} style={{ maxWidth: 240 }} />;
}