feat: Add mediasession support

sandbox/load-media.html.example

@@ -19,7 +19,9 @@
 
   <script>
     var vid = document.getElementById('vid1');
-    var player = videojs(vid);
+    var player = videojs(vid, {
+      mediaSession: true
+    });
 
     player.log('window.player created', player);
 

src/js/mediasession.js

@@ -0,0 +1,132 @@
+import window from 'global/window';
+import {getMimetype} from './utils/mimetypes';
+
+/**
+ * @method initMediaSession Sets up media session if supported and configured
+ * @this { import('./player').default } Player
+ */
+export const initMediaSession = function() {
+  if (!this.options_.mediaSession || !('mediaSession' in window.navigator)) {
+    return;
+  }
+  const ms = window.navigator.mediaSession;
+  const defaultSkipTime = 15;
+
+  const actionHandlers = [
+    ['play', () => {
+      this.play();
+    }],
+    ['pause', () => {
+      this.pause();
+    }],
+    ['stop', () => {
+      this.pause();
+      this.currentTime(0);
+    }],
+    // videojs-contrib-ads
+    ['seekbackward', (details) => {
+      if (this.usingPlugin('ads') && this.ads.inAdBreak()) {
+        return;
+      }
+      this.currentTime(Math.max(0, this.currentTime() - (details.skipOffset || defaultSkipTime)));
+    }],
+    ['seekforward', (details) => {
+      if (this.usingPlugin('ads') && this.ads.inAdBreak()) {
+        return;
+      }
+      this.currentTime(Math.min(this.duration(), this.currentTime() + (details.skipOffset || defaultSkipTime)));
+    }],
+    ['seekto', (details) => {
+      if (this.usingPlugin('ads') && this.ads.inAdBreak()) {
+        return;
+      }
+      this.currentTime(details.seekTime);
+    }]
+  ];
+
+  // Using Google's recommendation that expects some handler may not be settable, especially as we
+  // want to support older Chrome
+  // https://web.dev/media-session/#let-users-control-whats-playing
+  for (const [action, handler] of actionHandlers) {
+    try {
+      ms.setActionHandler(action, handler);
+    } catch (error) {
+      this.log.debug(`Couldn't register media session action "${action}".`);
+    }
+  }
+
+  const setUpMediaSessionPlaylist = () => {
+    try {
+      ms.setActionHandler('previoustrack', () => {
+        this.playlist.previous();
+      });
+      ms.setActionHandler('nexttrack', () => {
+        this.playlist.next();
+      });
+    } catch (error) {
+      this.log.debug('Couldn\'t register playlist media session actions.');
+    }
+  };
+
+  // Only setup playlist handlers if / when playlist plugin is present
+  this.on('pluginsetup:playlist', setUpMediaSessionPlaylist);
+
+  /**
+   *
+   * Updates the mediaSession metadata. Fires `updatemediasession` as an
+   * opportunity to modify the metadata
+   *
+   * @fires Player#updatemediasession
+   */
+  const updateMediaSession = () => {
+    const currentMedia = this.getMedia();
+    const playlistItem = this.usingPlugin('playlist') ? Object.assign({}, this.playlist()[this.playlist.currentItem()]) : {};
+    const mediaSessionData = {
+      title: currentMedia.title || playlistItem.name || '',
+      artist: currentMedia.artist || playlistItem.artist || '',
+      album: currentMedia.album || playlistItem.album || ''
+    };
+
+    if (currentMedia.artwork) {
+      mediaSessionData.artwork = currentMedia.artwork;
+    } else if (playlistItem.artwork) {
+      mediaSessionData.artwork = playlistItem.artwork;
+    } else if (this.poster()) {
+      mediaSessionData.artwork = [{
+        src: this.poster(),
+        type: getMimetype(this.poster())
+      }];
+    }
+
+    // This allows the metadata to be updated before being set, e.g. if loadMedia() is not used.
+    this.trigger('updatemediasession', mediaSessionData);
+
+    ms.metadata = new window.MediaMetadata(mediaSessionData);
+  };
+
+  const updatePositionState = () => {
+    const dur = parseFloat(this.duration());
+
+    if (Number.isFinite(dur)) {
+      ms.setPositionState({
+        duration: dur,
+        playbackRate: this.playbackRate(),
+        position: this.currentTime()
+      });
+    }
+  };
+
+  this.on('playing', () => {
+    // Called on each `playing` rather than `sourceset`, in case of multiple players on a page
+    updateMediaSession();
+    ms.playbackState = 'playing';
+  });
+
+  this.on('paused', () => {
+    ms.playbackState = 'paused';
+  });
+
+  if ('setPositionState' in ms) {
+    this.on('timeupdate', updatePositionState);
+  }
+};

src/js/player.js

@@ -35,6 +35,7 @@ import {getMimetype, findMimetype} from './utils/mimetypes';
 import {hooks} from './utils/hooks';
 import {isObject} from './utils/obj';
 import keycode from 'keycode';
+import { initMediaSession } from './mediasession.js';
 import icons from '../images/icons.svg';
 
 // The following imports are used only to ensure that the corresponding modules
@@ -603,6 +604,10 @@ class Player extends Component {
       this.audioPosterMode(this.options_.audioPosterMode);
       this.audioOnlyMode(this.options_.audioOnlyMode);
     });
+
+    // Set up media session if supported
+    initMediaSession.call(this);
+
   }
 
   /**