EMP Html5 Player 2

Playlist

This tutorial will show you how to use the playlist.

  • Playlist works for browsers and Chromecast.
  • You can jump between programs, assets and external streams in the playlist.
  • The 'selected' source will be updated during playback.
  • There is a Pop-up menu 'playlistButton' for the playlist.
  • Playlist is independent of the Pop-up menu and 'playlistButton' can be exclude, your can render the playlist GUI by yourself.
  • You can't jump between programs in a channel it will always play next source in the playlist.
  • After last source in the playlist has been played, playback will stop.

Playlist starts playing the first or selected source after the src method has been called.

Add playlist sources with code

You can select the source you like to start play, with the "selected" member.

"title" is optional, the assetId or the filename will be used instead (it's for the label in the pop-up menu).

"type" default is "video/emp"

demoPlayer.playList().src(
[{"src":"simple_vod_unenc_82162E", "title":"Transformers UNENC"},
 {"src":"simple_vod_enc_82162E",   "title":"Transformers ENC"},
 {"src":"complex_vod_unenc_82162E","title":"Badman UNENC","selected":true},
 {"src":"complex_vod_enc_82162E",  "title":"Badman ENC"}]
)

// or with type

demoPlayer.playList().src(
[{"src":"https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/hls.m3u8", "type":"application/x-mpegURL", "title": "angel-one-hls"},
 {"src":"simple_vod_enc_82162E","type":"video/emp","title":"Transformers ENC"}]
)

// With ChannelId it play current live program on one channel
// and switch to the other live channel after, play current live program and then stop

demoPlayer.playList().src(
 [{"src":"bbc1_82162E", "title":"BBC1"},
 {"src":"bbc2_82162E",   "title":"BBC2"}]
)

Add playlist sources with markup

    <video id="video" controls width="640" height="264">
        <source title="angel-one-hls" src="https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/hls.m3u8" type="application/x-mpegURL">
        <source title="angel-one-widevine" src="https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine/dash.mpd" keySystems='{"com.widevine.alpha":"https://cwip-shaka-proxy.appspot.com/no_auth"}' type="application/dash+xml">
        <source title="android-screens" src="https://storage.googleapis.com/exoplayer-test-media-1/mkv/android-screens-lavf-56.36.100-aac-avc-main-1280x720.mkv" type="video/mp4">
        <source src="simple_vod_unenc_82162E" type="video/emp" title="Transformers UNENC">
        <source src="simple_vod_enc_82162E" type="video/emp" title="Transformers ENC">
        <source src="complex_vod_unenc_82162E" type="video/emp" title="Badman UNENC">
        <source src="complex_vod_enc_82162E" type="video/emp" title="Badman ENC" selected>
        <source src="bbc2-824752247_82162E" title="BBC2, Newsroom Live">
        <source src="bbc1-824739609_82162E" title="BBC1-Enc, Defenders UK">
        <source src="bbc2-824749889_82162E" title="BBC2, Homes Under the Hammer">
        <source src="bbc1-824739606_82162E" title="BBC1-Enc, Rip Off Britain">
    </video>

Playlist methods

API docs...

demoPlayer.playList().src(Array of source) // Load playlist and start playback with first or selected source
demoPlayer.playList().next()
demoPlayer.playList().previous()
demoPlayer.playList().index = 1 // (get or set) change playlist source and start playback
demoPlayer.playList().currentSource() // get current source
demoPlayer.playList().currentSource("simple_vod_unenc_82162E") // set current source and start playback 
demoPlayer.playList().sources // get list with sources
demoPlayer.playList().length
demoPlayer.playList().clear()
demoPlayer.playList().autoSequence // (get or set) If playlist should play next source automatic (default true)
demoPlayer.playList().on(playlistchange) // event when playlist change
// Same
demoPlayer.on(playlistchange)

demoPlayer.playList().on(ended) // fire when all sources have been played or if autoSequence is false then it will fire after after every source.

If you have customize the Control Bar then you can add the playlist pop-up menu to the Control Bar

It will be added by default if you not customize the Control Bar.

  options['controlBar'] = {
    children: [
      'playlistButton'
    ]
  };

  options['controls'] = true;

How to disable playlist pop-up menu

The control option should be set to false before initialising the player:

options['controlBar'] = {
  'playlistButton': false,
};

More about player options...