DeskTopのSafariやiPadのSafariでmp4のvideoファイルの読込が遅い問題

<video> タグでmp4動画を再生させる場合基本ストリーミング再生できるのですが、DeskTopのSafariやiPadのSafariでできなかったのでその解決方法は、DescTopのSafariは”HLSを使って再生対応する”

手順

  1. 事前準備:動画のメタデータを先頭にもってくる。
  2. 動画ファイルをセグメント化(細かく分割)
  3. 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>