Search
14 Sep 2021

  • 11145 Views
Copied Successfully!

Updates for Leanback player have stopped, we recommend using https://videojs.com/ or one of these alternatives: https://alternativeto.net/software/leanback-player/

1) General Information

This Documentation shall help using LeanBack Player.

1.1) LeanBack Player integration

In order to integrate LeanBack Player into your website download the LeanBack Player source package for free or purchase your license for commercial usage, unzip the download package and add the following content to your page header.
Remember to adapt the folder identifier shown below to your (development) environment:

<!-- first: the CSS layout of LeanBack Player -->
<link rel="stylesheet" type="text/css" href="./folder/leanbackPlayer.default.css"/>
 
<!-- second: the Javascript file of LeanBack Player -->
<script type="text/javascript" src="./folder/leanbackPlayer.pack.js"></script>
 
<!-- third: additional language files of LeanBack Player; -->
<!-- make sure you add at least the english translation ("en") -->
<script type="text/javascript" src="./folder/leanbackPlayer.en.js"></script>
<script type="text/javascript" src="./folder/leanbackPlayer.de.js"></script>

For more information have a closer look to our FAQ.

1.2) HTML5 media integration

In order to integrate HTML5 <video> elements add the following content to your page:

<!-- surrounding element with class - needed!! -->
<div class="leanback-player-video">
    <!-- HTML5 <video> element -->
    <video width="360" height="240" preload="metadata" controls poster="./folder/poster.jpg">
        <!-- HTML5 <video> sources -->
        <source src="./folder/video.webm" type='video/webm; codecs="vp8, vorbis"'/>
		<source src="./folder/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
        <source src="./folder/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    </video>
</div>

For HTML5 <video> elements add “leanback-player-video” to the CSS-class attribute of the surrounding div-element.

For HTML5 <audio> elements please consider to change the CSS-class attribute to “leanback-player-audio”.

<!-- surrounding element with class - needed!! -->
<div class="leanback-player-audio" width="350px">
    <!-- HTML5 <audio> element -->
    <audio preload="metadata" controls>
        <!-- HTML5 <audio> sources -->
        <source src="./folder/audio.mp4" type='audio/mp4; codecs="mp4a.40.2"'/>
        <source src="./folder/audio.mp3" type='audio/mpeg; codecs="vorbis"'/>
        <source src="./folder/audio.oga" type='audio/ogg; codecs="vorbis"'/>
    </audio>
</div>

We also recommend to add a specific width attribute to the surrounding element to meet your page layout.

It is as simple as that to get LeanBack Player started with your HTML5 <video> and/or <audio> elements. If you want to extend LeanBack Player functionality by adding subtitles, multiple video resolution sources and so on please read through the next sections of the documentation and pick the information and source-code neccessary for your personal use case.

1.3) Flash- and/or HTML-fallback

To use Flash- and/or HTML-fallbacks to meet browsers not yet ready for HTML5 playback extend the elements shown above like follows:

<!-- surrounding element with class - needed!! -->
<div class="leanback-player-video">
    <!-- HTML5 <video> element -->
    <video width="360" height="240" preload="metadata" controls poster="./folder/poster.jpg">
        <!-- HTML5 <video> sources -->
        ...
 
        <!-- Flash-Fallback -->
        <object class="leanback-player-flash-fallback" width="360" height="240" ...>
            ...
        </object>
 
        <!-- HTML-Fallback - Download Links -->
        <div class="leanback-player-html-fallback">
            <img src="./folder/poster.jpg" width="360" height="240" alt="Poster Image" 
                title="No HTML5 media playback capabilities available." />
            <div>
                <strong>Download Video:</strong>
                <a href="./folder/video.mp4">.mp4</a>,
                <a href="./folder/video.webm">.webm</a>,
                <a href="./folder/video.ogv">.ogv</a>
            </div>
        </div>
    </video>
</div>

The above code extends the HTML5 <video> element described in section 1.2 exemplary with flash- and html-fallback functionality.

<!-- surrounding element with class - needed!! -->
<div class="leanback-player-audio" width="350px">
    <!-- HTML5 <audio> element -->
    <audio preload="metadata" controls>
        <!-- HTML5 <audio> sources -->
        ...
 
        <!-- HTML-Fallback - Download Links -->
        <div class="leanback-player-html-fallback">
            <div>
                <strong>Download Audio:</strong>
                <a href="./folder/audio.mp4">.mp4</a>
                <a href="./folder/audio.mp3">.mp3</a>
                <a href="./folder/audio.oga">.oga</a>
            </div>
        </div>
    </audio>
