Flowplayer HTML5 Video

Synopsis

The Flowplayer HTML5 Video module allows you to display video files hosted in your server.
It creates a Field Formatter, available for fields of type File.

Supports:

• mp4, ogg and webm as video formats.
• vtt as subtitles format.
• gif or jpg as images for the poster.

Basic features:

• Setting Width and Height of the player.
• Optional custom CSS Classes.
• Setting Preload.
• Setting Autoplay.
• Setting Muted.
• Usage of subtitles (.vtt).
  • If using subtitles it is recommended to "Enable Description field" option.
  • The content of this field will be used for displaying the language of each subtitle.
• Usage of poster (.jpg or .gif).
  • Although most browsers will show the first frame of the video before starting playing, some mobile browsers will not.
  • To avoid the player to initially render blank in some platforms, uploading a gif or jpg image for use as poster is recommended.
  • If you upload several images only the top one will be used for the poster. Rearrange the order of the files to select the image to use.

Requirements

It uses Flowplayer java script and CSS.
By default, uses the free versions of flowplayer.min.js and all-skins.css loaded from releases.flowplayer.org CDN.
If you prefer to load the files from your own server, namely if you buy a Flowplayer license, set Use Flowplayer from to local.
For detailed information about Flowplayer, visit the documentation at flowplayer.org.

Flowplayer specific features:

• Load Flowplayer from cdn (default), local or disable.
  • If use Flowplayer is disabled, the module will not use java scripts or CSS to render the video, and depends on the capability of the browser to render HTML5 Video.
• Choose from several skins as provided by Flowplayer.
• Video ratio. Options are:
  • 16:9 - landscape
  • 4:3 - landscape
  • 12:5 - landscape
  • 9:16 - portrait
  • 3:4 - portrait
• Playlist.
  • If several videos where uploaded, this option allows to create links below the player to switch among them. It uses the Description field to render the link.
• Video description contains.
  • If set to text, the playlist is shown as text links.
  • If set to url, the playlist is shown as image links.
    • In this case you must provide in the video description a valid url to an image.
• Playlist advance.
  • If set to true, plays the next clip when the current one is finished and stops when last clip ends.

Similar projects and how they are different

• Video
• Video.js (HTML5 Video Player)
• MediaElement

These are fine and robust modules to handle video, with great features including embedding from YouTube, Vimeo and other video hosting providers.

Flowplayer HTML5 Video module as his focus on:

• Displaying video files hosted in your server.
• Taking advantage from the great features of Flowplayer.
• Easy integration of subtitles.

Dependencies

• core/jquery
• Flowplayer
  • We suggest the use of Flowplayer CDN.
  • For your convenience a copy of Flowplayer is included with this module, in case loading Flowplayer from your server is required.
  • Currently, the included version of Flowplayer is 6.0.5.