diff --git a/README.md b/README.md index d2730833..67925aaf 100644 --- a/README.md +++ b/README.md @@ -413,6 +413,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke | `vimeo` | Object | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }` | See [Vimeo embed options](https://github.com/vimeo/player.js/#embed-options). Some are set automatically based on other config options, namely: `loop`, `autoplay`, `muted`, `gesture`, `playsinline` | | `youtube` | Object | `{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }` | See [YouTube embed options](https://developers.google.com/youtube/player_parameters#Parameters). The only custom option is `noCookie` to use an alternative to YouTube that doesn't use cookies (useful for GDPR, etc). Some are set automatically based on other config options, namely: `autoplay`, `hl`, `controls`, `disablekb`, `playsinline`, `cc_load_policy`, `cc_lang_pref`, `widget_referrer` | | `previewThumbnails` | Object | `{ enabled: false, src: '' }` | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src` must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below. | +| `mediaMetadata` | Object | `{ title: '', artist: '', album: '', artwork: [] }` | The [MediaMetadata](https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata) interface of the Media Session API allows a web page to provide rich media metadata for display in a platform UI. | 1. Vimeo only 2. Autoplay is generally not recommended as it is seen as a negative user experience. It is also disabled in many browsers. Before raising issues, do your homework. More info can be found here: diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index ff0637e5..1e71c0c5 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -65,6 +65,17 @@ import toggleClass from './toggle-class'; // Prevent Vimeo blocking plyr.io demo site referrerPolicy: 'no-referrer', }, + mediaMetadata: { + title: 'View From A Blue Moon', + album: 'Sports', + artist: 'Brainfarm', + artwork: [ + { + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', + type: 'image/jpeg', + }, + ], + }, markers: { enabled: true, points: [ diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index 582a4151..6d3d7712 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -446,7 +446,15 @@ const defaults = { noCookie: false, // Whether to use an alternative version of YouTube without cookies }, - // markers + // Media Metadata + mediaMetadata: { + title: '', + artist: '', + album: '', + artwork: [], + }, + + // Markers markers: { enabled: false, points: [], diff --git a/src/js/controls.js b/src/js/controls.js index 35b27200..38cd5568 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -1749,6 +1749,23 @@ const controls = { }); } }, + + // Set media metadata + setMediaMetadata() { + try { + if ('mediaSession' in navigator) { + navigator.mediaSession.metadata = new window.MediaMetadata({ + title: this.config.mediaMetadata.title, + artist: this.config.mediaMetadata.artist, + album: this.config.mediaMetadata.album, + artwork: this.config.mediaMetadata.artwork, + }); + } + // eslint-disable-next-line no-empty + } catch (e) {} + }, + + // Add markers setMarkers() { if (this.duration > 0 && !this.elements.markers) { const { points } = this.config.markers; diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts index cf45f1ae..b0659ff4 100644 --- a/src/js/plyr.d.ts +++ b/src/js/plyr.d.ts @@ -518,6 +518,11 @@ declare namespace Plyr { * Preview Thumbnails Options. */ previewThumbnails?: PreviewThumbnailsOptions; + + /** + * Media Metadata Options. + */ + mediaMetadata?: MediaMetadataOptions; } interface QualityOptions { @@ -576,6 +581,19 @@ declare namespace Plyr { src?: string | string[]; } + interface MediaMetadataArtwork { + src: string; + sizes?: string; + type: string; + } + + interface MediaMetadataOptions { + title?: string; + artist?: string; + album?: string; + artwork?: MediaMetadataArtwork[]; + } + export interface Elements { buttons: { airplay?: HTMLButtonElement; diff --git a/src/js/ui.js b/src/js/ui.js index b674c70d..31eadf29 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -125,6 +125,11 @@ const ui = { if (this.config.duration) { controls.durationUpdate.call(this); } + + // Media metadata + if (this.config.mediaMetadata) { + controls.setMediaMetadata.call(this); + } }, // Setup aria attribute for play and iframe title