@videojs/html 10.0.0-rc.5 → 10.0.1

package/docs/reference/components/player.md

@@ -53,7 +53,7 @@ Everything that needs player state goes inside `<video-player>`: skins, containe
 ```html
 <video-player>
   <video-skin>               <!-- skin — includes container + controls -->
-    <video src="..."></video> <!-- media element -->
+    <video src="..."></video> <!-- media component -->
   </video-skin>
   <my-custom-overlay></my-custom-overlay> <!-- your own element — can use PlayerController -->
 </video-player>
@@ -63,7 +63,7 @@ Everything that needs player state goes inside `<video-player>`: skins, containe
 
 Packaged skins make `<video-player>` boxless with `display: contents`. Width, height, positioning, transforms, and `getBoundingClientRect()` do not describe a visible player box there. Put layout and measurements on the [`<media-container>`](./player-container.md) instead.
 
-If you omit `<video-skin>` and import only the player and media elements, those skin styles are not loaded. The player element still owns state, not layout, so add and style a `<media-container>` instead of using the player itself as the layout surface.
+If you omit `<video-skin>` and import only the player and media components, those skin styles are not loaded. The player element still owns state, not layout, so add and style a `<media-container>` instead of using the player itself as the layout surface.
 
 ## Accessing state
 
@@ -122,7 +122,7 @@ The player’s scope can extend beyond the fullscreen target. Playlists, transcr
 Video.js elements clean up after themselves when you remove them from the page:
 
 - `<video-player>` and the UI elements destroy themselves two animation frames after they’re removed. Destroying the player also destroys its store.
-- Media elements such as `<hlsjs-video>` tear down their playback engine in a microtask after they’re removed.
+- Media components such as `<hlsjs-video>` tear down their playback engine in a microtask after they’re removed.
 
 Moving an element synchronously, removing it and inserting it elsewhere with no `await` in between, triggers neither. To keep an element through a longer move, add the `keep-alive` attribute:
 
@@ -134,4 +134,4 @@ Moving an element synchronously, removing it and inserting it elsewhere with no
 </video-player>
 ```
 
-`keep-alive` applies only to the element that carries it; descendants don’t inherit it. Set it on every Video.js element in the tree you move. Packaged skins don’t pass it to the controls inside them, so move a player that uses a packaged skin synchronously. An element with `keep-alive` is never destroyed automatically. When you’re finished with it, call `destroy()` on the player and UI elements, and `adapter.destroy()` on media elements, which release their engine that way. A destroyed element can’t be reconnected; create a new one instead.
+`keep-alive` applies only to the element that carries it; descendants don’t inherit it. Set it on every Video.js element in the tree you move. Packaged skins don’t pass it to the controls inside them, so move a player that uses a packaged skin synchronously. An element with `keep-alive` is never destroyed automatically. When you’re finished with it, call `destroy()` on the player and UI elements, and `adapter.destroy()` on media components, which release their engine that way. A destroyed element can’t be reconnected; create a new one instead.

package/docs/reference/components/shaka-video.md

@@ -21,7 +21,7 @@ import '@videojs/html/media/shaka-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/shaka-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/shaka-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/spotify-audio.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/spotify-audio';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/spotify-audio.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/spotify-audio.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/thumbnail.md

@@ -4,13 +4,13 @@ Time-based thumbnail preview component for timeline scrubbing and hover previews
 
 ## Quick Start: Video Track
 
