YouTubeなどを使わずに長い動画をホームページに掲載する方法

2021年1月25日 16:19

数分程度あるmp4形式の動画をホームページに掲載すると、読み込みにすごく時間がかかります。
YouTubeなどのストリーミング再生が可能なサービスにアップして埋め込む方法が主流ですが、YouTubeなどが利用できないこともありますよね。

HLSというストリーミングプロトコルを使って、YouTubeなどを使わずに長い動画をホームページに掲載する方法を紹介します。
もちろんストリーミングサーバを用意する必要もありません。
hls.jsというJavaScriptライブラリを読み込んで、HTMLを置いてるサーバと同じサーバにm3u8とtsファイルという動画ファイルを置くだけです。

以下、macでの手順を解説します。

hls.jsを読み込み

CDNを利用するか、GitHubからソースをダウンロードして利用してください。

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

https://github.com/video-dev/hls.js

m3u8、tsファイルの作成

mp4からm3u8とtsファイルを書き出します。
mp4ファイルと同じディレクトリに m3u8 書き出し用のディレクトリ「hls」を作成します。
テキストエディタで「main.py」をmp4と同じディレクトリに作成します。

index.html(hls.jsを読み込んだファイル)
mov.mp4
main.py
|-----hls

# -*- coding: utf-8 -*-
import sys, os
import subprocess
import codecs
def create_hls():
   # 高画質m3u8の作成 (mov.mp4 -> hls/h.m3u8)
   c = 'ffmpeg'
   c += ' -i mov2.mp4'
   c += ' -codec copy -vbsf h264_mp4toannexb -map 0'
   c += ' -f segment -segment_format mpegts -segment_time 5'
   c += ' -segment_list hls/h.m3u8'
   c += ' hls/h_%5d.ts'
   code = subprocess.call(c.split())
   print('process=' + str(code))
   # 低画質mp4の作成 (mov.mp4 -> input_low.mp4)
   c = 'ffmpeg'
   c += ' -i mov2.mp4'
   c += ' -f mp4 -vcodec h264 -vb 500k -s 640x360 -pix_fmt yuv420p'
   c += ' -ac 2 -ar 48000 -ab 128k -acodec aac -strict experimental'
   c += ' -movflags faststart'
   c += ' input_low.mp4'
   code = subprocess.call(c.split())
   print('process=' + str(code))
   # 低画質m3u8の作成 (input_low.mp4 -> hls/l.m3u8)
   c = 'ffmpeg'
   c += ' -i input_low.mp4'
   c += ' -codec copy -vbsf h264_mp4toannexb -map 0'
   c += ' -f segment -segment_format mpegts -segment_time 5'
   c += ' -segment_list hls/l.m3u8'
   c += ' hls/l_%5d.ts'
   code = subprocess.call(c.split())
   print('process=' + str(code))
   # 低画質高画質を含めたm3u8の作成 (->hls/playlist.m3u8)
   t = '#EXTM3U'
   t += '\n##EXT-X-VERSION:3'
   t += '\n#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=500000'
   t += '\nl.m3u8'
   t += '\n#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=4000000'
   t += '\nh.m3u8'
   f = codecs.open('hls/playlist.m3u8', 'w', 'utf-8')
   f.write(t)
   f.close()
if __name__ == "__main__":
   create_hls()

拡張子がmp4、m3u8になっているところは任意のファイル名に変更（変換元と変換後のファイル名）してください。

mp4→m3u8へ変換

mp4からm3u8に変換します。

ターミナルを立ち上げ、動画のディレクトリに移動します。

cd 動画のディレクトリ

以下のコマンドを実行

python main.py

これでm3u8とtsファイルが書き出されます。

HTML側のコード

あとはHTML側でvideoタグとJavaScriptを指定すれば完了です。

<video id="video" class="videoCentered video-js vjs-default-skin" playsinline muted autoplay"></video>
<script>
 window.onload = function(){
   if(Hls.isSupported()) {
     var video1 = document.getElementById('video');
     var hls1 = new Hls();
     hls1.loadSource('./hls/h.m3u8');
     hls1.attachMedia(video1);
     hls1.on(Hls.Events.MANIFEST_PARSED,function() {
     });
   }
 };
</script>