Encode HLS with ffmpeg and display using hls.js in a HTML5 page
| $ ffmpeg -r 5 -i <INPUT_VIDEO> -map 0 -vcodec libx264 -f segment -segment_list out.m3u8 | |
| \ -segment_time 10 -segment_list_flags +live -segment_wrap 32 out%02d.ts | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> | |
| </head> | |
| <body> | |
| <video id="video"></video> | |
| <script> | |
| if(Hls.isSupported()) { | |
| var video = document.getElementById('video'); | |
| var hls = new Hls(); | |
| hls.loadSource(URL_TO_M3U8_FILE'); | |
| hls.attachMedia(video); | |
| hls.on(Hls.Events.MANIFEST_PARSED,function() { | |
| video.play(); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment