@videojs/html 10.2.0 → 10.4.0

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

@@ -1,8 +1,8 @@
 # video-compat-skin
 
-A video skin designed for broader browser compatibility
+The video preset's plain, unbranded skin, a polished step above native controls
 
-The Compat skin of the video preset provides basic controls and plain surfaces, with broader browser compatibility as its design goal. Its time slider supports chapter segments and thumbnail previews. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+The Compat skin of the video preset: the same core controls with plain, unbranded surfaces that avoid newer visual effects such as backdrop blur. It puts large play and seek buttons in the center, fullscreen, picture-in-picture, Cast, and AirPlay in a top corner, and chapter segments and thumbnail previews on its time slider. The preset also provides [VideoSkin](./video-skin.md), [NeutralVideoSkin](./video-neutral-skin.md), and [ScaffoldVideoSkin](./video-scaffold-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Customize skins](../../guides/customize-skins.md) to install and edit its source.
 
 ## Import
 
@@ -10,6 +10,12 @@ The Compat skin of the video preset provides basic controls and plain surfaces,
 import '@videojs/html/video/compat-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.4.0/video-compat.js"></script>
+```
+
 ## Anatomy
 
 The skin goes between the player and the media component. It renders its controls around the media.
@@ -34,6 +40,10 @@ The skin renders a storyboard preview image while scrubbing the time slider. An
 
 See [Show timeline thumbnail previews](../../guides/thumbnails.md) for complete examples.
 
+## Controls before playback
+
+Before playback starts, the skin shows only the large center play button. The other controls appear once playback starts or the media begins to autoplay. Set `--media-controls-before-start: visible` to show them from the start. See [Customize skins](../../guides/customize-skins.md#set-the-skins-styles).
+
 ## Styling
 
 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.

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

@@ -2,7 +2,7 @@
 
 The video preset's visually lighter skin, closer to a classic control bar
 
-The neutral skin of the video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. The [default video skin](./video-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the video preset ships.
+The neutral skin of the video preset: the same player and the same controls in a visually lighter design, closer to a classic control bar. The preset also provides [VideoSkin](./video-skin.md), [CompatVideoSkin](./video-compat-skin.md), and [ScaffoldVideoSkin](./video-scaffold-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Presets](../../guides/presets.md) for what the video preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ 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.2.0/video-neutral.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/video-neutral.js"></script>
 ```
 
 ## Anatomy
@@ -40,6 +40,10 @@ The skin renders a storyboard preview image while scrubbing the time slider. An
 
 See [Show timeline thumbnail previews](../../guides/thumbnails.md) for complete examples.
 
