Configuration

Here is a list of the configuration options:

Property Description Default
defaultQuality The default quality level (default,medium,large,hd720). If used in conjunction with the hd toggle feature, setting a default quality here will start playback with the desired default bitrate, if setting to hd720 as default, the hd button feature will toggle to hd automatically.
bitrates Enable bitrates menu selection support.
vr Enable Youtube 360 VR controls support through the player.
hasAds Works the same as the vr config to enable access to the Youtube ui to disable overlay ads.
cc Enable close caption toggling menu button support.
ccEnabled Turn captions on and toggle the cc button by default. Set to false to disable captions on startup to be manually toggled on.
subtitles Enable Flowplayer managed external subtitles and menu support.
ccLangList A list of language country codes to filter the subtitles menu list if too large.
ccDisplaySettings Control the css styling of the Youtube derived subtitles display. ie.
qualityLabels The custom bitrate labels to be used with the bitrate menu support. { tiny: "140p", small: "240p", medium: '360p', large: '480p', hd720: '720p', hd1080: '1080p', hd1140: '1140p', hd2160: '2160p', hd2880: "2880p", highres: '4320p', "default": "auto"}
chapters Enable chapter cues loaded from the Youtube api.
key The Youtube Data API Key. Found or created in the developer console. Required for chapters.

Start offsets and durations

Start offsets can be applied using either the clip or playlist configs. This will allow the player to start playlist of the video at a certain time.

clip: {
    start: 100,
    sources: [
        {type: "youtube", src: "http://www.youtube.com/watch?v=YE7VzlLtp-4"}
    ]
 }

playlist: [
 {
    start: 100,
    sources:[
        {type: "video/youtube", src: "http://www.youtube.com/watch?v=YE7VzlLtp-4"}
    ]
 }
 ]

Flowplayer 7 has no api for playback durations therefore it can be scripted using events

player.on("progress", function () {

    if (api.video.time > 20) {
        api.pause();
    }
 });

Youtube Available Quality Levels

  • tiny
  • small
  • medium
  • large
  • 720p - HD
  • 1080p - HD
  • 1140p - 2K
  • 2160p - 4K
  • 2880p - 5K
  • highres - 8K
  • default - auto switching

Youtube Closed Caption Styling

The following properties can be configured to style the Youtube derived subtitles.

background: "#CCCCCC"
backgroundOpacity: 1
charEdgeStyle: "uniform"
color: "#fff"
fontFamily: 4
fontFamilyOption: "propSans"
fontSizeIncrement: 3
textOpacity: 1
windowColor: "#080808"
windowOpacity: 0

Live Events

Simply configuring the player as live will determine that it is a live stream with no duration. If the stream is configured to publish as DVR, setting the player config to dvr will enable dvr playback and to play at the current live time. For mobile browsers this will be set as live.

flowplayer({
    ...
    live: true,
});

flowplayer({
    ...
    dvr: true,
    ...
});

Chapter Data

To enable chapter cues support. An api key is required for the Youtube Data Api. Follow the API Instructions

  • Create or choose a project.
  • Choose "Enable APIs and Services".
  • Search for "Youtube data api v3".
  • Click to add. Click enable.
  • Choose the credentials tab.
  • Choose "Create credentials" and select API Key.
  • Choose "Edit api key"
  • Choose to restrict key and add domain restriction.