-`<media-thumbnail>` can read thumbnail cues directly from your video track. Add a `<track>` with `kind="metadata"` and `label="thumbnails"` to your media element.
+`<media-thumbnail>` can read thumbnail cues directly from your video track. Add a `<track>` with `kind="metadata"` and `label="thumbnails"` to your media component.
 
 [Mux](https://www.mux.com/?utm_source=videojs&utm_campaign=vjs10&utm_content=docs-content) provides this as `storyboard.vtt`:
 
 `https://image.mux.com/{PLAYBACK_ID}/storyboard.vtt`
 
-That track is cross-origin, and a cross-origin `<track>` only loads when the media element is CORS-enabled:
+That track is cross-origin, and a cross-origin `<track>` only loads when the media component is CORS-enabled:
 
 ```html
 <video src="video.mp4" crossorigin="anonymous">
@@ -58,7 +58,7 @@ The component picks the latest thumbnail whose `startTime` is less than or equal
 
 ### Cross-origin images
 
-Leave `crossOrigin` unset and the component follows the media element. A cross-origin thumbnail `<track>` only loads when the media is CORS-enabled, so the images its cues point at are fetched with that same mode. Skins get this for free, with nothing to thread through.
+Leave `crossOrigin` unset and the thumbnail follows the media component. A cross-origin thumbnail `<track>` only loads when the media is CORS-enabled, so the images its cues point at are fetched with that same mode. Skins get this for free, with nothing to thread through.
 
 Opt out to fetch them without CORS:
 
@@ -67,11 +67,11 @@ const thumbnail = document.querySelector('media-thumbnail');
 thumbnail.crossOrigin = null;
 ```
 
-Leaving the `crossorigin` attribute off is not the opt out. An absent attribute means “follow the media element”; only the property set to `null` opts out.
+Leaving the `crossorigin` attribute off is not the opt out. An absent attribute means “follow the media component”; only the property set to `null` opts out.
 
 An empty value does not opt out either. The [CORS settings attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/crossorigin) reads anything other than `use-credentials` as Anonymous, so it is a value like any other.
 
-Thumbnails you supply through `thumbnails` never inherit, since they need not be related to the media element at all. Set `crossOrigin` yourself when those images need it.
+Thumbnails you supply through `thumbnails` never inherit, since they need not be related to the media component at all. Set `crossOrigin` yourself when those images need it.
 
 ## Styling
 

package/docs/reference/components/tiktok-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/tiktok-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/tiktok-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/tiktok-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/twitch-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/twitch-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/twitch-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/twitch-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/video-compat-skin.md

@@ -10,14 +10,14 @@ The Compat skin of the video preset provides basic controls and plain surfaces,
 import '@videojs/html/video/compat-skin';
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It renders its controls around the media.
+The skin goes between the player and the media component. It renders its controls around the media.
 
 ```html
 <video-player>
   <video-compat-skin>
-    <video src="video.mp4"></video>
+    <video></video>
   </video-compat-skin>
 </video-player>
 ```
@@ -38,6 +38,39 @@ See [Show timeline thumbnail previews](../../guides/thumbnails.md) for complete
 
 Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties. For deeper changes, the Video.js registry provides the skin files.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<video-player poster="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg">
+  <video-compat-skin class="html-video-compat-skin-basic">
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline crossorigin="anonymous">
+      <track kind="metadata" label="thumbnails" src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.vtt" default />
+    </video>
+  </video-compat-skin>
+</video-player>
+```
+
+**index.css**
+
+```css
+.html-video-compat-skin-basic {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/video/player';
+import '@videojs/html/video/compat-skin';
+```
+
 ## Own the UI
 
 Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.

package/docs/reference/components/video-neutral-skin.md

@@ -13,17 +13,17 @@ import '@videojs/html/video/neutral-skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video-neutral.js"></script>
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It renders its controls around the media.
+The skin goes between the player and the media component. It renders its controls around the media.
 
 ```html
 <video-player>
   <video-neutral-skin>
-    <video src="video.mp4"></video>
+    <video></video>
   </video-neutral-skin>
 </video-player>
 ```
@@ -44,6 +44,39 @@ See [Show timeline thumbnail previews](../../guides/thumbnails.md) for complete
 
 Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties. For deeper changes, the Video.js registry provides the skin files.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<video-player poster="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg">
+  <video-neutral-skin class="html-video-neutral-skin-basic">
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline crossorigin="anonymous">
+      <track kind="metadata" label="thumbnails" src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.vtt" default />
+    </video>
+  </video-neutral-skin>
+</video-player>
+```
+
+**index.css**
+
+```css
+.html-video-neutral-skin-basic {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/video/player';
+import '@videojs/html/video/neutral-skin';
+```
+
 ## Own the UI
 
 Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.

package/docs/reference/components/video-skin.md

@@ -13,17 +13,17 @@ import '@videojs/html/video/skin';
 The import registers the skin and every UI element it composes. The [CDN](../../guides/cdn.md) player bundle registers this skin together with its player:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>
 ```
 
-## Usage
+## Anatomy
 
-The skin goes between the player and the media element. It renders its controls around the media.
+The skin goes between the player and the media component. It renders its controls around the media.
 
 ```html
 <video-player>
   <video-skin>
-    <video src="video.mp4"></video>
+    <video></video>
   </video-skin>
 </video-player>
 ```
@@ -44,6 +44,39 @@ See [Show timeline thumbnail previews](../../guides/thumbnails.md) for complete
 
 Packaged skins style themselves and expose a small set of public CSS custom properties. Everything else inside the skin is private and may change between releases. [Customize skins](../../guides/customize-skins.md#style-a-packaged-skin) documents the properties. For deeper changes, the Video.js registry provides the skin files.
 
+## Examples
+
+### Basic Usage
+
+**index.html**
+
+```html
+<video-player poster="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg">
+  <video-skin class="html-video-skin-basic">
+    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline crossorigin="anonymous">
+      <track kind="metadata" label="thumbnails" src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.vtt" default />
+    </video>
+  </video-skin>
+</video-player>
+```
+
+**index.css**
+
+```css
+.html-video-skin-basic {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+
+**index.ts**
+
+```ts
+import '@videojs/html/video/player';
+import '@videojs/html/video/skin';
+```
+
 ## Own the UI
 
 Packaged skins keep their controls and layout inside Video.js. When you need to add, remove, rearrange, or deeply restyle controls, use Shadcn to add the skin source to your project. Its components, layout, styles, and interactions become local files you can change.

package/docs/reference/components/video.md

@@ -4,7 +4,7 @@ Native video playback that can provide media to a Video.js player
 
 ## Import
 
-The media element is the browser’s native `<video>`. Import the video player registration when it should provide media to Video.js:
+The media component is the browser’s native `<video>`. Import the video player registration when it should provide media to Video.js:
 
 ```ts
 import '@videojs/html/video/player';

package/docs/reference/components/vimeo-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/vimeo-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/vimeo-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/vimeo-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/wistia-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/wistia-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/wistia-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/wistia-video.js"></script>
 ```
 
 ## Load a source

package/docs/reference/components/youtube-video.md

@@ -17,7 +17,7 @@ import '@videojs/html/media/youtube-video';
 Or load it from the [CDN](../../guides/cdn.md):
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.5/media/youtube-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/media/youtube-video.js"></script>
 ```
 
 ## Load a source

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videojs/html",
-  "version": "10.0.0-rc.5",
+  "version": "10.0.1",
   "description": "Video.js 10 for HTML, Vue, and Svelte: player custom elements and skins for video and audio",
   "keywords": [
     "audio",
@@ -164,51 +164,49 @@
     "access": "public"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-rc.5",
-    "@videojs/element": "10.0.0-rc.5",
-    "@videojs/media": "10.0.0-rc.5",
-    "@videojs/native-hls-video": "10.0.0-rc.5",
-    "@videojs/spf": "10.0.0-rc.5",
-    "@videojs/store": "10.0.0-rc.5",
-    "@videojs/utils": "10.0.0-rc.5"
+    "@videojs/core": "10.0.1",
+    "@videojs/element": "10.0.1",
+    "@videojs/media": "10.0.1",
+    "@videojs/native-hls-video": "10.0.1",
+    "@videojs/spf": "10.0.1",
+    "@videojs/store": "10.0.1",
+    "@videojs/utils": "10.0.1"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@videojs/cloudflare-video": "10.0.0-rc.5",
-    "@videojs/dash-video": "10.0.0-rc.5",
-    "@videojs/google-cast": "10.0.0-rc.5",
-    "@videojs/hlsjs-video": "10.0.0-rc.5",
-    "@videojs/icons": "10.0.0-rc.5",
-    "@videojs/mux-audio": "10.0.0-rc.5",
-    "@videojs/mux-data": "10.0.0-rc.5",
-    "@videojs/mux-video": "10.0.0-rc.5",
-    "@videojs/shaka-video": "10.0.0-rc.5",
-    "@videojs/skins": "10.0.0-rc.5",
-    "@videojs/spotify-audio": "10.0.0-rc.5",
-    "@videojs/tiktok-video": "10.0.0-rc.5",
-    "@videojs/twitch-video": "10.0.0-rc.5",
-    "@videojs/vimeo-video": "10.0.0-rc.5",
-    "@videojs/wistia-video": "10.0.0-rc.5",
-    "@videojs/youtube-video": "10.0.0-rc.5",
+    "@videojs/cloudflare-video": "10.0.1",
+    "@videojs/dash-video": "10.0.1",
+    "@videojs/google-cast": "10.0.1",
+    "@videojs/hlsjs-video": "10.0.1",
+    "@videojs/icons": "10.0.1",
+    "@videojs/mux-audio": "10.0.1",
+    "@videojs/mux-data": "10.0.1",
+    "@videojs/mux-video": "10.0.1",
+    "@videojs/shaka-video": "10.0.1",
+    "@videojs/skins": "10.0.1",
+    "@videojs/spotify-audio": "10.0.1",
+    "@videojs/tiktok-video": "10.0.1",
+    "@videojs/twitch-video": "10.0.1",
+    "@videojs/vimeo-video": "10.0.1",
+    "@videojs/wistia-video": "10.0.1",
+    "@videojs/youtube-video": "10.0.1",
     "happy-dom": "^20.11.1",
-    "typescript": "^6.0.2",
     "vite-plus": "1.0.0"
   },
   "peerDependencies": {
-    "@videojs/cloudflare-video": "10.0.0-rc.5",
-    "@videojs/dash-video": "10.0.0-rc.5",
-    "@videojs/google-cast": "10.0.0-rc.5",
-    "@videojs/hlsjs-video": "10.0.0-rc.5",
-    "@videojs/mux-audio": "10.0.0-rc.5",
-    "@videojs/mux-data": "10.0.0-rc.5",
-    "@videojs/mux-video": "10.0.0-rc.5",
-    "@videojs/shaka-video": "10.0.0-rc.5",
-    "@videojs/spotify-audio": "10.0.0-rc.5",
-    "@videojs/tiktok-video": "10.0.0-rc.5",
-    "@videojs/twitch-video": "10.0.0-rc.5",
-    "@videojs/vimeo-video": "10.0.0-rc.5",
-    "@videojs/wistia-video": "10.0.0-rc.5",
-    "@videojs/youtube-video": "10.0.0-rc.5"
+    "@videojs/cloudflare-video": "10.0.1",
+    "@videojs/dash-video": "10.0.1",
+    "@videojs/google-cast": "10.0.1",
+    "@videojs/hlsjs-video": "10.0.1",
+    "@videojs/mux-audio": "10.0.1",
+    "@videojs/mux-data": "10.0.1",
+    "@videojs/mux-video": "10.0.1",
+    "@videojs/shaka-video": "10.0.1",
+    "@videojs/spotify-audio": "10.0.1",
+    "@videojs/tiktok-video": "10.0.1",
+    "@videojs/twitch-video": "10.0.1",
+    "@videojs/vimeo-video": "10.0.1",
+    "@videojs/wistia-video": "10.0.1",
+    "@videojs/youtube-video": "10.0.1"
   },
   "peerDependenciesMeta": {
     "@videojs/cloudflare-video": {