</div>

The above code extends the HTML5 <audio> element described in section 1.2 exemplary with html-fallback functionality.

1.4) Extending LeanBack Player with options

You can change and extend the functionality of LeanBack Player by setting up additional options like shown below:

<script type="text/javascript">
  LBP.options = {
    // your options here (see list of options below)
  }
</script>

The list below shows several options, their default values and provides an explanation about it, to change the functionality of LeanBack Player.

// if video player should start in fullscreen mode; default is "false"
autoFullscreen: true,
 
// if you want to use native player on iPad; default is "false"
defaultIPadControls: true,
 
// set up default language, en = english, de = german, fr = french, ...
defaultLanguage: "en",
 
// change to browser language if available
setToBrowserLanguage: true,
 
// video controls bar elements;
// by default all of them available (if present by options and in CSS theme)
defaultControls: ["Play", "Pause", "Stop", "Progress", "Timer", "Volume",
			"Playback", "Subtitles", "Sources", "Fullscreen"],
 
// audio controls bar elements;
// by default all of them available (if present by options and in CSS theme)
defaultAudioControls: ["Play", "Pause", "Stop", "Progress", "Timer", "Volume"],
 
// extended controls to be shown within the player;
// by default all of them available
controlsExtra: ["Poster", "Embed", "Logo", "Spinner", "BigPlay"],
 
// show controls bar below video-viewport; default is "false"
controlsBelow: true,
 
// (delayed) hiding of LB player controls; default is "true"
hideControls: false,
 
// if delayed hiding, hide controls bar after x seconds
hideControlsTimeout: 4,
 
// prevent hiding of controls bar if video paused; default is "false"
hideControlsOnPause: true,
 
// if media element should be paused and unfocused (CSS) on focus lost
pauseOnFocusLost: false,
 
// prevent playing more than one media element (player) at same time
pauseOnPlayerSwitch: true,
 
// focus first (video) player on initialization; default is "true"
focusFirstOnInit: false,
 
// if media element buffering should be stopped/restarted on focus lost/re-focused
// overwrites pauseOnPlayerSwitch to "true"
// stores playback-status (playing/paused) to come back
handleBufferingOnFocusLost: true, // (Experimental)
 
// if poster-image should reappear once video ended; default is "true"
posterRestore: false,
 
// set default volume; default is "6"
defaultVolume: 3,
 
// set how many volume rates; default is "8"
volumeRates: 10,
 
// hide subtitles element from controls bar; default is "true" (shown)
showSubtitles: false,
 
// set default language for subtitles; can differ from "defaultLanguage"
defaultSubtitleLanguage: "en",
 
// set to "false" to disable subtitle on player initialization; default is "true"
initSubtitle: false,
 
// show element in controls bar to change between source resolutions; default is "false"
showSources: true,
 
// show playbackrate element in controls bar to change between "playbackRates"
// only available if supported by browser (if set to "true"); default is "false"
showPlaybackRates: true,
 
// if playbackrates should be extended; by default following are available
playbackRates: [0.25, 0.5, 1, 2],
 
// default timer format, 
// could be "PASSED_DURATION" (default), "PASSED_REMAINING", "PASSED_HOVER_REMAINING"
defaultTimerFormat: "PASSED_DURATION",
 
// set up seek-skip in seconds; to jump back or forward x seconds
seekSkipSec: 3,
 
// set up seek-skip in percent; to jump back or forward x percent
seekSkipPerc: 10,
 
// if you want to show your users an embed-code item within the player; default is "false"
showEmbedCode: true, // (Experimental)
 
// logo path/url; set up position with CSS
logo: "",
 
// use preloading spinner or not; by default is "true"
useSpinner: true,
 
// use to adapt spinner circles to your needs (CSS)
useSpinnerCircles: 7,
 
// trigger events of HTML5 media elements
// eg.: loadstart, progress, suspend, abort, error, emptied, stalled;
    // play, pause; loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough;
    // seeking, seeked, timeupdate, ended; ratechange, durationchange, volumechange
triggerHTML5Events: ["play", "pause"],

2) Multiple HTML5 <video> and <audio> elements on a single page

