npm - @videojs/html - Versions diffs - 10.0.0-beta.30 → 10.0.0-beta.31 - Mend

@videojs/html 10.0.0-beta.30 → 10.0.0-beta.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (357) hide show

package/docs/how-to/i18n-switch-locale.md CHANGED Viewed

@@ -24,6 +24,33 @@ Ambient switching only applies when `<media-i18n>` has no explicit `lang` attrib
 Mounted `<media-i18n>` providers observe `lang` on `<html>` and ancestors. No remount required.
+## Set text direction
+`lang` identifies the content language. `dir` controls text and layout direction. Browsers do not infer one from the other, so set both when the locale applies to the whole document:
+ts
+```
+document.documentElement.lang = 'ar';
+document.documentElement.dir = 'rtl';
+```
+Set `dir` back to `ltr` when you switch to a left-to-right language. This prevents the previous direction from remaining active.
+When React’s `locale` is explicit, the player applies its resolved `lang` and `dir` to the container. A `lang` or `dir` passed to that container overrides the rendered DOM boundary only; translations still come from `I18nProvider locale`.
+In HTML, `<media-i18n lang>` sets the provider locale and derives its direction. An explicit `dir` on `<media-i18n>` overrides that derived direction.
+Providers without an explicit locale inherit ambient document language and direction. In that case, set `lang` and `dir` on `<html>` or another ancestor:
+html
+```
+<html lang="ar" dir="rtl">
+```
+RTL preserves playback control ordering and time-semantic media icons while mirroring menu motion and navigation chevrons. Horizontal time and volume sliders retain a physical left-to-right value scale: Left Arrow decreases the value, Right Arrow increases it, and the minimum remains on the left.
 ## Explicit provider language
 html

package/docs/how-to/installation.md CHANGED Viewed

@@ -18,7 +18,7 @@ bash
 ```
 npx @videojs/cli docs how-to/installation \
   --framework <html|react> \
-  --preset <video|audio|background-video> \
+  --preset <video|audio|live-video|live-audio|background-video> \
   --skin <default|minimal|none> \
   --media <html5-video|html5-audio|hls|dash|mux-video|mux-audio|vimeo|background-video> \
   --source-url <url> \
@@ -28,11 +28,11 @@ npx @videojs/cli docs how-to/installation \
 Here’s what the flags mean:
 *   *Framework*: Pick whether you’re working in React or if you’d like to use HTML custom elements. (More to come!)
-*   *Preset*: Pick a pre-built player. The default presets work well for general website playback.
+*   *Preset*: Pick a pre-built player. The default presets work well for general website playback; the live presets add a Live button and drop the on-demand time displays.
 *   *Skin*: Pick what your player looks like
-*   *Media*: Pick what kind of media you have
+*   *Media*: Pick what kind of media you have. The `live-video` preset supports HLS and Mux video; `live-audio` supports Mux audio.
 *   *Source URL*: Define where your media comes from (or omit for a sample URL)
-*   *Install method*: How do you want to install your package? (CDN is HTML-only)
+*   *Install method*: How do you want to install your package? (CDN is HTML-only.)
 If you’re an agent, interview your user and offer to run the CLI for them, or offer them a precomposed CLI command.

package/docs/how-to/migrate-from-plyr.md CHANGED Viewed

@@ -147,11 +147,7 @@ js
 import '@videojs/html/media/vimeo-video';
 ```
-Note
-Vimeo and YouTube don’t have prebuilt CDN scripts yet, so these two need a bundler.
-Set the `src` to the URL for the Vimeo video, for example `https://vimeo.com/648359100`.
+Set the `src` to the URL for the Vimeo video, for example `https://vimeo.com/76979871`.
 ### YouTube

package/docs/llms.txt CHANGED Viewed

@@ -94,6 +94,7 @@ API Reference for UI components for building media player interfaces.
 API Reference for media components that handle streaming protocols and media playback.
 - [background-video](./reference/background-video.md): Decorative background video element with automatic muting and looping
