DeskTopのSafariやiPadのSafariでmp4のvideoファイルの読込が遅い問題
<video> タグでmp4動画を再生させる場合基本ストリーミング再生できるのですが、DeskTopのSafariやiPadのSafariでできなかったのでその解決方法は、DescTopのSafariは”HLSを使って再生対応する”
手順
- 事前準備:動画のメタデータを先頭にもってくる。
- 動画ファイルをセグメント化(細かく分割)
- JSでHSL対応/非対応ごとに再生方法を記述
0.事前準備:動画のメタデータを先頭にもってくる。
ffmpegでメタデータを先頭にもってきます。
メタデータ:動画の長さetcが後方にある場合は読込が重くなるため(Safariに限らず)
$ ffmpeg -i input.mp4 -codec copy -movflags faststart output.mp4
1.動画ファイルをセグメント化(細かく分割)
ffmpegで分割します。
ffmpeg -i input.mp4 -c:v copy -c:a copy -f hls -hls_time 9 -hls_playlist_type vod -hls_segment_filename "output%3d.ts" output.m3u8
- m3u8ファイル(output.m3u8)は、分割されたファイルの再生順などが記載されたテキストファイル
- 分割ファイル(output{xxx}.tsは分割された動画ファイル
2.JSでHSL対応/非対応ごとに再生方法を記述
2–1.HLS対応のライブラリを読込ます。
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> </head>
2–2.videoタグにHLS対応/非対応両方のsrcをdatasetとして記述
<video
id="video"
data-src="./assets/video/output.mp4" //HLS非対応用
data-src-hls="./assets/video/output.m3u8" //HLS用
>
</video>
2–3.JSで分岐処理
それぞれ再生方法を処理する。
if(Hls.isSupported()) { //HLS対応
var hls = new Hls();
hls.loadSource(video.dataset.srcHls);
hls.attachMedia(video);
}else{ //HLS非対応
video.src = video.dataset.src;
}
video.play();
2–4.ソース全体像
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> </head>
<body>
<video
id="video"
data-src="./assets/video/output.mp4"
data-src-hls="./assets/video/output.m3u8">
</video>
<script>
var video = document.querySelector('#video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(video.dataset.srcHls);
hls.attachMedia(video);
}else{
video.src = video.dataset.src;
}
video.play();
</script>
</body>
</html>