It is quite simple to explain. Set up all your media elements as described in section 1.2 of this documentation. But you should be aware not all browser and (mobile) device vendors support multiple HTML5 media elements on a single page.

3) Adding subtitles to an HTML5 <video> element

LeanBack Player makes use of the <track> element of HTML5 media. Thereby it is very easy to add subtitles in different languages to the HTML5 <video> player. Currently LeanBack Player supports (subsets of) the following subtitles formats:

  • .srt Subtitle Format (WebSRT); reference: .srt SubRip-example on Wikipedia
  • .sbv Youtube Subtitle Format; reference: Youtube Help with more Informations on .sbv
  • .vtt Web Video Text Tracks format (WebVTT); reference: our WebVTT review and WebVTT specification (draft)
  • .xml Subtitles; reference: .srt to DFXP Converter at Stanford University
  • Subset of .ttml Subtitles (TTML); reference: W3C – Example Fragment – TTML Body
  • .sub Subtitles (VOBsub);

3.1) Set LeanBack Player option

As mentioned in section 1.3 you can set up additional options for different things to be done. To use subtitles set options like shown below:

<script type="text/javascript">
  LBP.options = {
    ...
    // set up default subtitle language; can differ from "defaultLanguage" option
    // HINT: if you want to use "en" as default, there is no need to add subtitle option
    defaultSubtitleLanguage: "en",
    ...
  }
</script>

3.2) Add <track> elements

For how to add subtitles to your HTML5 <video> player see the example below that extends the example of section 1.2:

<!-- surrounding element with class - needed!! -->
<div class="leanback-player-video">
  <!-- HTML5 <video> element -->
  <video width="360" height="240" preload="metadata" controls poster="./folder/poster.jpg">
    <!-- HTML5 <video> sources -->
    ...
    <!-- subtitle-references with <track>-element -->
    <track enabled="true" kind="subtitles" label="German" srclang="de" type="text/x-srt" 
        src="./folder/srt_example_de.srt"></track>
    <track enabled="true" kind="subtitles" label="English" srclang="en" type="text/plain" 
        src="./folder/sbv_example_en.sbv"></track>
    <track enabled="true" kind="subtitles" label="France" srclang="fr" type="text/plain" 
        src="./folder/sbv_example_fr.sbv"></track>
  </video>
</div>

To avoid errors all above attributes of a <track> element should be added. The type attribute should be set to one of the following pairs to be parsed correctly:

  • .srt: type=”text/plain”, type=”text/x-srt”
  • .sbv: type=”application/x-subrip”
  • .sub: type=”application/vobsub”
  • .vtt: type=”text/vtt”
  • .xml: type=”application/xml”
  • .ttml: type=”application/ttaf+xml”

4) Use of multiple video sources with different resolutions

If you have a video available in different resolutions LeanBack Player can handle them for you.

4.1) Set LeanBack Player option

As mentioned in section 1.3 you can set up additional options for different things to be done. To use different sources set option to true like shown below:

<script type="text/javascript">
  LBP.options = {
    ...
    // show controls bar element to change between source resolutions; default is "false"
    showSources: true,
    ...
  }
</script>

4.2) Add more <source> elements

To show up adding additional sources we extend the example from section 1.2:

<!-- surrounding element with class - needed!! -->
<div class="leanback-player-video">
  <!-- HTML5 <video> element -->
  <video width="360" height="240" preload="metadata" controls poster="./folder/poster.jpg">
    <!-- HTML5 <video> sources -->
    <source src="./folder/video_1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
    <source src="./folder/video_2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
    <source src="./folder/video_3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
 
    <source src="./folder/video_1.webm" type='video/webm; codecs="vp8, vorbis"'/>
    <source src="./folder/video_2.webm" type='video/webm; codecs="vp8, vorbis"'/>
    <source src="./folder/video_3.webm" type='video/webm; codecs="vp8, vorbis"'/>
 
    <source src="./folder/video_1.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="./folder/video_2.ogv" type='video/ogg; codecs="theora, vorbis"'/>
    <source src="./folder/video_3.ogv" type='video/ogg; codecs="theora, vorbis"'/>
  </video>
</div>

You can see, there is no hint in this example which resolution level a video source has. The player is ready to get the needed information by buffering a small size of the video and extends the controls bar with those information.

But be aware of the following: LeanBack Player dynamically selects the most common sources (of one type/codec) of the playable ones.

