Shaka Offline in Playlists

Shaka Offline playback in playlists

Offline storage content integration using Shaka Player. With the use of Shaka player integration dowloading protected and non-protected HLS and Dash content for offline playback is possible.

While downloading content progresss is visible in the download button and from events to display progress externally.

Stored offline items are given in events to display the content for playback.

Api methods are available to play the selected offline item and delete the selected item.

Features

Offline playback in playlists

    <div class="flex w-full h-auto my-auto">
          <div id="playlists" class=""></div>
  </div>
  <script type="text/javascript">
  	var player = jwplayer("playlists").setup({
    "aspectratio": "16:9",
    "playbackRateControls": true,
    "playlist": [
        {
            "metadata": {
                "description": "Big Buck Bunny",
                "image": "../../images/bbb.png",
                "title": "Big Buck Bunny"
            },
            "sources": [
                {
                    "file": "https://videos.electroteque.org/hls/bigbuckbunny/playlist.m3u8",
                    "shaka": true,
                    "type": "mp4"
                }
            ],
            "title": "Big Buck Bunny"
        },
        {
            "metadata": {
                "description": "Big Buck Bunny Dash",
                "image": "../../images/bbb.png",
                "title": "Big Buck Bunny Dash"
            },
            "sources": [
                {
                    "file": "https://videos.electroteque.org/dash/nodrm/bbb/bbb.mpd",
                    "shaka": true,
                    "type": "application/x-mpegurl"
                }
            ],
            "title": "Big Buck Bunny Dash"
        }
    ],
    "plugins": {
        "../../js/shakaoffline-8.20.0.js": {}
    },
    "width": "100%"
});

player.on("offline-items", (items) => {
console.log("Offline items ", items);
}).on("download-progress", (data) => {
console.log("Download Progress ", data);
}).on("online-status", (online) => {
console.log("Is Online: ", online);
}).on("content-stored", (content) => {
console.log("Content Stored ", content);
}).on("download-error", (error) => {
console.log("Download Error ", error);
}).on("download-start", (data) => {
console.log("Download Started ", data);
}).on("content-removed", (item) => {
console.log("Content Removed ", item);
}).on("content-online", (item) => {
console.log("Switching back to online source ", item);
}).on("content-offline", (item) => {
console.log("Switching to offline source ", item);
});
  </script>