Skip to main content

Player

The Files Gallery custom media player offers a unified design for video, audio and embedded videos that matches the style and theme of Files Gallery.

Video Demo Audio Demo Embed Demo

Plyr.io

The custom player interface is built with plyr.io. You can disable the custom interface and/or customize other options for the player from Javascript config options.

Options​

The media player can be enabled and configured from Javascript config.

_c.config = {

  // config options merge with plyr options https://github.com/sampotts/plyr?tab=readme-ov-file#options
  player: {

    // default config affects the player for video, audio, and embed (Youtube and Vimeo)
    default: {
      enabled: true, // enable custom video player / set to false to use native browser player
      autoplay: true, // autoplay true
      //controls: this.controls, // custom controls, avoid
      autoplay_next: true, // autoplay next modal item on end
      autoplay_next_media_only: false, // autplay next modal item only if next item is media (audio/video/embed)
    },

    // if you want to apply specific options for video player only
    video: {},

    // if you want to apply specific options for audio player only
    audio: {},

    // if you want to apply specific options for the Embed player (Youtube and Vimeo) only
    embed: {},
  }
}

HLS (HTTP Live Streaming) M3U8​

Files Gallery allows playing remote m3u8 playlist files by adding links in url shortcut files. See demo examples Big Buck Bunny and Skate Phantom Flex.

Create filename.url and open it in a text editor:

[InternetShortcut]
URL=https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8

Remote video files​

You can also play remote video files by adding full link paths to external videos in url shortcut files. See demo example Sintel.

Create filename.url and open it in a text editor:

[InternetShortcut]
URL=https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4

Video thumbnails​

Files Gallery will automatically create thumbnails from videos if you have FFmpeg installed and available on your server (see documentation). If your server doesn't have FFmpeg and you can't install it, you have the option to manually create custom preview images for videos.

Audio album cover art​

Files Gallery will attempt to load album artwork for audio tracks that contain embedded pictures (see demo). This can be disabled from the mediatags Javascript config option:

_c.config = {
  mediatags: {
    layout_pictures: true, // attempt to load audio album cover pictures into list layout
    modal_picture: true, // attempt to load audio album cover picture into modal
    tags: ['album', 'artist', 'genre', 'picture', 'title'], // tags to read
    types: ['mpeg', 'mp3', 'mp4', 'ogg', 'flac', 'x-m4a', 'x-wav'], // supported audio mime1 types
    observer_options: {}, // default intersection observer options should be sufficient / root document, rootMargin 0, threshold 0
  }
}

Supported formats​

Files Gallery can play any video and audio format that is supported by the browser. For video, this is normally formats mp4 and webm while audio is mp3 aac m4a wav ogg flac and webm.