5) Use of keyboard shortcuts

To control the HTML5 media player via keyboard, LeanBack Player offers shortcuts as a standard feature for desktop browsers. If a HTML5 media element gets focused keyboard shortcuts appear to this element by default and could be used. In the following the default shortcuts provided by LeanBack Player are explained in more detail:

  • Play , Pause , Stop
  • Volume up , volume down
  • Mute volume + , unmute volume + or to (un)mute directly
  • Short jump backwards or forwards in seconds
  • Jump backwards + or forwards + in percent
  • Jump to the start or , jump to the end
  • Switch between window mode and full-window/-screen mode
  • Show or hide subtitle
  • Switch between available subtitles +
  • Switch between available HTML5 media elements +
  • Show or hide LeanBack Player informations

6) Use of LeanBack Player Extensions

LeanBack Player tries to summarize all features of a HTML5 media element into one cross-browser styled HTML5 media player UI. Extensions can be used to expand LeanBack Player’s features with more features that could be important when using a HTML5 media player UI on the web.

See our Extensions compatibility matrix for more informations about support of extensions for desktop browser and mobile devices.

In order to get an extension working first of all add the CSS and javascript files from the extensions archive, as explained in section 1.1, below the files of LeanBack Player you have just integrated into your website.

6.1) Chapter Navigation Extension

The Chapter Navigation extension provides the possibility to add headline-like positions in timeline to a specific HTML5 <video> element.

<script type="text/javascript">
  ...
  // do: define ChapterNavigation options
  LBP.ChapterNavigation = {
    "unique_id": {
      cue: [
        {cueTime: {start: "0", end: "12"},
		  cueHeadline: "Intro",
		  cueContent: "<strong>A small and short Intro</strong>"
		 },
        {cueTime: {start: "14", end: "69"},
		  cueHeadline: "Head-Snarlers",
		  cueContent: "<strong>Second Part</strong><br/>- "2nd" -"
		},
        {cueTime: {start: "70", end: "150"},
		  cueHeadline: "Third Pard",
		  cueContent: "<strong>Darkness</strong><br/>- "3rd..." -"
		}
      ],
      // if playback should start if cue clicked (timeline and cue list)
      cueClickPlay: true,
      // true when drawing the cuelist with JS (recommended)
      cueList: true,
      // use h for cueTime values hh:mm:ss.ms[msms]
      // use m for cueTime values mm:ss.ms[msms]
      // use s for cueTime values ss.ms[msms]
      // use ms for cueTime values ms[msms]
      cueTimeUnit: "s",
      // true if cueheadline should be shown in fullscreen mode
      cueFullscreen: true,
      // time in seconds to show the cueheadline
      // 0 for complete duration between the start and end cueTime of a cue
      cueFullscreenTime: 4,
      // duration of video to calculate positions of chapters in progress bar
      duration: 150
    }
  };
  ...
</script>

The above setup contains a configuration for a video element with attribute id=”unique_id”.

The extension by default is able to create the chapter navigation cue list automatically. if you need to write by your own, add an attribute id=”unique_id_list” which refers to the id of the HTML5 <video> element the list should be “added” to.

...
  <!-- HTML5 <video> element with id="unique_id" -->
  <video id="unique_id" ...>
  ...
  </video>
  <!-- if cueList is "true" the chapter navigation
       needs a container like below with id="unique_id_list" -->
  <div id="unique_id_list" class="cue_list"><h3>Chapter Navigation - Headline</h3></div>
...

But be aware of the following: if you write the chapter navigation list by your own, the Chapter Navigation extension may not be able to handle onclick-events automatically.

6.2) Google Analytics Tracker Extension

To track (all) your HTML5 <video> elements events on a single page you need to configure the extension like shown below.

<script type="text/javascript">
    ...
    // do: define Google Analytics Tracker extension option(s)
    LBP.gaTracker.options = {
        addJSCode: true, // true if extension should add
                            // Google Analytics async Javascript source code
        profileID: "UA-1234567-8", // profile ID (web property ID, website ID)
                                        // events should be tracked for
        debug: true, // true if tracked events should be written to console
    }
    // do: define category to track for
    LBP.gaTracker.trackCategory = "LBP-Tracking";
    // do: define events to be tracked
    LBP.gaTracker.trackEvents = 
        ["VolumeChange", "RateChange", "Seeking", "Seeked", "Ended", "Play", "Pause"];
    ...
