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

@videojs/react 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 (130) hide show

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

@@ -24,6 +24,33 @@ Ambient switching only applies when `I18nProvider` has no explicit `locale` prop
 An [`I18nProvider`](../reference/i18n-provider.md) without `locale` reads `<html lang>`. Updating it is enough when you are not forcing an explicit locale.
+## 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
 tsx

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

@@ -139,7 +139,7 @@ js
 import { VimeoVideo } from '@videojs/react/media/vimeo-video';
 ```
-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.
 - [BackgroundVideo](./reference/background-video.md): Decorative background video element with automatic muting and looping
+- [CloudflareVideo](./reference/cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player
 - [DashVideo](./reference/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
 - [HlsAudio](./reference/hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream
 - [HlsVideo](./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
 - [MuxAudio](./reference/mux-audio.md): Audio element for Mux-hosted HLS streams
 - [MuxVideo](./reference/mux-video.md): Video element for Mux-hosted HLS streams
 - [NativeHlsVideo](./reference/native-hls-video.md): HLS video element using the browser's built-in HLS support
+- [ShakaVideo](./reference/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
+- [SpotifyAudio](./reference/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
+- [TikTokVideo](./reference/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player
+- [TwitchVideo](./reference/twitch-video.md): Video component that plays Twitch videos and live channels through the Twitch embed player
+- [VimeoVideo](./reference/vimeo-video.md): Video component that plays Vimeo videos and live events through the Vimeo player
+- [YouTubeVideo](./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,223 @@
+# CloudflareVideo
+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.
+tsx
+```
+<CloudflareVideo src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4" />
+```
+## 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
+App.tsx
+App.css
+```
+import { CloudflareVideo } from '@videojs/react/media/cloudflare-video';
+export default function BasicUsage() {
+  return (
+    <div className="cloudflare-video">
+      <CloudflareVideo src="https://watch.videodelivery.net/bfbd585059e33391d67b0f1d15fe6ea4" controls />
+    </div>
+  );
+}
+```
+```
+.cloudflare-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+## API Reference
+### Props
+Accepts these Video.js-specific props:
+Prop
+Type
+Default
+Details
+`autoplay`
+`boolean`
+`false`
+`controls`
+`boolean`
+`false`
+`defaultMuted`
+`boolean`
+`false`
+`loop`
+`boolean`
+`false`
+`muted`
+`boolean`
+`false`
+`playsInline`
+`boolean`
+`true`
+`poster`
+`string`
+`''`
+`preload`
+`MediaPreloadType`
+`'metadata'`
+`source`
+`CloudflareSource | null`
+`null`
+▸
+Description
+Structured source: `src` plus embed parameters under `engine.cloudflare`. Replacing it re-derives `src`.
+`src`
+`string`
+`''`
+### 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.
+tsx
+```
+<CloudflareVideo
+  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'`).
+### Ref
+Forwards its ref to the rendered `<iframe>`. The ref is an [HTMLIFrameElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement). Control playback with the component props and player APIs rather than the iframe ref.

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

@@ -60,6 +60,61 @@ dash.js takes settings on a live player, so changing `engine.dashJs` re-applies
 `''`
+### 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.
+tsx
+```
+<DashVideo
+  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?: { ...; }; }`
 ### Ref
 Forwards its ref to the rendered `<video>`. The ref is an [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) and exposes its complete native property and method API.

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

@@ -78,6 +78,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 [`usePlayer`](./use-player.md) to subscribe to metadata state. Returns `undefined` if the metadata feature is not configured.
 ContentTitle.tsx
@@ -126,4 +128,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.

package/docs/reference/hls-audio.md CHANGED Viewed

@@ -30,7 +30,33 @@ export default function BasicUsage() {
 ### Props
-Accepts the standard React props for a native `<audio>`.
+Accepts the standard React props for a native `<audio>`, plus these Video.js-specific props:
+Prop
+Type
+Default
+Details
+`disableRemotePlayback`
+`false | Target["disableRemotePlayback"]`
+`false`
+`preload`
+`Target["preload"] | "metadata"`
+`''`
+`src`
+`"" | Target["src"]`
+`''`
 ### Ref

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

@@ -30,7 +30,45 @@ export default function BasicUsage() {
 ### Props
-Accepts the standard React props for a native `<video>`.
+Accepts the standard React props for a native `<video>`, plus these Video.js-specific props:
+Prop
+Type
+Default
+Details
+`disableRemotePlayback`
+`false | Target["disableRemotePlayback"]`
+`false`
+`preload`
+`Target["preload"] | "metadata"`
+`''`
+`src`
+`"" | Target["src"]`
+`''`
+`streamType`
+`MediaStreamType | NonNullable<Target["streamType"]>`
+`'unknown'`
+▸
+Description
+Current stream type (`'on-demand'`, `'live'`, or `'unknown'`). Defaults to `'unknown'`; detecting hosts update it automatically, and consumers can set it to override detection.
 ### Ref