Media session

The Flowplayer Native media session plugin (media-session) connects the player to the browser Media Session API. It shows title and artwork of the current video in the operating system's media controls (for example on the lock screen, in notifications or in the browser's media hub) and lets viewers control playback with hardware media keys and these system controls.

Table of contents

Prerequisites

  • A browser that supports the Media Session API. In browsers without support the plugin does nothing.

Installation

Load the plugin next to the core player:

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/media-session.min.js"></script>

Player and plugins exist in different release versions. Please see the release channel documentation.

OVP managed player

To enable the plugin in an OVP JavaScript (ESM) embed, import the plugin's ESM module after the embed module and register it with flowplayer(mediaSession) before you create the player:

<div id="player-<media id>"></div>
<script type="module">
  import flowplayer from "https://embed.flowplayer.com/<player id>/<media id>.js";
  import mediaSession from "https://cdn.flowplayer.com/releases/native/3/stable/esm/plugins/media-session.min.js";

  flowplayer(mediaSession);
  flowplayer("#player-<media id>", {});
</script>

Load the plugin from the same release channel or version as the player.

Configuration

The plugin works without configuration. By default, it uses the player's title and poster configuration as media metadata.

    • property
    • description
    • media_session object
    • Media metadata shown in the system media controls. Accepts the properties of the MediaMetadata constructor: title, artist, album and artwork. If title is not set, the player's title is used. If artwork is not set, the player's poster is used.
    • seek_step number
    • Number of seconds to skip when the viewer uses the seek backward / seek forward controls. Default: 5.
    • seekable boolean
    • Core player option. If set to false, the plugin does not register any seek controls.

Example

flowplayer("#player_container", {
  src: "https://some.domain.com/pathto/media.m3u8",
  title: "My video",
  poster: "https://some.domain.com/pathto/poster.jpg",
  media_session: {
    title: "My video",
    artist: "ACME Studios",
    album: "Season 1",
    artwork: [
      { src: "https://some.domain.com/pathto/artwork-512.png", sizes: "512x512", type: "image/png" },
      { src: "https://some.domain.com/pathto/artwork-256.png", sizes: "256x256", type: "image/png" }
    ]
  },
  seek_step: 10
})

Supported actions

The plugin registers handlers for the following media session actions:

    • action
    • behavior
    • play / pause
    • Toggles playback.
    • seekbackward / seekforward
    • Seeks backward / forward by seek_step seconds. Seeking forward is not available while the player is disabled.
    • seekto
    • Seeks to the position selected in the system controls, for example on a lock screen progress bar. Seeking forward is ignored while the player is disabled.
    • previoustrack / nexttrack
    • Plays the previous / next video. Only available with the playlist plugin.

Seek actions are not registered for live streams without DVR, or when seekable is false.

The plugin also keeps the playback position, duration, playback rate and playback state of the system controls up to date.

Multiple players and playlists

The browser supports only one media session per page. If several players are on the page, the player that most recently started loading, started playing or entered fullscreen controls the media session.

With the playlist plugin, the metadata is updated from the configuration of the next playlist item when the playlist advances.

Results