Configuration

Here is a list of the configuration options:

PropertyDescriptionDefault
defaultQualityThe 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.
bitratesEnable bitrates menu selection support.
vrEnable Youtube 360 VR controls support through the player.
hasAdsWorks the same as the vr config to enable access to the Youtube ui to disable overlay ads.
ccEnable close caption toggling menu button support.
ccEnabledTurn captions on and toggle the cc button by default. Set to false to disable captions on startup to be manually toggled on.
subtitlesEnable Flowplayer managed external subtitles and menu support.
ccLangListA list of language country codes to filter the subtitles menu list if too large.
ccDisplaySettingsControl the css styling of the Youtube derived subtitles display. ie.
qualityLabelsThe 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"}

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,
    ...
});