</script>

The shown events are the events tracked throught the extension by default, so if you do not want to change you can leave LBP.gaTracker.trackEvents array.

6.3) HD Button Extension

The LBP.HDButton object, like shown in the following code example, contains a list of objects, differing by an id (e.g. “unique_id1”), with an HDStream attribute taking a list of HD quality source links. The player chooses independently the source playable in the browser.

If you want to use images as SD and HD icons instead of CSS styling, just point the SDBtn and HDBtn to the directory you uploaded the button icons.

<script type="text/javascript">
    ...
    // do: define HDButton option(s)
    LBP.HDButton = {
        "unique_id1": {HDStream: [
            "./folder/video1_hd.mp4",
            "./folder/video1_hd.webm",
            "./folder/video1_hd.ogv"
        ]}, 
        "unique_id2": {HDStream: [
            "./folder/video2_hd.mp4",
            "./folder/video2_hd.webm",
            "./folder/video2_hd.ogv"
        ]},
        CSS: false, // using css style button (true|false)
        SDBtn: "./img/HDButton.off.png",
        HDBtn: "./img/HDButton.on.png",
        controlsBar: true, // add HDButton to controls bar; overwrites other options (CSS,...)
        mobileOnly: true // HDButton for mobile devices only; eg. use showSources for desktop
    };
    ...
</script>

The example shows how to set up HD Button options for two different HTML5 <video> elements identified through their id attributes (“unique_id1”, “unique_id2”) like shown in the example code below.

...
  <!-- HTML5 <video> element #1 -->
  <video id="unique_id1" ... >  
  ...  
  <!-- HTML5 <video> element #2 -->
  <video id="unique_id2" ... >
...

6.4) HTML5 LocalStorage Extension

Because the HTML5 LocalStorage extensions uses the upcoming and partially already available build-in HTML5 localStorage object of modern desktop browsers (at this time) the extension may or may not be available for you. If it is available at this point of development you have the following possibilities to use:

  • Store changes of volume made while playback
  • Store changes of played time (5 sec. interval or direct modification when seeking) made while playback
  • Store changes of subtitles made while playback

Those settings for HTML5 LocalStorage extension can be done on the information window of LeanBack Player (press “i”).

While above settings are done for a specific HTML5 <video> element it is also possible to store settings globaly for your domain and therefore to apply them to all HTML5 <video> elements used on your domain. At this time the following settings can be stored (without any user interaction):

  • Store changes of volume made while playback

To configure HTML5 LocalStorage Extension within your page (header) see the following code snippets:

<script type="text/javascript">
    ...
    // do: define HTML5 LocalStorage Extension configuration
    LBP.LocalStorage.conf = {
      options: {
        volume: {show: true, ckbx: true},  // show volume selector, selected on startup
        time: {show: true, ckbx: true},  // show time selector, selected on startup
        subtitles: {show: true, ckbx: true},  // show subtitles selector, selected on startup
        reset: {show: true}  // show reset selector to reset stored configuration
      },
      domain: {
        store: true,  // if global domain-based settings should be stored, default "false"
        config: {
          storeVolume: true  // if volume changes should be stored globaly, default "false"
        }
      },
      debug: true  // if debug informations should be shown in console, default "false"
    };
    ...
</script>

If you want to use your configuration be default on all pages running a LeanBack Player instance, you can go directly to the HTML5 LocalStorage Extensions .js file and change configuration there.

We highly recommend this to avoid issues using the domain-sepcific HTML5 localStorage configuration. You will find a LBP.LocalStorage object with same configuration shown above.

6.5) Piwik Tracker Extension

To track (all) your HTML5 <video> elements events on a single page you need to configure the extension like shown below.

<script type="text/javascript">
    ...
    // do: define Piwik Tracker Extension option(s)
    LBP.piwikTracker.options = {
        piwikUrl: "piwik.domain.com",	// url Piwik is installed
        addJSCode: true, // true if extension should add Piwik's Javascript source code
        piwikSideID: 1,	 // side ID this page is set up within Piwik
        debug: true      // true if tracked events should be written to console
    }
    // do: define events to be tracked (first 5 events are shown as "custom variables")
    LBP.piwikTracker.trackEvents = 
       ["VolumeChange", "RateChange", "Seeking", "Seeked", "Ended", "Play", "Pause"];
    ...