+- [cloudflare-video](./reference/cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player
 - [dash-video](./reference/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
 - [hls-audio](./reference/hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream
 - [hls-video](./reference/hls-video.md): Lightweight HLS video element with minimal bundle size
@@ -101,6 +102,12 @@ API Reference for media components that handle streaming protocols and media pla
 - [mux-audio](./reference/mux-audio.md): Audio element for Mux-hosted HLS streams
 - [mux-video](./reference/mux-video.md): Video element for Mux-hosted HLS streams
 - [native-hls-video](./reference/native-hls-video.md): HLS video element using the browser's built-in HLS support
+- [shaka-video](./reference/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
+- [spotify-audio](./reference/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
+- [tiktok-video](./reference/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player
+- [twitch-video](./reference/twitch-video.md): Video component that plays Twitch videos and live channels through the Twitch embed player
+- [vimeo-video](./reference/vimeo-video.md): Video component that plays Vimeo videos and live events through the Vimeo player
+- [youtube-video](./reference/youtube-video.md): Video component that plays YouTube videos and playlists through the YouTube IFrame player
 ### Player Features

package/docs/reference/cloudflare-video.md ADDED Viewed

@@ -0,0 +1,483 @@
+# cloudflare-video
+Video component that plays Cloudflare Stream videos through the Stream player
+Video component that plays [Cloudflare Stream](https://developers.cloudflare.com/stream/) videos through the Stream player embed. Cloudflare’s own chrome stays hidden by default, so it drops into a [player skin](../concepts/skins.md) like any other media component; set `controls` to use Cloudflare’s UI instead.
+## Load a source
+`src` takes a raw 32-character video UID, any `cloudflarestream.com` or `videodelivery.net` URL, or a signed token. Watch, embed, iframe, manifest, and thumbnail URLs all carry the UID in the same position, and a signed token stands in for the UID wherever one appears.
+html
+```
+<cloudflare-video src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4"></cloudflare-video>
+```
+## Signed playback
+For [signed URLs](https://developers.cloudflare.com/stream/viewing-videos/securing-your-stream/), pass the signed token wherever the UID would go: as the whole `src`, or inside a Stream URL. Keep your customer subdomain when your URLs name one. Cloudflare serves signed and access-controlled videos only from `customer-<code>.cloudflarestream.com`, so the element preserves that origin instead of collapsing it onto the shared host.
+## Behavior
+A few things work differently from a native `<video>` element, because the Stream embed doesn’t expose them:
+*   The embed owns text tracks: `textTracks` stays empty, and `engine.cloudflare.defaultTextTrack` picks the track to show.
+*   Picture-in-picture is unavailable, and the player reports it as unsupported.
+*   Fullscreen targets the iframe, so Cloudflare’s own chrome shows in fullscreen.
+*   `playsInline` has no effect: the Stream embed always plays inline.
+## Examples
+### Basic Usage
+index.html
+index.css
+index.ts
+```
+<cloudflare-video
+    class="cloudflare-video"
+    src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4"
+    controls
+></cloudflare-video>
+```
+```
+.cloudflare-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+```
+import '@videojs/html/media/cloudflare-video';
+```
+## API Reference
+### Attributes
+These attributes configure the embedded media adapter:
+Attribute
+Type
+Default
+Details
+`autoplay`
+`boolean`
+`—`
+`controls`
+`boolean`
+`—`
+`loop`
+`boolean`
+`—`
+`muted`
+`boolean`
+`—`
+`playsinline`
+`boolean`
+`—`
+`poster`
+`string`
+`—`
+`preload`
+`MediaPreloadType`
+`—`
+`src`
+`string`
+`—`
+### Properties
+Property
+Type
+Default
+Details
+`autoplay`
+`boolean`
+`—`
+`buffered`
+`TimeRangeLike`
+`—`
+▸
+Description
+Read-only.
+`controls`
+`boolean`
+`—`
+`currentSrc`
+`string`
+`—`
+▸
+Description
+Read-only.
+`currentTime`
+`number`
+`—`
+`defaultMuted`
+`boolean`
+`—`
+`duration`
+`number`
+`—`
+▸
+Description
+Read-only.
+`ended`
+`boolean`
+`—`
+▸
+Description
+Read-only.
+`engine`
+`CloudflareStreamPlayerApi | null`
+`—`
+▸
+Description
+Read-only. Underlying Stream SDK player instance (null until the SDK loads).
+`error`
+`MediaError | null`
+`—`
+▸
+Description
+Read-only.
+`isFullscreen`
+`boolean`
+`—`
+▸
+Description
+Read-only.
+`loop`
+`boolean`
+`—`
+`muted`
+`boolean`
+`—`
+`paused`
+`boolean`
+`—`
+▸
+Description
+Read-only.
+`playbackRate`
+`number`
+`—`
+`playsInline`
+`boolean`
+`—`
+`poster`
+`string`
+`—`
+`preload`
+`MediaPreloadType`
+`—`
+`readyState`
+`number`
+`—`
+▸
+Description
+Read-only.
+`seekable`
+`TimeRangeLike`
+`—`
+▸
+Description
+Read-only.
+`seeking`
+`boolean`
+`—`
+▸
+Description
+Read-only.
+`source`
+`CloudflareSource | null`
+`—`
+▸
+Description
+Structured source: `src` plus embed parameters under `engine.cloudflare`. Replacing it re-derives `src`.
+`src`
+`string`
+`—`
+`textTracks`
+`TextTrackListLike`
+`—`
+▸
+Description
+Read-only. Always empty: the SDK exposes no track API, and the embed owns the track picked by `defaultTextTrack`.
+`videoHeight`
+`number`
+`—`
+▸
+Description
+Read-only.
+`videoWidth`
+`number`
+`—`
+▸
+Description
+Read-only.
+`volume`
+`number`
+`—`
+### Engine options
+#### `source.engine.cloudflare`
+Pass [Stream player parameters](https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/) under `source.engine.cloudflare`, spelled exactly as Cloudflare spells them, plus anything Cloudflare adds next. They’re serialized onto the embed URL untouched, and the embed reads them once, when its URL is built. [Media Sources](../concepts/media-sources.md) covers how engine options fit into a structured source.
+`controls`, `autoplay`, `loop`, `muted`, `preload`, and `poster` come from the props of the same name, so they have no `engine.cloudflare` spelling.
+ts
+```
+const video = document.querySelector('cloudflare-video');
+video.source = {
+  src: 'bfbd585059e33391d67b0f1d15fe6ea4',
+  engine: { cloudflare: { primaryColor: '#f03e3e', startTime: '5m30s' } },
+};
+```
+Option
+Type
+Details
+`ad-url`
+`string`
+▸
+Description
+VAST tag to play as a pre-roll ad. Reported through the `stream-ad*` events.
+`defaultTextTrack`
+`string`
+▸
+Description
+BCP 47 language of the text track to show by default (`'en'`, `'de'`).
+`letterboxColor`
+`string`
+▸
+Description
+Any CSS color for the letterbox bars around a video that does not fill the player.
+`primaryColor`
+`string`
+▸
+Description
+Any CSS color for the progress bar and other player accents.
+`referrerPolicy`
+`ReferrerPolicy`
+▸
+Description
+`referrerpolicy` for the embed iframe. Not a Cloudflare player parameter.
+`startTime`
+`string | number`
+▸
+Description
+Where playback starts, in seconds or as a time string (`'5m30s'`).
+### Methods
+Supports these media methods: `exitFullscreen``load``pause``play``requestFullscreen`
+### Events
+Implements these standard media events through the embedded player: `durationchange``emptied``error``loadedmetadata``loadstart``volumechange`
+Also emits these Video.js-specific events:
+Event
+Description
+`loadcomplete`
+`sourcechange`
+Fired when \`source\` changes, either directly or by resolving a new \`src\`. Read \`source\` for the new value.

package/docs/reference/dash-video.md CHANGED Viewed

@@ -218,6 +218,60 @@ Read-only.
 Also exposes these properties from the native media API. 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``loop``muted``paused``playbackRate``played``playsInline``poster``preload``readyState``remote``seekable``seeking``textTracks``title``videoHeight``videoWidth``volume`
+### Engine options
+#### `source.engine.dashJs`
+Pass dash.js’s own settings here. They’re handed to dash.js untouched, so every option in its [settings reference](https://cdn.dashjs.org/latest/jsdoc/module-Settings.html) works. Replacing the object resets any settings applied before it. [Media Sources](../concepts/media-sources.md) covers how engine options fit into a structured source.
+Each of the three below is a group of dash.js settings rather than a single value, and dash.js documents what’s inside them.
+ts
+```
+const video = document.querySelector('dash-video');
+video.source = {
+  src: 'https://example.com/manifest.mpd',
+  engine: { dashJs: { streaming: { buffer: { fastSwitchEnabled: true } } } },
+};
+```
+Option
+Type
+Details
+`debug`
+`object`
+▸
+Type
+`{ logLevel?: LogLevel; dispatchEvent?: boolean; }`
+`errors`
+`object`
+▸
+Type
+`{ recoverAttempts?: { mediaErrorDecode?: number; }; }`
+`streaming`
+`object`
+▸
+Type
+`{ abandonLoadTimeout?: number; wallclockTimeUpdateInterval?: number; manifestUpdateRetryInterval?: number; liveUpdateTimeThresholdInMilliseconds?: number; cacheInitSegments?: boolean; ... 40 more ...; dvbReporting?: { ...; }; }`
 ### Methods
 Supports these media methods. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `addTextTrack``canPlayType``exitFullscreen``exitPictureInPicture``load``pause``play``requestFullscreen``requestPictureInPicture`

package/docs/reference/feature-metadata.md CHANGED Viewed

@@ -86,6 +86,8 @@ The resolved poster URL, independent of the media element's own `poster`. Set it
 ### Selector
+To just show the name of what is playing, drop in the [Title component](./title.md) — it reads this feature for you. Reach for the selector when building your own UI.
 Pass `selectMetadata` to [`PlayerController`](./player-controller.md) to subscribe to metadata state. Returns `undefined` if the metadata feature is not configured.
 content-title.ts
@@ -138,4 +140,4 @@ The media tier comes from media that reports content data and announces changes
 `poster` is the feature’s own resolved value, not the media element’s `poster` attribute. Setting one does not set the other.
-A low-resolution stand-in to show while the poster loads is not part of this feature. The [poster](./poster.md) renders an `<img>` you control, so give it a `background-image` and that shows until the poster itself paints over it.
+A low-resolution stand-in to show while the poster loads is not part of this feature. The [poster](./poster.md) renders an `<img>` you control, so give it a `background-image` and that shows until the poster itself paints over it. [Add a poster placeholder](../how-to/add-a-poster-placeholder.md) walks through that technique for each framework.