HLS(HTTP Live Streaming)動画を再生する

  • Updated: 2023.07.14
  • Published: 2023.02.26
  • 1,552views

概要

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

関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