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

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

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/hls-audio.md DELETED Viewed

@@ -1,212 +0,0 @@
-# hls-audio
-Audio-only HLS element that plays the audio rendition of an HLS stream
-Audio-only HLS element that plays just the audio rendition of an HLS stream — even when the source is a mixed audio/video manifest. Useful for audio podcast players, background audio, and bandwidth-constrained contexts where downloading video data would be wasted. For full audio/video HLS playback, see [HlsVideo](./hls-video.md).
-## Import
-ts
-```
-import '@videojs/html/media/hls-audio';
-```
-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/hls-audio.js"></script>
-```
-## Examples
-### Basic Usage
-index.html
-index.css
-index.ts
-```
-<hls-audio class="hls-audio" src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" controls></hls-audio>
-```
-```
-.hls-audio {
-  width: 100%;
-  height: 54px;
-}
-```
-```
-import '@videojs/html/media/hls-audio';
-```
-## API Reference
-### Attributes
-Forwards these standard media attributes to the internal `<audio>`. See the [MDN media element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio): `autopictureinpicture``autoplay``controls``controlslist``crossorigin``disablepictureinpicture``disableremoteplayback``loading``loop``muted``playsinline``poster``preload``src`
-These Video.js-specific attributes configure media behavior:
-Attribute
-Type
-Default
-Details
-`stream-type`
-`MediaStreamType`
-`—`
-▸
-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.
-### Properties
-Property
-Type
-Default
-Details
-`alternativeMediaSuggestion`
-`string | undefined`
-`—`
-▸
-Description
-Read-only. A complete sentence naming the Media to reach for when this one can't play a source. Appended to the copy this adapter logs.
-Empty here, and overridden the same way as on the video adapter — see its note. `hls-audio` has no better-equipped sibling of its own; the Mux audio Media built on this engine does, and points at the hls.js-backed one.
-`contentData`
-`MediaContentData | undefined`
-`—`
-▸
-Description
-Read-only.
-`disableRemotePlayback`
-`boolean`
-`false`
-`engine`
-`{ state: StateSignals<HlsAudioEngineState>; context: ContextSignals<HlsAudioEngineContext>; destroy(): Promise<void> }`
-`—`
-▸
-Description
-Read-only. Underlying playback engine — the low-level SPF reactive composition that drives playback. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
-`error`
-`{ data?: unknown } | null`
-`—`
-▸
-Description
-Read-only. The current fatal error, or `null`. Only *fatal* conditions appear here — the engine reports non-fatal ones too, which stay in `engine.state.errors`. Resets per source. Fires `'error'` when set.
-`liveEdgeStart`
-`number`
-`—`
-▸
-Description
-Read-only.
-`preload`
-`'' | 'none' | 'metadata' | 'auto'`
-`''`
-▸
-Description
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-`src`
-`string`
-`''`
-`streamType`
-`MediaStreamType`
-`—`
-▸
-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.
-`targetLiveWindow`
-`number`
-`—`
-▸
-Description
-Read-only.
-Also exposes these properties from the native media API. See [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for details: `autoplay``buffered``controls``crossOrigin``currentSrc``currentTime``defaultMuted``defaultPlaybackRate``duration``ended``loop``muted``paused``playbackRate``played``readyState``remote``seekable``seeking``textTracks``title``volume`
-### Methods
-Supports these media methods. See [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement) for details: `addTextTrack``canPlayType``load``pause``play`
-### Events
-Re-dispatches these standard media events from the internal media element: `abort``addtrack``canplay``canplaythrough``change``contentdatachange``durationchange``emptied``ended``loadeddata``loadedmetadata``loadstart``pause``play``playing``progress``ratechange``removetrack``seeked``seeking``stalled``suspend``timeupdate``volumechange``waiting`
-Also emits these Video.js-specific events:
-Event
-Description
-`error`
-Fired when a fatal condition is reported. Read \`error\` for it. Parallel to \`HlsVideoMixin\` with one substantive difference: the underlying engine is the audio-only variant (\`createHlsAudioEngine\`), which omits video and text-track behaviors. The src / preload / disableRemotePlayback / play() contract per the WHATWG HTML spec is identical to the default adapter. Selecting this adapter is the variant decision: instantiating \`HlsAudioAdapterCore\` opts the consumer into audio-only delivery even when the source is a mixed-AV HLS manifest.

package/docs/reference/hls-background-video.md DELETED Viewed

@@ -1,100 +0,0 @@
-# hls-background-video
-HLS background video without controls, audio, captions, or adaptive quality
-HlsBackgroundVideo plays an HLS source through the SPF background engine. It is fixed to muted, autoplaying, inline, looped playback and omits controls, audio, text, DRM, and adaptive rendition switching.
-See [Add a background video](../how-to/add-a-background-video.md) for layout, poster, accessibility, and source-choice guidance.
-## Import
-ts
-```
-import '@videojs/html/media/hls-background-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/hls-background-video.js"></script>
-```
-## Source behavior
-`src` takes a complete HLS manifest URL. The engine starts loading when it receives the URL and pins the largest rendition that fits the screen. The ladder may be video-only, but its video renditions must use fMP4/CMAF. This engine does not include MPEG-TS transmuxing or DRM playback.
-html
-```
-<hls-background-video
-  src="https://media.example.com/hero.m3u8"
-  crossorigin
-></hls-background-video>
-```
-There is no `source` object, `preload` mode, or opt-out for muted, autoplay, and loop. Assigning a new `src` restarts playback from scratch.
-## API
-Member
-Platform
-Description
-`src`
-HTML and React
-HLS manifest URL
-`error`
-HTML
-Fatal SPF media error for the current source, or `null`
-`video`
-HTML
-Inner native `<video>` element
-`onError`
-React
-Fires on the rendered `<video>` when SPF reports a fatal source error
-`ref`
-React
-Ref to the rendered native `<video>` element
-The HTML element also fires an `error` event when `error` becomes fatal. The inner video’s own `error` can remain `null` because SPF, rather than the browser, rejected the source.
-## Styling
-Custom property
-Default
-Description
-`--media-object-fit`
-`inherit`
-How the video fits its box
-`--media-object-position`
-`50% 50%`
-Position of the video within its box
-Set an explicit size on the custom element or an author-owned wrapper.

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

@@ -1,339 +0,0 @@
-# hls-video
-Lightweight HLS video element with minimal bundle size
-The default HLS video element, optimized for minimal bundle size. [HlsJsVideo](./hlsjs-video.md) is the larger, more compatible alternative.
-## Import
-ts
-```
-import '@videojs/html/media/hls-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/hls-video.js"></script>
-```
-## Examples
-### Basic Usage
-index.html
-index.css
-index.ts
-```
-<media-container class="media-container">
-  <hls-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoplay muted playsinline loop></hls-video>
-</media-container>
-```
-```
-.media-container {
-  position: relative;
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-}
-```
-```
-import '@videojs/html/ui/container';
-import '@videojs/html/media/hls-video';
-```
-## API Reference
-### Attributes
-Forwards these standard media attributes to the internal `<video>`. See the [MDN media element reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video): `autopictureinpicture``autoplay``controls``controlslist``crossorigin``disablepictureinpicture``disableremoteplayback``loading``loop``muted``playsinline``poster``preload``src`
-These Video.js-specific attributes configure media behavior:
-Attribute
-Type
-Default
-Details
-`stream-type`
-`MediaStreamType`
-`"unknown"`
-▸
-Description
-The source's stream type — `'live'`, `'on-demand'`, or `'unknown'` until a media playlist has been parsed. Setting a non-`'unknown'` value pins a user override (detection stops updating it); setting `'unknown'` reverts to the engine's detected value.
-### Properties
-Property
-Type
-Default
-Details
-`alternativeMediaSuggestion`
-`string | undefined`
-`—`
-▸
-Description
-Read-only. A complete sentence naming the Media to reach for when this one can't play a source — `Try the hls.js-backed Mux media instead: import the hls-js flavor in place of the spf one.` Appended to the copy this adapter surfaces, and to the notices it logs. Name the flavor, not an import path: a Media is reached through several packages, each with its own counterpart.
-Empty here: `hls-video` has no better-equipped sibling to point at. A Media that does (a Mux Video built on this engine, whose hls.js-backed counterpart plays MPEG-TS and DRM) overrides this static, and its copy gains the second sentence with no other change.
-`contentData`
-`MediaContentData | undefined`
-`—`
-▸
-Description
-Read-only.
-`disableRemotePlayback`
-`boolean`
-`false`
-`engine`
-`{ state: StateSignals<HlsVideoEngineState>; context: ContextSignals<HlsVideoEngineContext>; destroy(): Promise<void> }`
-`—`
-▸
-Description
-Read-only. Underlying playback engine — the low-level SPF reactive composition that drives playback. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
-`error`
-`{ data?: unknown } | null`
-`—`
-▸
-Description
-Read-only. The current fatal error, or `null`. Only *fatal* conditions appear here — the engine reports non-fatal ones too (they stay in `engine.state.errors`), and promoting them would tell a consumer playback had failed when it hadn't. Resets per source. Fires `'error'` when set.
-`isFullscreen`
-`boolean`
-`—`
-▸
-Description
-Read-only.
-`isPictureInPicture`
-`boolean`
-`—`
-▸
-Description
-Read-only.
-`liveEdgeStart`
-`number`
-`—`
-▸
-Description
-Read-only. Presentation time marking the start of the live-edge window — playback at `currentTime >= liveEdgeStart` counts as "at the live edge" (the same target the engine's `seekToLiveEdge` seeks to: window end − HOLD-BACK). `NaN` when the stream isn't live or nothing is resolved yet. Derived at read time from the engine's live window — no change event; re-read on `timeupdate`/`progress` (as the store's live feature does).
-`preload`
-`'' | 'none' | 'metadata' | 'auto'`
-`''`
-▸
-Description
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-`src`
-`string`
-`''`
-`streamType`
-`MediaStreamType`
-`"unknown"`
-▸
-Description
-The source's stream type — `'live'`, `'on-demand'`, or `'unknown'` until a media playlist has been parsed. Setting a non-`'unknown'` value pins a user override (detection stops updating it); setting `'unknown'` reverts to the engine's detected value.
-`targetLiveWindow`
-`number`
-`—`
-▸
-Description
-Read-only. The target live window: `NaN` for on-demand (or unknown), `0` for standard sliding-window live, `Infinity` for DVR (`#EXT-X-PLAYLIST-TYPE:EVENT`). Fires `targetlivewindowchange` on change.
-`webkitCurrentPlaybackTargetIsWireless`
-`boolean | undefined`
-`—`
-▸
-Description
-Read-only.
-`webkitPresentationMode`
-`WebKitPresentationMode | undefined`
-`—`
-▸
-Description
-Read-only.
-`webkitSetPresentationMode`
-`((mode: WebKitPresentationMode) => void) | undefined`
-`—`
-▸
-Description
-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``duration``ended``loop``muted``paused``playbackRate``played``playsInline``poster``readyState``remote``seekable``seeking``textTracks``title``videoHeight``videoWidth``volume`
-### 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`
-### Events
-Re-dispatches these standard media events from the internal media element: `abort``addtrack``canplay``canplaythrough``change``contentdatachange``durationchange``emptied``ended``enterpictureinpicture``leavepictureinpicture``loadeddata``loadedmetadata``loadstart``pause``play``playing``progress``ratechange``removetrack``resize``seeked``seeking``stalled``suspend``timeupdate``volumechange``waiting`
-Also emits these Video.js-specific events:
-Event
-Description
-`error`
-Fired when a fatal condition is reported. Read \`error\` for it.
-`streamtypechange`
-Fired when the detected stream type changes. Read \`streamType\` for the new value.
-`targetlivewindowchange`
-Fired when the target live window changes. Read \`targetLiveWindow\` for the new value.
-### CSS custom properties
-Variable
-Details
-`--media-video-border-radius`
-▸
-Description
-Border radius of the video element.
-`--media-object-fit`
-▸
-Description
-Object fit for the video.
-`--media-object-position`
-▸
-Description
-Object position for the video.
-`--media-caption-track-duration`
-▸
-Description
-Duration of the caption track transition.
-`--media-caption-track-delay`
-▸
-Description
-Delay before the caption track transition.
-`--media-caption-track-y`
-▸
-Description
-Vertical offset of the caption track.