</script>

The shown events are the events tracked through the extension by default, so if you do not want to change you can leave LBP.piwikTracker.trackEvents array.

6.6) InVideo Playlist Extension

With the InVideo Playlist extension you are able to add playlist functionalities directly to every LeanBack Player instance on your website. To prepare your website for the extension please read and follow the detailed description in the text below.

First of all add the CSS and javascript files from the extensions archive as explained in section 1.1 behind the files of the player you have just integrated into your website.

To add a playlist to a certain HTML5 <video> element you have to add the id attribute with an unique id to the video element as show below using the example of section 1.2:

...
  <!-- HTML5 <video> element -->
  <video id="unique_id" ...
...

There are several options for the InVideo Playlist extension that could be changed by developer.
To use one or more options use the following source code construct:

<script type="text/javascript">
  ...
  // do: define video playlist extension option(s)
  LBP.vplaylist.options = {
	// your video playlist options here (see list of options below)
  }
  ...
</script>

Below you see the full list of options to be changed and their default values:

// use video playlist categories (true), default is false
useCategories: false,
 
// default video playlist category name
defaultCategory: "Default",
 
// set video playlist items height
itemHeight: 150,
 
// set video playlist items poster width
itemPosterWidth: 82,
 
// set video playlist items poster height
itemPosterHeight: 52,
 
// video playlist as element in controls bar (true) or as child of video-window (false)
  // like eg. the Big-Play button
controlsElement: true

To use the InVideo Playlist extension you simply have to set up your playlist(s) like show below:

<script type="text/javascript">
  ...
  LBP.vplaylist["unique_id"] = {
    items: [{
      category: "My 1st Playlist",
      title: "First example video",
      duration: 53,
      poster: "https://url/poster1.jpg",
      source: ["https://url/video1.mp4", "https://url/video1.ogv"],
      sources: [{src: "https://url/video1_1.mp4"}, {src: "https://url/video1_1.ogv"}],
      subtitles: [{kind: "subtitles", label: "German", srclang: "de", 
            type: "text/x-srt", src: "https://url/sub1_de.srt"},
        {kind: "subtitles", label: "English", srclang: "en", 
            type: "text/plain", src: "https://url/sub1_en.sbv"},
        {kind: "subtitles", label: "France", srclang: "fr", 
            type: "text/plain", src: "https://url/sub1_fr.sbv"}]
    },{
      category: "My 2st Playlist",
      title: "Second example video",
      duration: 185,
      poster: "https://url/poster2.jpg",
      source: ["https://url/video2.mp4", "https://url/video2.ogv"],
      sources: [{src: "https://url/video2_1.mp4"}, {src: "https://url/video2_1.ogv"}],
      subtitles: [{kind: "subtitles", label: "German", srclang: "de", 
            type: "text/x-srt", src: "https://url/sub2_de.srt"},
        {kind: "subtitles", label: "English", srclang: "en", 
            type: "text/plain", src: "https://url/sub2_en.sbv"},
        {kind: "subtitles", label: "France", srclang: "fr", 
            type: "text/plain", src: "https://url/sub2_fr.sbv"}]
    }]
  }
  ...
</script>

This example shows how to set up a playlist for the video element of id=”unique_id” attribute.
For every playlist item you can define a category attribute, a title attribute, a duration attribute and also the poster attribute to be shown.

If the category attribute was not defined, this playlist items category will set to a default category.
If a title was not defined, the title of the video is set to the short version video source url with only the video name and extension.

The source attribute uses a list of your default HTML5 <video> sources like shown in section 1.2, side by side separated by a comma (“,”). The extension then automatically selects the playable source for the browser.
You can also set up multiple video resolutions added to the sources attribute with their src: “url” pairs like shown above, this is because of the player functionality handling different resolutions by default.
Even subtitles can be added for any playlist item. All subtitles entries are objects with kind, label, type and src as attributes to be added.

The category, title, duration, sources and subtitles entries are “can have” entries, so they can be left out if not available. To enable sources and subtitles remember to set the corresponding player option explained in section 1.3.

The extension comes with the default keyboard shortcuts to be used in desktop browsers to interact with the playlist of a focused video element like show below:

  • Switch to next or back to previous video in a playlist
  • Open up + or close playlist +
  • Select playlist element + or +
  • Release -key to play selected playlist item
  • Switch to categories + or back to playlist items + (with playlist open)
  • Select playlist category + or +

