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

package/docs/reference/youtube-video.md

@@ -0,0 +1,573 @@
+# youtube-video
+
+Video component that plays YouTube videos and playlists through the YouTube IFrame player
+
+Video component that plays YouTube videos and playlists through the [YouTube IFrame player](https://developers.google.com/youtube/iframe_api_reference). YouTube’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 YouTube’s UI instead.
+
+## Load a source
+
+`src` takes a YouTube URL or a raw 11-character video id. Watch, share (`youtu.be`), embed, Shorts, live, and privacy-enhanced (`youtube-nocookie.com`) URLs all work. Playlist URLs load through their `list` parameter, and a `t` parameter sets the start position.
+
+html
+
+```
+<youtube-video src="https://www.youtube.com/watch?v=aqz-KE-bpKQ"></youtube-video>
+```
+
+## Behavior
+
+A few things work differently from a native `<video>` element, because the IFrame API doesn’t expose them:
+
+*   `loop` restarts playback when the video ends; the IFrame API has no single-video loop.
+*   Fullscreen targets the iframe, so YouTube’s own chrome shows in fullscreen.
+*   Picture-in-picture is unavailable, and the player reports it as unsupported.
+*   Caption tracks appear in `textTracks` once playback starts; YouTube reports no caption metadata before then.
+
+## Examples
+
+### Basic Usage
+
+index.html
+
+index.css
+
+index.ts
+
+```
+<youtube-video
+    class="youtube-video"
+    src="https://www.youtube.com/watch?v=aqz-KE-bpKQ"
+    controls
+></youtube-video>
+```
+```
+.youtube-video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+```
+import '@videojs/html/media/youtube-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`
+
+`YouTubePlayerApi | null`
+
+`—`
+
+▸
+
+Description
+
+Read-only. Underlying YouTube iframe API player instance (null until the API 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`
+
+`YouTubeSource | null`
+
+`—`
+
+▸
+
+Description
+
+YouTube URL or id in `src`, plus player parameters under `engine.youtube`. Replacing it re-derives `src`.
+
+`src`
+
+`string`
+
+`—`
+
+`textTracks`
+
+`TextTrackListLike`
+
+`—`
+
+▸
+
+Description
+
+Read-only.
+
+`volume`
+
+`number`
+
+`—`
+
+### Engine options
+
+#### `source.engine.youtube`
+
+Pass [YouTube player parameters](https://developers.google.com/youtube/player_parameters) under `source.engine.youtube`, spelled exactly as YouTube spells them. 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.
+
+`autoplay`, `controls`, and `playsinline` come from the props of the same name, so they have no `engine.youtube` spelling. Parameters YouTube has deprecated are absent as well: `modestbranding`, `showinfo`, `autohide`, `theme`, and `listType: 'search'`. Anything YouTube adds next passes through the same way.
+
+ts
+
+```
+const video = document.querySelector('youtube-video');
+video.source = {
+  src: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ',
+  engine: { youtube: { hl: 'de', cc_load_policy: 1 } },
+};
+```
+
+Option
+
+Type
+
+Details
+
+`cc_lang_pref`
+
+`string`
+
+▸
+
+Description
+
+ISO 639-1 language to display captions in. Pair with `cc_load_policy`.
+
+`cc_load_policy`
+
+`1`
+
+▸
+
+Description
+
+Show closed captions by default, even if the viewer has turned them off.
+
+`color`
+
+`"red" | "white"`
+
+▸
+
+Description
+
+Progress-bar highlight color. Defaults to `'red'`.
+
+`disablekb`
+
+`0 | 1`
+
+▸
+
+Description
+
+Stop responding to keyboard controls. Defaults to `0`.
+
+`enablejsapi`
+
+`0 | 1`
+
+▸
+
+Description
+
+Allow the player to be driven through the IFrame Player API. Defaults to `0`.
+
+`end`
+
+`number`
+
+▸
+
+Description
+
+Stop playback this many seconds from the start of the video.
+
+`fs`
+
+`0 | 1`
+
+▸
+
+Description
+
+Display the fullscreen button. Defaults to `1`.
+
+`hl`
+
+`string`
+
+▸
+
+Description
+
+Player interface language: an ISO 639-1 code or full locale (`fr`, `fr-ca`).
+
+`iv_load_policy`
+
+`1 | 3`
+
+▸
+
+Description
+
+Show video annotations (`1`) or hide them (`3`). Defaults to `1`.
+
+`list`
+
+`string`
+
+▸
+
+Description
+
+Playlist id (prefixed with `PL`) or channel name, depending on `listType`.
+
+`listType`
+
+`"playlist" | "user_uploads"`
+
+▸
+
+Description
+
+What `list` refers to.
+
+`loop`
+
+`0 | 1`
+
+▸
+
+Description
+
+Repeat playback. Looping a single video also needs `playlist` set to the same id.
+
+`origin`
+
+`string`
+
+▸
+
+Description
+
+Embedding domain. Set it whenever `enablejsapi` is `1`.
+
+`playlist`
+
+`string`
+
+▸
+
+Description
+
+Comma-separated video ids to play after the one named by the URL path.
+
+`referrerPolicy`
+
+`ReferrerPolicy`
+
+▸
+
+Description
+
+`referrerpolicy` for the embed iframe. Not a YouTube player parameter.
+
+`rel`
+
+`0 | 1`
+
+▸
+
+Description
+
+Draw related videos from the same channel (`0`) or anywhere (`1`). Defaults to `1`.
+
+`start`
+
+`number`
+
+▸
+
+Description
+
+Begin playback this many seconds from the start of the video.
+
+`widget_referrer`
+
+`string`
+
+▸
+
+Description
+
+Embedding URL reported to YouTube Analytics for widget-hosted players.
+
+### Methods
+
+Supports these media methods: `exitFullscreen``load``pause``play``requestFullscreen`
+
+### Events
+
+Implements these standard media events through the embedded player: `durationchange``emptied``ended``error``loadedmetadata``loadstart``pause``play``playing``progress``ratechange``seeked``seeking``timeupdate``volumechange``waiting`
+
+Also emits these Video.js-specific events:
+
+Event
+
+Description
+
+`loadcomplete`
+
+`sourcechange`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "10.0.0-beta.30",
+  "version": "10.0.0-beta.31",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -165,12 +165,12 @@
     }
   },
   "dependencies": {
-    "@videojs/element": "10.0.0-beta.30",
-    "@videojs/core": "10.0.0-beta.30",
-    "@videojs/media": "10.0.0-beta.30",
-    "@videojs/store": "10.0.0-beta.30",
-    "@videojs/utils": "10.0.0-beta.30",
-    "@videojs/spf": "10.0.0-beta.30"
+    "@videojs/core": "10.0.0-beta.31",
+    "@videojs/element": "10.0.0-beta.31",
+    "@videojs/spf": "10.0.0-beta.31",
+    "@videojs/utils": "10.0.0-beta.31",
+    "@videojs/store": "10.0.0-beta.31",
+    "@videojs/media": "10.0.0-beta.31"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
@@ -180,8 +180,8 @@
     "typescript": "^6.0.2",
     "vitest": "^4.1.10",
     "vjsc": "0.0.0",
-    "@videojs/skins": "10.0.0-beta.30",
-    "@videojs/icons": "10.0.0-beta.30"
+    "@videojs/skins": "10.0.0-beta.31",
+    "@videojs/icons": "10.0.0-beta.31"
   },
   "publishConfig": {
     "access": "public"

package/cdn/audio-headless.dev.js

@@ -1 +0,0 @@
-import "./player-DMP2pc3L.js";

package/cdn/audio-headless.js

@@ -1 +0,0 @@
-import"./player-CngT-cVQ.js";