npm - @videojs/html - Versions diffs - 10.0.0-rc.2 → 10.0.0-rc.3 - Mend

@videojs/html 10.0.0-rc.2 → 10.0.0-rc.3

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 (1438) hide show

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

@@ -1,513 +0,0 @@
-# cloudflare-video
-Video component that plays Cloudflare Stream videos through the Stream player
-[Cloudflare Stream](https://developers.cloudflare.com/stream/) runs in an embedded player. Its 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.
-## Import
-bash
-```
-pnpm add @videojs/cloudflare-video
-```
-ts
-```
-import '@videojs/html/media/cloudflare-video';
-```
-Or load it from the [CDN](../concepts/cdn.md):
-html
-```
-<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.0-rc.2/media/cloudflare-video.js"></script>
-```
-## 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`
-`false`
-`controls`
-`boolean`
-`false`
-`loop`
-`boolean`
-`false`
-`muted`
-`boolean`
-`false`
-`playsinline`
-`boolean`
-`true`
-`poster`
-`string`
-`''`
-`preload`
-`MediaPreloadType`
-`'metadata'`
-`src`
-`string`
-`''`
-### Properties
-Property
-Type
-Default
-Details
-`autoplay`
-`boolean`
-`false`
-`buffered`
-`TimeRangeLike`
-`—`
-▸
-Description
-Read-only.
-`controls`
-`boolean`
-`false`
-`currentSrc`
-`string`
-`—`
-▸
-Description
-Read-only.
-`currentTime`
-`number`
-`—`
-`defaultMuted`
-`boolean`
-`false`
-`duration`
-`number`
-`—`
-▸
-Description
-Read-only.
-`ended`
-`boolean`
-`—`
-▸
-Description
-Read-only.
-`engine`
-`{ play(): Promise<void> | void; pause(): void; addEventListener(type: string, listener: ((event: Event) => void)): void; removeEventListener(type: string, listener: ((event: Event) => void)): void; src: string; currentTime: number; volume: number; muted: boolean; playbackRate: number; loop: boolean; autoplay: boolean; controls: boolean; preload: string; poster: string; paused: boolean; ended: boolean; seeking: boolean; duration: number; buffered: TimeRanges; played: TimeRanges; videoWidth: number; videoHeight: number } | 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`
-`false`
-`muted`
-`boolean`
-`false`
-`paused`
-`boolean`
-`—`
-▸
-Description
-Read-only.
-`playbackRate`
-`number`
-`—`
-`played`
-`{ length: number; start(index: number): number; end(index: number): number }`
-`—`
-▸
-Description
-Read-only.
-`playsInline`
-`boolean`
-`true`
-`poster`
-`string`
-`''`
-`preload`
-`MediaPreloadType`
-`'metadata'`
-`readyState`
-`number`
-`—`
-▸
-Description
-Read-only.
-`seekable`
-`TimeRangeLike`
-`—`
-▸
-Description
-Read-only.
-`seeking`
-`boolean`
-`—`
-▸
-Description
-Read-only.
-`source`
-`{ src?: string; engine?: CloudflareSourceEngineConfig } | null`
-`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 | undefined`
-▸
-Description
-VAST tag to play as a pre-roll ad. Reported through the `stream-ad*` events.
-`defaultTextTrack`
-`string | undefined`
-▸
-Description
-BCP 47 language of the text track to show by default (`'en'`, `'de'`).
-`letterboxColor`
-`string | undefined`
-▸
-Description
-Any CSS color for the letterbox bars around a video that does not fill the player.
-`primaryColor`
-`string | undefined`
-▸
-Description
-Any CSS color for the progress bar and other player accents.
-`referrerPolicy`
-`ReferrerPolicy | undefined`
-▸
-Description
-`referrerpolicy` for the embed iframe. Not a Cloudflare player parameter.
-`startTime`
-`number | string | undefined`
-▸
-Description
-Where playback starts, in seconds or as a time string (`'5m30s'`).
-### Methods
-Supports these media methods: `afterLoad``beginLoad``bindPlayerEvents``createPlayer``createPlayerApi``exitFullscreen``isStale``load``onError``onLoaded``pause``pauseEmbed``play``requestFullscreen``resetState``snapshotProps``unbindPlayerEvents`
-### 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/create-translator.md DELETED Viewed

@@ -1,81 +0,0 @@
-# createTranslator
-Build a typed translator from a resolved translation map
-## Import
-ts
-```
-import { createTranslator } from "@videojs/html/i18n";
-```
-`createTranslator` wraps the flat map returned by `getI18nTranslations` and returns a typed translator. Providers call this internally after merging registry, lazy-loaded built-in packs, browser-translated fallback copy, and provider layers. Use it directly for custom UI outside built-in controls.
-ts
-```
-import { createTranslator, getI18nTranslations } from '@videojs/html/i18n';
-const t = createTranslator(getI18nTranslations('fr'), 'fr');
-t('buttons.play', { default: 'Play' });
-t('seek.forward', { seconds: 5, default: 'Seek forward {seconds} seconds' });
-```
-## API Reference
-### Parameters
-Parameter
-Type
-Default
-Details
-`translations*`
-`object`
-`—`
-▸
-Description
-Merged translation map for the active locale.
-Type
-`{ [Key in TranslationKey]?: TranslationParams[Key] extends never ? string : Key extends keyof ParametricTranslations ? ParametricTranslations[Key] : string; } & Record<string, string | undefined>`
-`locale*`
-`(typeof LOCALES)[number] | string & o...`
-`—`
-▸
-Description
-BCP 47 tag associated with the map (reserved for future locale-aware behavior).
-Type
-`(typeof LOCALES)[number] | string & object`
-### Return Value
-Type
-Details
-`object`
-▸
-Type
-`{ <Key extends string>( key: Key, ...args: Key extends TranslationKey ? TranslationParams[Key] extends never ? [params?: TranslationOptions] : [params: TranslationParams[Key] & TranslationOptions] : [params?: TextParams & TranslationOptions] ): string;; (text: Text, params?: TextParams): string; }`