概要
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;
}
}