Skip to content

Instantly share code, notes, and snippets.

@riledhel

riledhel/gist:4e76868c496e11e773094b70fa566e0b

Created May 1, 2016 23:04
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save riledhel/4e76868c496e11e773094b70fa566e0b to your computer and use it in GitHub Desktop.
Save riledhel/4e76868c496e11e773094b70fa566e0b to your computer and use it in GitHub Desktop.
Download ZIP
Encode HLS with ffmpeg and display using hls.js in a HTML5 page
Raw
gistfile1.txt
$ 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