Plyr Player Demo Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Using latest stable Plyr version 3.x styling -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/plyr@3/dist/plyr.css">
<!-- Include plyr.js and dash.js in your page -->
<script src="https://cdn.jsdelivr.net/npm/plyr@3/dist/plyr.min.js"></script>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
<script src="https://cdn.jsdelivr.net/npm/rangetouch/dist/rangetouch.js" async></script>
<!-- Polyfills -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent"></script>
<title>Auto-DASH-HLS Plyr Player</title>
</head>
<body>
<main role="main" id="main">
<video id="player" controls poster="thumbnails/poster.png">
<!-- HLS-Playlist location -->
<source src="playlist.m3u8" type="application/x-mpegURL">
<p>
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video.
</p>
</video>
</main>
<script>
video = document.querySelector('#player');
/* Switch to DASH-Stream, if supported */
if ( typeof ( window.MediaSource || window.WebKitMediaSource ) === "function" ) {
(function () {
/* DASH-Playlist location */
var mpd = "playlist.mpd",
dash = dashjs.MediaPlayer().create();
dash.initialize(video, mpd, false);
})();
};
/* Initialize Plyr Player */
const player = new Plyr('#player', {
/* Options */
"fullscreen": { enabled: true, fallback: true, iosNative: true },
"previewThumbnails": { enabled: true, src: 'thumbnails/thumbnails.vtt' }
});
</script>
</body>
</html>