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

@videojs/html 10.0.0-rc.1 → 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 (2259) hide show

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

@@ -1,1047 +0,0 @@
-# hlsjs-video
-HLS video element powered by hls.js for adaptive bitrate streaming
-HLS video element powered by [hls.js](https://github.com/video-dev/hls.js/) for adaptive bitrate streaming, with full feature support across every browser. It’s more compatible than the default [HlsVideo](./hls-video.md), which is smaller and covers most HLS playback. For browser-native playback, see [NativeHlsVideo](./native-hls-video.md).
-## Import
-bash
-```
-pnpm add @videojs/hlsjs-video
-```
-ts
-```
-import '@videojs/html/media/hlsjs-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.1/media/hlsjs-video.js"></script>
-```
-## Examples
-### Basic Usage
-index.html
-index.css
-index.ts
-```
-<media-container class="media-container">
-  <hlsjs-video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8" autoplay muted playsinline loop></hlsjs-video>
-</media-container>
-```
-```
-.media-container {
-  position: relative;
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-}
-```
-```
-import '@videojs/html/ui/container';
-import '@videojs/html/media/hlsjs-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
-Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
-### Properties
-Property
-Type
-Default
-Details
-`audioRenditions`
-`AudioRenditionListLike | undefined`
-`—`
-▸
-Description
-Read-only. Selectable audio variants, populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
-`audioTracks`
-`AudioTrackListLike | undefined`
-`—`
-▸
-Description
-Read-only. Populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
-`contentData`
-`MediaContentData | undefined`
-`—`
-▸
-Description
-Read-only.
-`disableRemotePlayback`
-`unknown`
-`false`
-▸
-Description
-Whether remote playback (AirPlay, Google Cast) is disabled for this media.
-`engine`
-`Hls | null`
-`—`
-▸
-Description
-Read-only. Underlying playback engine — the hls.js `Hls` instance when playing via MSE, otherwise `null`. An advanced escape hatch for direct engine access; normal playback is driven through this element's own properties and methods.
-`error`
-`MediaError | null`
-`—`
-▸
-Description
-Read-only.
-`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.
-Derived from the delegate on every read; `NaN` when no delegate is attached or the stream is not live.
-`preload`
-`MediaPreloadType`
-`'metadata'`
-▸
-Description
-Preload type (`'none'` / `'metadata'` / `'auto'`).
-`source`
-`{ src?: string; type?: SourceType; preferPlayback?: PlaybackType; drm?: DrmSystemsConfig; maxAutoResolution?: MediaResolution; capRenditionToPlayerSize?: boolean; minAutoResolution?: MediaResolution; engine?: HlsEngineConfig } | null`
-`null`
-▸
-Description
-Structured source: what to play (`src`, an optional `type`) plus how to play it (`preferPlayback`, `engine`). Assigning it derives `src`.
-Sources are compared structurally, so reassigning an equivalent object — an inline React prop, for instance — is a no-op. Only a change to the engine options (or to the resolved content type) recreates the playback engine.
-`src`
-`string`
-`''`
-▸
-Description
-Media source URL. Assigning it replaces the identity half of `source` and leaves `type` and the engine options intact, so changing the URL never disturbs engine configuration.
-`streamType`
-`MediaStreamType`
-`"unknown"`
-▸
-Description
-Current stream type (`'on-demand'` / `'live'` / `'unknown'`).
-`targetLiveWindow`
-`number`
-`—`
-▸
-Description
-Read-only. Seekable range size for live content. `0` for standard live, `Infinity` for DVR, `NaN` for on-demand or unknown. Fires `targetlivewindowchange` when the value changes (bridged from the delegate).
-`videoRenditions`
-`VideoRenditionListLike | undefined`
-`—`
-▸
-Description
-Read-only. Selectable quality levels, populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
-`videoTracks`
-`VideoTrackListLike | undefined`
-`—`
-▸
-Description
-Read-only. Populated only while the hls.js (MSE) engine is active; otherwise `undefined`.
-`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`
-### Engine options
-#### `source.engine.hlsJs`
-Pass hls.js’s own configuration here. It’s handed to hls.js untouched, so every option in its [config reference](https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning) works, spelled the way hls.js spells it. [Media Sources](../concepts/media-sources.md) covers how engine options fit into a structured source.
-The names and types below come from hls.js’s own type definitions, so they tell you what exists and what shape it takes. hls.js documents what each one does; the descriptions are theirs to write, and most are blank here because its types carry none.
-ts
-```
-const video = document.querySelector('hlsjs-video');
-video.source = {
-  src: 'https://example.com/playlist.m3u8',
-  engine: { hlsJs: { maxBufferLength: 30, lowLatencyMode: true } },
-};
-```
-Option
-Type
-Details
-`abrBandWidthFactor`
-`number | undefined`
-`abrBandWidthUpFactor`
-`number | undefined`
-`abrController`
-`typeof AbrController | undefined`
-`abrEwmaDefaultEstimate`
-`number | undefined`
-▸
-Description
-Default bandwidth estimate in bits/s prior to collecting fragment bandwidth samples
-`abrEwmaDefaultEstimateMax`
-`number | undefined`
-`abrEwmaFastLive`
-`number | undefined`
-`abrEwmaFastVoD`
-`number | undefined`
-`abrEwmaSlowLive`
-`number | undefined`
-`abrEwmaSlowVoD`
-`number | undefined`
-`abrMaxWithRealBitrate`
-`boolean | undefined`
-`appendErrorMaxRetry`
-`number | undefined`
-`assetPlayerId`
-`string | undefined`
-`audioPreference`
-`AudioSelectionOption | undefined`
-`audioStreamController`
-`typeof AudioStreamController | undefined`
-`audioTrackController`
-`typeof AudioTrackController | undefined`
-`autoStartLoad`
-`boolean | undefined`
-`backBufferLength`
-`number | undefined`
-`bufferController`
-`typeof BufferController | undefined`
-`capLevelController`
-`typeof CapLevelController | undefined`
-`capLevelOnFPSDrop`
-`boolean | undefined`
-`capLevelToPlayerSize`
-`boolean | undefined`
-`captionsTextTrack1Label`
-`string | undefined`
-`captionsTextTrack1LanguageCode`
-`string | undefined`
-`captionsTextTrack2Label`
-`string | undefined`
-`captionsTextTrack2LanguageCode`
-`string | undefined`
-`captionsTextTrack3Label`
-`string | undefined`
-`captionsTextTrack3LanguageCode`
-`string | undefined`
-`captionsTextTrack4Label`
-`string | undefined`
-`captionsTextTrack4LanguageCode`
-`string | undefined`
-`certLoadPolicy`
-`LoadPolicy | undefined`
-`cmcd`
-`CMCDControllerConfig | undefined`
-`cmcdController`
-`typeof CMCDController | undefined`
-`contentSteeringController`
-`typeof ContentSteeringController | un...`
-▸
-Type
-`typeof ContentSteeringController | undefined`
-`cueHandler`
-`CuesInterface | undefined`
-`debug`
-`boolean | ILogger | undefined`
-`defaultAudioCodec`
-`string | undefined`
-`detectStallWithCurrentTimeMs`
-`number | undefined`
-`drmSystemOptions`
-`DRMSystemOptions | undefined`
-`drmSystems`
-`DRMSystemsConfiguration | undefined`
-`emeController`
-`typeof EMEController | undefined`
-`emeEnabled`
-`boolean | undefined`
-`enableCEA708Captions`
-`boolean | undefined`
-`enableDateRangeMetadataCues`
-`boolean | undefined`
-`enableEmsgKLVMetadata`
-`boolean | undefined`
-`enableEmsgMetadataCues`
-`boolean | undefined`
-`enableID3MetadataCues`
-`boolean | undefined`
-`enableIMSC1`
-`boolean | undefined`
-`enableInterstitialPlayback`
-`boolean | undefined`
-`enableSoftwareAES`
-`boolean | undefined`
-`enableWebVTT`
-`boolean | undefined`
-`enableWorker`
-`boolean | undefined`
-`errorController`
-`typeof ErrorController | undefined`
-`fetchSetup`
-`Request) | undefined | function`
-▸
-Type
-`((context: LoaderContext, initParams: any) => Promise<Request> | Request) | undefined`
-`fLoader`
-`FragmentLoaderConstructor | undefined`
-`forceKeyFrameOnDiscontinuity`
-`boolean | undefined`
-`fpsController`
-`typeof FPSController | undefined`
-`fpsDroppedMonitoringPeriod`
-`number | undefined`
-`fpsDroppedMonitoringThreshold`
-`number | undefined`
-`fragLoadingMaxRetry`
-`number | undefined`
-`fragLoadingMaxRetryTimeout`
-`number | undefined`
-`fragLoadingRetryDelay`
-`number | undefined`
-`fragLoadingTimeOut`
-`number | undefined`
-`fragLoadPolicy`
-`LoadPolicy | undefined`
-`frontBufferFlushThreshold`
-`number | undefined`
-`highBufferWatchdogPeriod`
-`number | undefined`
-`ignoreDevicePixelRatio`
-`boolean | undefined`
-`ignorePlaylistParsingErrors`
-`boolean | undefined`
-`initialLiveManifestSize`
-`number | undefined`
-`interstitialAppendInPlace`
-`boolean | undefined`
-`interstitialAssetListLoadPolicy`
-`LoadPolicy | undefined`
-`interstitialLiveLookAhead`
-`number | undefined`
-`interstitialsController`
-`typeof InterstitialsController | unde...`
-▸
-Type
-`typeof InterstitialsController | undefined`
-`keyLoadPolicy`
-`LoadPolicy | undefined`
-`levelLoadingMaxRetry`
-`number | undefined`
-`levelLoadingMaxRetryTimeout`
-`number | undefined`
-`levelLoadingRetryDelay`
-`number | undefined`
-`levelLoadingTimeOut`
-`number | undefined`
-`licenseResponseCallback`
-`undefined | function`
-▸
-Type
-`((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext) => ArrayBuffer) | undefined`
-`licenseXhrSetup`
-`Uint8Array | Promise<Uint8Array | void>) | undefined | function`
-▸
-Type
-`((this: Hls, xhr: XMLHttpRequest, url: string, keyContext: MediaKeySessionContext, licenseChallenge: Uint8Array) => void | Uint8Array | Promise<Uint8Array | void>) | undefined`
-`liveBackBufferLength`
-`number | null | undefined`
-`liveDurationInfinity`
-`boolean | undefined`
-`liveMaxLatencyDuration`
-`number | undefined`
-`liveMaxLatencyDurationCount`
-`number | undefined`
-`liveSyncDuration`
-`number | undefined`
-`liveSyncDurationCount`
-`number | undefined`
-`liveSyncMode`
-`'edge' | 'buffered' | undefined`
-`liveSyncOnStallIncrease`
-`number | undefined`
-`loader`
-`object`
-▸
-Type
-`{ new (confg: HlsConfig): Loader<LoaderContext>; } | undefined`
-`lowLatencyMode`
-`boolean | undefined`
-`manifestLoadingMaxRetry`
-`number | undefined`
-`manifestLoadingMaxRetryTimeout`
-`number | undefined`
-`manifestLoadingRetryDelay`
-`number | undefined`
-`manifestLoadingTimeOut`
-`number | undefined`
-`manifestLoadPolicy`
-`LoadPolicy | undefined`
-`maxAudioFramesDrift`
-`number | undefined`
-`maxBufferHole`
-`number | undefined`
-`maxBufferLength`
-`number | undefined`
-`maxBufferSize`
-`number | undefined`
-`maxDevicePixelRatio`
-`number | undefined`
-`maxFragLookUpTolerance`
-`number | undefined`
-`maxLiveSyncPlaybackRate`
-`number | undefined`
-`maxLoadingDelay`
-`number | undefined`
-`maxMaxBufferLength`
-`number | undefined`
-`maxStarvationDelay`
-`number | undefined`
-`minAutoBitrate`
-`number | undefined`
-`nudgeMaxRetry`
-`number | undefined`
-`nudgeOffset`
-`number | undefined`
-`nudgeOnVideoHole`
-`boolean | undefined`
-`playlistLoadPolicy`
-`LoadPolicy | undefined`
-`pLoader`
-`PlaylistLoaderConstructor | undefined`
-`preferManagedMediaSource`
-`boolean | undefined`
-`preserveManualLevelOnError`
-`boolean | undefined`
-`primarySessionId`
-`string | undefined`
-`progressive`
-`boolean | undefined`
-`renderTextTracksNatively`
-`boolean | undefined`
-`requestMediaKeySystemAccessFunc`
-`MediaKeyFunc | null | undefined`
-`requireKeySystemAccessOnStart`
-`boolean | undefined`
-`startFragPrefetch`
-`boolean | undefined`
-`startLevel`
-`number | undefined`
-`startOnSegmentBoundary`
-`boolean | undefined`
-`startPosition`
-`number | undefined`
-`steeringManifestLoadPolicy`
-`LoadPolicy | undefined`
-`stretchShortVideoTrack`
-`boolean | undefined`
-`subtitlePreference`
-`SubtitleSelectionOption | undefined`
-`subtitleStreamController`
-`typeof SubtitleStreamController | und...`
-▸
-Type
-`typeof SubtitleStreamController | undefined`
-`subtitleTrackController`
-`typeof SubtitleTrackController | unde...`
-▸
-Type
-`typeof SubtitleTrackController | undefined`
-`testBandwidth`
-`boolean | undefined`
-`timelineController`
-`typeof TimelineController | undefined`
-`timelineOffset`
-`number | undefined`
-`useMediaCapabilities`
-`boolean | undefined`
-`videoPreference`
-`VideoSelectionOption | undefined`
-`widevineLicenseUrl`
-`string | undefined`
-`workerPath`
-`string | null | undefined`
-`xhrSetup`
-`void) | undefined | function`
-▸
-Type
-`((xhr: XMLHttpRequest, url: string) => Promise<void> | void) | undefined`
-#### `source.engine.nativeHls`
-When playback falls back to the browser’s own HLS, hls.js isn’t involved and its options don’t apply. This configures that path instead.
-Option
-Type
-Details
-`drmSystems`
-`DrmSystemsConfig | undefined`
-▸
-Description
-License servers for protected content, keyed by EME key system id. An escape hatch for licensing native playback differently from every other path: naming it replaces `source.drm` here, and nowhere else.
-### Methods
-Supports these media methods. See [HTMLVideoElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement) for details: `addTextTrack``applyRenditionCaps``canPlayType``createNativeDelegate``engineConfigKey``engineDestroy``exitFullscreen``exitPictureInPicture``load``pause``play``requestFullscreen``requestLoad``requestPictureInPicture``shouldEngineUpdate`
-### Events
-Re-dispatches these standard media events from the internal media element: `abort``addtrack``canplay``canplaythrough``change``contentdatachange``durationchange``emptied``ended``enterpictureinpicture``error``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
-`sourcechange`
-Fired when \`source\` changes, either directly or by resolving a new \`src\`. Read \`source\` for the new value.
-`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.