Electroteque Media

Multi Format Playlist Selection

Youtube Playlist With Mp4 videos

This example demonstrates playing youtube videos with other formats include standard html5 videos. Playlists are configured using an items property. 

     
     <script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/playlist.min.js"></script>

  <div class="flex flex-col w-full">
          <div id="multi-playlist" class=""></div>


            <div id="playlist-ui"></div>
  </div>

  <script type="text/javascript">

  	var player = flowplayer("#multi-playlist", {
    "controls": "#playlist-ui",
    "playlist": {
        "controls": "#playlist-ui"
    },
    "src": {
        "items": [
            {
                "src": [
                    {
                        "src": "http://www.youtube.com/watch?v=Vpg9yizPP_g",
                        "type": "video/youtube"
                    }
                ],
                "title": "Big Buck Bunny"
            },
            {
                "src": [
                    {
                        "src": "https://videos.electroteque.org/bitrate/sintel_2000k.webm",
                        "type": "video/webm"
                    },
                    {
                        "src": "https://videos.electroteque.org/bitrate/sintel_2000k.mp4",
                        "type": "video/mp4"
                    }
                ],
                "title": "Sintel Mp4"
            },
            {
                "src": [
                    {
                        "src": "http://www.youtube.com/watch?v=MFg8mBaMoPs",
                        "type": "video/youtube"
                    }
                ],
                "title": "Elephants Dream"
            }
        ],
        "type": "flowplayer/playlist"
    },
    "token": "eyJraWQiOiIyeHRpc0Q5NHZzTjIiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCIyeHRpc0Q5NHZzTjJcIixcImRvbWFpblwiOltcImVsZWN0cm90ZXF1ZS5vcmdcIl19IiwiaXNzIjoiRmxvd3BsYXllciJ9.WLUkZHpDNoaXWDaFO2V5UfXm7SnDvE1pFAM0e7ppnFovOSyCCZM-b8gQNBSElB5yirTP__x76Qyo8pMWh6lVrw"
});

  </script>