+## Controls before playback
+
+Before playback starts, the skin shows only the large center play button. The other controls appear once playback starts or the media begins to autoplay. Set `--media-controls-before-start: visible` to show them from the start. See [Customize skins](../../guides/customize-skins.md#set-the-skins-styles).
+
 ## Styling
 
 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.

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

@@ -2,7 +2,7 @@
 
 A video skin with minimal styling for custom skins
 
-The Scaffold skin of the video preset provides functional controls with minimal styling and no transitions. It is a starting point for a custom skin, intended to be restyled before use. Its time slider supports chapter segments and thumbnail previews. See [Customize skins](../../guides/customize-skins.md) to install and edit its source.
+The Scaffold skin of the video preset provides functional controls with minimal styling and no transitions. It is a starting point for a custom skin, intended to be restyled before use. Its time slider supports chapter segments and thumbnail previews. The preset also provides [VideoSkin](./video-skin.md), [NeutralVideoSkin](./video-neutral-skin.md), and [CompatVideoSkin](./video-compat-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Customize skins](../../guides/customize-skins.md) to install and edit its source.
 
 ## Import
 
@@ -13,7 +13,7 @@ import '@videojs/html/video/scaffold-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.2.0/video-scaffold.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/video-scaffold.js"></script>
 ```
 
 ## Usage
@@ -40,6 +40,10 @@ The skin renders a storyboard preview image while scrubbing the time slider. An
 
 See [Show timeline thumbnail previews](../../guides/thumbnails.md) for complete examples.
 
+## Controls before playback
+
+Before playback starts, the skin shows only the large center play button. The other controls appear once playback starts or the media begins to autoplay. Set `--media-controls-before-start: visible` to show them from the start. See [Customize skins](../../guides/customize-skins.md#set-the-skins-styles).
+
 ## Styling
 
 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.

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

@@ -2,7 +2,7 @@
 
 The video preset's default skin with the modern, frosted look
 
-The default skin of the video preset: the control layout for on-demand video with the modern, frosted look. [NeutralVideoSkin](./video-neutral-skin.md) is the same preset’s other variant. See [Skins](../../guides/skins.md) for how packaged skins work and [Presets](../../guides/presets.md) for what the video preset ships.
+The default skin of the video preset: the control layout for on-demand video with the modern, frosted look. The preset also provides [NeutralVideoSkin](./video-neutral-skin.md), [CompatVideoSkin](./video-compat-skin.md), and [ScaffoldVideoSkin](./video-scaffold-skin.md). See [Skins](../../guides/skins.md#choose-a-skin) to choose between them and [Presets](../../guides/presets.md) for what the video preset ships.
 
 ## Import
 
@@ -13,7 +13,7 @@ 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.2.0/video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/video.js"></script>
 ```
 
 ## Anatomy
@@ -40,6 +40,10 @@ The skin renders a storyboard preview image while scrubbing the time slider. An
 
 See [Show timeline thumbnail previews](../../guides/thumbnails.md) for complete examples.
 
+## Controls before playback
+
+Before playback starts, the skin shows only the large center play button. The other controls appear once playback starts or the media begins to autoplay. Set `--media-controls-before-start: visible` to show them from the start. See [Customize skins](../../guides/customize-skins.md#set-the-skins-styles).
+
 ## Styling
 
 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.

package/docs/reference/components/video.md

@@ -74,4 +74,22 @@ This native video uses a child source, captions track, and browser controls whil
 ```ts
 import '@videojs/html/video/player';
 import '@videojs/html/ui/container';
-```
+```
+
+## API Reference
+
+### Attributes
+
+Accepts the standard `<video>` attributes. See the [MDN `<video>` reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video): `autoplay`, `controls`, `controlslist`, `crossorigin`, `disablepictureinpicture`, `disableremoteplayback`, `height`, `loop`, `muted`, `playsinline`, `poster`, `preload`, `src`, `width`.
+
+### Properties
+
+Exposes the native media properties. See [`HTMLVideoElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `autoplay`, `buffered`, `controls`, `crossOrigin`, `currentSrc`, `currentTime`, `defaultMuted`, `defaultPlaybackRate`, `disablePictureInPicture`, `disableRemotePlayback`, `duration`, `ended`, `error`, `height`, `loop`, `mediaKeys`, `muted`, `networkState`, `paused`, `playbackRate`, `played`, `playsInline`, `poster`, `preload`, `preservesPitch`, `readyState`, `remote`, `seekable`, `seeking`, `sinkId`, `src`, `srcObject`, `textTracks`, `videoHeight`, `videoWidth`, `volume`, `width`.
+
+### Methods
+
+Supports the native media methods. See [`HTMLVideoElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `addTextTrack`, `cancelVideoFrameCallback`, `canPlayType`, `fastSeek`, `getVideoPlaybackQuality`, `load`, `pause`, `play`, `requestPictureInPicture`, `requestVideoFrameCallback`, `setMediaKeys`, `setSinkId`.
+
+### Events
+
+Fires the standard media events: `abort`, `canplay`, `canplaythrough`, `durationchange`, `emptied`, `encrypted`, `ended`, `enterpictureinpicture`, `error`, `leavepictureinpicture`, `loadeddata`, `loadedmetadata`, `loadstart`, `pause`, `play`, `playing`, `progress`, `ratechange`, `resize`, `seeked`, `seeking`, `stalled`, `suspend`, `timeupdate`, `volumechange`, `waiting`, `waitingforkey`.

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.2.0/media/vimeo-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/vimeo-video.js"></script>
 ```
 
 ## Load a source

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

@@ -21,7 +21,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.2.0/media/wistia-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/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.2.0/media/youtube-video.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.4.0/media/youtube-video.js"></script>
 ```
 
 ## Load a source

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videojs/html",
-  "version": "10.2.0",
+  "version": "10.4.0",
   "description": "Video.js 10 for HTML, Vue, and Svelte: player custom elements and skins for video and audio",
   "keywords": [
     "audio",
@@ -164,65 +164,82 @@
     "access": "public"
   },
   "dependencies": {
-    "@videojs/core": "10.2.0",
-    "@videojs/element": "10.2.0",
-    "@videojs/media": "10.2.0",
-    "@videojs/native-hls-video": "10.2.0",
-    "@videojs/spf": "10.2.0",
-    "@videojs/store": "10.2.0",
-    "@videojs/utils": "10.2.0"
+    "@videojs/core": "10.4.0",
+    "@videojs/element": "10.4.0",
+    "@videojs/media": "10.4.0",
+    "@videojs/native-hls-video": "10.4.0",
+    "@videojs/spf": "10.4.0",
+    "@videojs/store": "10.4.0",
+    "@videojs/utils": "10.4.0"
   },
   "devDependencies": {
-    "@videojs/cloudflare-video": "10.2.0",
-    "@videojs/dash-video": "10.2.0",
-    "@videojs/google-cast": "10.2.0",
-    "@videojs/hlsjs-video": "10.2.0",
-    "@videojs/icons": "10.2.0",
-    "@videojs/mux-audio": "10.2.0",
-    "@videojs/mux-data": "10.2.0",
-    "@videojs/mux-video": "10.2.0",
-    "@videojs/playerjs-video": "10.2.0",
-    "@videojs/shaka-video": "10.2.0",
-    "@videojs/skins": "10.2.0",
-    "@videojs/spotify-audio": "10.2.0",
-    "@videojs/tiktok-video": "10.2.0",
-    "@videojs/twitch-video": "10.2.0",
-    "@videojs/vimeo-video": "10.2.0",
-    "@videojs/wistia-video": "10.2.0",
-    "@videojs/youtube-video": "10.2.0",
+    "@videojs/cloudflare-video": "10.4.0",
+    "@videojs/dailymotion-video": "10.4.0",
+    "@videojs/dash-video": "10.4.0",
+    "@videojs/google-analytics": "10.4.0",
+    "@videojs/google-cast": "10.4.0",
+    "@videojs/hlsjs-video": "10.4.0",
+    "@videojs/icons": "10.4.0",
+    "@videojs/mixcloud-audio": "10.4.0",
+    "@videojs/mux-audio": "10.4.0",
+    "@videojs/mux-data": "10.4.0",
+    "@videojs/mux-video": "10.4.0",
+    "@videojs/playerjs-video": "10.4.0",
+    "@videojs/shaka-video": "10.4.0",
+    "@videojs/skins": "10.4.0",
+    "@videojs/soundcloud-audio": "10.4.0",
+    "@videojs/spotify-audio": "10.4.0",
+    "@videojs/tiktok-video": "10.4.0",
+    "@videojs/twitch-video": "10.4.0",
+    "@videojs/vimeo-video": "10.4.0",
+    "@videojs/wistia-video": "10.4.0",
+    "@videojs/youtube-video": "10.4.0",
     "happy-dom": "^20.11.1",
     "vite-plus": "1.1.0"
   },
   "peerDependencies": {
-    "@videojs/cloudflare-video": "10.2.0",
-    "@videojs/dash-video": "10.2.0",
-    "@videojs/google-cast": "10.2.0",
-    "@videojs/hlsjs-video": "10.2.0",
-    "@videojs/mux-audio": "10.2.0",
-    "@videojs/mux-data": "10.2.0",
-    "@videojs/mux-video": "10.2.0",
-    "@videojs/playerjs-video": "10.2.0",
-    "@videojs/shaka-video": "10.2.0",
-    "@videojs/spotify-audio": "10.2.0",
-    "@videojs/tiktok-video": "10.2.0",
-    "@videojs/twitch-video": "10.2.0",
-    "@videojs/vimeo-video": "10.2.0",
-    "@videojs/wistia-video": "10.2.0",
-    "@videojs/youtube-video": "10.2.0"
+    "@videojs/cloudflare-video": "10.4.0",
+    "@videojs/dailymotion-video": "10.4.0",
+    "@videojs/dash-video": "10.4.0",
+    "@videojs/google-analytics": "10.4.0",
+    "@videojs/google-cast": "10.4.0",
+    "@videojs/hlsjs-video": "10.4.0",
+    "@videojs/mixcloud-audio": "10.4.0",
+    "@videojs/mux-audio": "10.4.0",
+    "@videojs/mux-data": "10.4.0",
+    "@videojs/mux-video": "10.4.0",
+    "@videojs/playerjs-video": "10.4.0",
+    "@videojs/shaka-video": "10.4.0",
+    "@videojs/soundcloud-audio": "10.4.0",
+    "@videojs/spotify-audio": "10.4.0",
+    "@videojs/tiktok-video": "10.4.0",
+    "@videojs/twitch-video": "10.4.0",
+    "@videojs/vimeo-video": "10.4.0",
+    "@videojs/wistia-video": "10.4.0",
+    "@videojs/youtube-video": "10.4.0"
   },
   "peerDependenciesMeta": {
     "@videojs/cloudflare-video": {
       "optional": true
     },
+    "@videojs/dailymotion-video": {
+      "optional": true
+    },
     "@videojs/dash-video": {
       "optional": true
     },
+    "@videojs/google-analytics": {
+      "optional": true
+    },
     "@videojs/google-cast": {
       "optional": true
     },
     "@videojs/hlsjs-video": {
       "optional": true
     },
+    "@videojs/mixcloud-audio": {
+      "optional": true
+    },
     "@videojs/mux-audio": {
       "optional": true
     },
@@ -238,6 +255,9 @@
     "@videojs/shaka-video": {
       "optional": true
     },
+    "@videojs/soundcloud-audio": {
+      "optional": true
+    },
     "@videojs/spotify-audio": {
       "optional": true
     },