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 storage and playback in supported browsers. IOS Safari does not support offline native HLS download and playback.
- Api methods to download, play and delete content.
- Events to display stored items and download progress.
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>