Remember: Using any mobile device a “non control bar” used InVideo Playlist extension will not be accessable due to the missing keyboard shortcut functionality.

6.7) XSPF Audio Playlist Extension

The XSPF Audio Playlist extension uses the XML Shareable Playlist Format (XSPF, Version 1, November 2006) to extend an HTML5 <audio> element with a kind of audio playlist.
The following code snippets show how to set up a playlist for an HTML5 <audio> element with an attribute id=”unique_id”.

<script type="text/javascript">
  ...
  // do: define XSPF Audio Playlist options
  LBP.XSPFAudio.options = {
    // if playlist style "width" is defined within your CSS; default is "false"
    fixedWidth: true
  };
  // do: provide XSPF Audio Playlist URL for HTML5 <audio> element id="unique_id"
  LBP.XSPFAudio["unique_id"] = "https://url/tracklist.xml";
  ...
</script>

Make sure audio source URL, like shown below, is part of a XSPF playlist track’s <location> element since this source will also be the first selected element of the shown playlist.

...
  <!-- HTML5 <audio> element with id="unique_id" -->
  <audio id="unique_id" ...>
    <source src="https://url/audio_file.mp4" type='audio/mp4; codecs="mp4a.40.2"' />
    ...
  </audio>
  <div id="unique_id_list"></div> <!-- the XSPF playlist container -->
...

An example XSPF playlist was bundled with the XSPF Audio Playlist’s download package.

The XSPF Audio Playlist extension comes with build-in keyboard shortcuts to be used in desktop browsers to interact with the audio players playlist like show below:

  • Switch to next + or previous + title in playlist
  • (de-)activate loop/repeat + of titles or the whole playlist

7) Use of LeanBack Player Plugins

7.1) Shortcode notation of Plugins

The following shortcode notation of plugins enables an easy way to get LeanBack Player working as your prefered HTML5 media player UI in Content Management Systems.
To integrate as a video player the shortcode notation starts with “[leanback_video ..”, as an audio player shortcode starts with “[leanback_audio ..”.
The following lines contain the hint the notation code can be used for, video, audio or both.The location of the h.264/MP4 source (video and audio):

[leanback_video mp4="source_1_url.mp4"]

The location of the MPEG/MP3 source (audio only):

[leanback_audio mp3="source_1_url.mp3"]

The location of the VP8/WebM source (video only):

[leanback_video webm="source_1_url.webm"]

The location of the Theora/Ogg source (video and audio):

[leanback_video ogg="source_1_url.ogg"]

To provide multiple sources for different resolutions you do not need to set an option, just add multiple sources as explained below.
The location of multiple sources should be separated by “|” (vertical bar) (video only):

[leanback_video ogg="source_1_url.ogv|source_2_url.ogv"]

The location of the Poster image source (video only):

[leanback_video poster="poster_url.jpg"]

The initial width of player within a page (video only):

[leanback_video width="640"]

The initial height of player within a page (video only):

[leanback_video height="360"]

The preloading state of the sources. Can be set to “none”, “metadata” or “auto”. If not given, the value is predefined to “metadata” (video and audio):

[leanback_video preload="metadata"]

Starts the playback of source once it is ready (video and audio):

[leanback_video autoplay="true"]

Restarts playback when the end of a source is reached (video and audio):

[leanback_video loop="true"]

To provide subtitles you do not need to set an option, just add subtitles as explained below.
Subtitles can be added in the form label, srclang, type and source, separated by “|” (vertical bar) (video only):

[leanback_video subtitles="English|en|text/plain|subtitle_1_url.sbv"]

Multiple subtitles have to be separated by “||” (double vertical bar) (video only):

[leanback_video
        subtitles="German|de|text/plain|subtitle_1_url.sbv||English|en|text/plain|subtitle_2_url.sbv"]

For flash fallback definition use the flash attribute set with the source to the flash player. The Plugins are designed to work with FlowPlayer as Flash fallback player. (video only):

[leanback_video flash="flash_fallback.swf"]

Example of all attributes the plugin can process as a video player showing multiple sources for video (2x) and multiple subtitles (2x):

[leanback_video 
        mp4="source_1_url.mp4|source_2_url.mp4" 
        webm="source_1_url.webm|source_2_url.webm" 
        ogg="source_1_url.ogv|source_2_url.ogv" 
        poster="poster_url.jpg" 
        width="640" 
        height="360" 
        preload="metadata" 
        autoplay="true" 
        loop="true" 
        subtitles="German|de|text/x-srt|subtitle_1_url.srt||English|en|text/plain|subtitle_2_url.sbv" 
        flash="flash_fallback.swf"]

Example of all attributes the plugin can process as an audio player:

[leanback_audio 
        mp4="source_1_url.mp4"
        mp3="source_1_url.mp3" 
        ogg="source_1_url.oga" 
        preload="metadata" 
        autoplay="true" 
        loop="true"]

7.2) WordPress Plugin

To install and use the LeanBack Player WordPress Plugin please read below:

  • follow the steps within the README file bundled with the plugin download
  • use the shortcode notation within your articles as explained in point 7.1 above
  • known issues uploading files:
    • maybe you have to add some file type extensions to the /wp-includes/functions.php WordPress file
    • if so you should extend the functions wp_ext2type and get_allowed_mime_types according to file types you want to use

7.3) Joomla Plugin

