How to Play a m3u8 File with HTML5 Video Element

Hi, I'm Wesley. I'm a brand ambassador for Kinde. I'll help you master the latest tech here:

👉 NEW React & Next.js Course: https://bytegrad.com/courses/professional-react-nextjs
👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript
👉 Professional CSS Course: https://bytegrad.com/courses/professional-css

👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): https://email.bytegrad.com

Code snippets (YT doesn't allow me to use angled brackets, so add yourself):

video id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
controls
data-setup="{}"
source src="https://d3rlna7iyyu8wu.cloudfront.net/skip_armstrong/skip_armstrong_multi_language_subs.m3u8" type="application/x-mpegURL"
/video

or initialize with JS:
window.addEventListener('DOMContentLoaded', function() {
const player = videojs('my-video', {});
});

- Example link from Dolby: https://d3rlna7iyyu8wu.cloudfront.net/skip_armstrong/skip_armstrong_multi_language_subs.m3u8
- Live video example link from Akamai: https://moctobpltc-i.akamaihd.net/hls/live/571329/eight/playlist.m3u8

🔔 Email newsletter (get new course discounts): https://email.bytegrad.com

0:00 Solution

#webdevelopment #coding #programming