概要

HLS(HTTP Live Streaming)フォーマットの動画をWEBで再生する方法

HLSに変換

ffmpeg -i video.mp4 -c:v copy -c:a copy -f hls -hls_time 9 -hls_playlist_type vod -hls_segment_filename "video%3d.ts" video.m3u8

hls.jsを読み込み

<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>

VIDEOタグ

<video src="" id="video_main" autoplay muted loop webkit-playsinline playsinline x-webkit-airplay="allow"></video>

スクリプト

let videoSrc = './video/video.m3u8';
let video = document.getElementById('video_main');

if(video){
	// 動画再生
	if(Hls.isSupported()) {
		let hls = new Hls();
		hls.loadSource(videoSrc);
		hls.attachMedia(video);
	} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
		video.src = videoSrc;
	}
}