Available here soon …

8) HTML5 <video> + <audio> element generator

To facilitate working with HTML5 media elements we have developed an HTML5 <video> + <audio> element generator. The generator eases the creation of code to use LeanBack Player as your preferred HMTL5 media player UI.

9) FAQ – Frequently asked questions

Q: Why adding a width attribute to an HTML5 <audio> elements parent container?

A: In difference to an HTML5 <video> element, where we add width and height to the element or are able to get the width and height of the video-source, we are not able to do same using an HTML5 <audio> element. So, to adjust an HTML5 <audio> element within the page area we need to add the width attribute to its parent container element.

Q: Why my subtitles aren’t shown within LeanBack Player’s control bar?

A: Since LeanBack Player uses a XHR request to load content of an available <track> element developers should be aware of the cross-origin resource sharing (CORS) policy of XHR. So make sure all subtitle sources are in the same origin (domain) like the page you are using LeanBack Player.

Q: Why volume controls aren’t shown within LeanBack Player’s control bar using a mobile device?

A: As of the fact mobile devices provide hardware controls for volume setup and therefore a missing/unnecessary implementation of mobile browsers to change volume of device via inline the browser, the volume controls doesn’t appear in LeanBack Player’s control bar.

Q: What to do if my video/audio files do not start playing and a “MEDIA_ERR_SRC_NOT_SUPPORTED” notification is shown in the debug console?

A: Be aware to set up the right mime-types for all your media files. The easiest way is to set up an .htaccess file with all the necessary mime-types you want to deliver in the form below:

#### VIDEO MIME TYPES
AddType video/mp4 .mp4
AddType video/x-m4v .m4v
AddType video/ogg .ogv
AddType video/webm .webm
AddType video/x-ms-wmv .wmv

#### AUDIO MIME TYPES
AddType audio/x-acc .acc
AddType audio/x-m4a .m4a
AddType audio/mpeg .mp3
AddType audio/ogg .ogg .oga

Q: I tried to embed LeanBack Player sources like explained in point 1.1, but LeanBack Player isn’t shown as expected as HTML5 media player UI for my HTML5 <video>/<audio> elements?

A: Please do not try to link back to our hosted sources, neither to the LeanBack Player sources nor to the HTML5 <video> or to the HTML5 <audio> sources. Our backend servers most likely will reject those proceedings.

If you run into problems setting up your environment, please contact us using our ticket support system via support-[at]-leanbackplayer.com. We try to answer each ticket as soon as possible to assist you with all your questions to get your HTML5 media environment up and running.

Q: Where to ask my questions, report an issue or a bug?

A: As a customer come up with a support ticket via customer area. If developers are using a free, open-source copy of LeanBack Player please open an support ticket (support-at-leanbackplayer.com) to ask your questions, report an issue or a bug using LeanBack Player or any extension. We will try to come across all questions, reported issues and bugs and try to fix them immediately if concerning LeanBack Player source code. We won’t give any support on your modifications you made to LeanBack Player source without an extended-support contract.

Last modified: 2013-02-05T07:13:41+01:00

Related News

17 Sep 2021

WebVTT format – Web Video Text

  • 7069 Views
14 Sep 2021

HTML5 video Iframe examples

  • 6232 Views
14 Sep 2021

  • 11593 Views
14 Sep 2021

  • 4915 Views