Plyr.io Customized

Audio MP3

html

<link rel='stylesheet' href='https://cdn.plyr.io/3.6.8/plyr.css'> <script src='https://cdn.plyr.io/3.6.8/plyr.js'></script> <audio class='audio-player' controls> <source src="https://onedrive.live.com/download?cid=126C973B282483C8&resid=126C973B282483C8%212363&authkey=AKTslNat-KT50GE" type="audio/mp3"> </audio>

js

<script> const players = Array.from(document.querySelectorAll('.audio-player')).map(p => new Plyr(p)); </script>

css

See All in 1 Customized css

---

HTML MP4

Html

<link rel='stylesheet' href='https://cdn.plyr.io/3.6.8/plyr.css'> <script src='https://cdn.plyr.io/3.6.8/plyr.js'></script> <video id="player" playsinline controls data-poster="/path/to/poster.jpg" class="js-player"> <source src="https://cdn-128.anonfiles.com/5bd9i6Xfue/e5308c9c-1639769822/Annaatthe%205.8gb.mkv" type="video/mp4" /> <!-- Captions are optional --> <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default /> </video>

css

See All in 1 Customized css

js

Mp4 video Player js code with custom controls

---

Hls Auto Query Selector

Html

<link rel='stylesheet' href='https://cdn.plyr.io/3.6.8/plyr.css'> <script src='https://cdn.plyr.io/3.6.8/plyr.js'></script> <script src="https://cdn.jsdelivr.net/npm/hls.js"></script> <video id="dashplayer" controls crossorigin playsinline data-poster="/path/to/poster.jpg"> <source type="application/x-mpegURL" src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" > </video>

css

See All in 1 Customized css

js

Hls Auto Quality Selector Js

---