Help us understand the problem. What is going on with this article?

[メモ]video.jsでHLS配信をやってみた

More than 1 year has passed since last update.

HLS(HTTP Live Streaming)がどういうものなのか色々読んでみたもの実際やってみた方が面白いし勉強になると思ったので、細かいことは置いておいて、実際にやってみたときのメモです。

環境

  • Vagrant 1.9.7
  • CentoOS 7.3.1611
  • Apache 2.4.6
  • FFmpeg 2.6.8

準備

apacheインストールと自動起動設定

sudo yum install -y httpd httpd-devel
sudo systemctl start httpd
sudo systemctl enable httpd

mp4ファイルをHLS配信ができるよう変換する

HLS配信するには.m3u8と.tsファイルという2種類のファイルが必要となります。
HLS配信はクライアントが最初に.m3u8ファイルを読み込み、そこに記載された.tsファイルを順次読み込んで再生していくという仕組みになっています。

FFmpegをインストール

mp4を変換する方法はいろいろあるみたいですが、今回はFFmpegを使います。

sudo yum -y install epel-release
sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm
sudo yum -y install ffmpeg

FFmpegでmp4ファイルを変換する

  • /var/www/html/のオーナを変える。
sudo chown vagrant:vagrant /var/www/html/
  • /var/www/htmlにmp4ファイルをアップロードする。

  • mp4ファイルを変換する。

cd /var/www/html
ffmpeg -i input.mp4 -vcodec libx264 -acodec libfaac output.m3u8

変換が正常に行くとoutput.m3u8というファイルとoutput0.ts~output?.tsというファイルが作成される。

output.m3u8の中身は下記みたいになっています。

output.m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:9
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:8.333333,
output0.ts
#EXTINF:8.333333,
output1.ts
#EXTINF:4.066667,
output2.ts
#EXTINF:4.200000,
output3.ts
#EXTINF:3.200000,
output4.ts
#EXT-X-ENDLIST

再生用ページを作成する(その1)

注意:HLS配信にネイティブで対応しているブラウザでしか再生できません。
(ChromeやFirefox等でも再生する方法は次項)

vi play.html

play.html
<!DOCTYPE html>
<html>
<body>
  <video width="640" height="360" src="output.m3u8" controls />
</body>
</html>

HLS配信にネイティブで対応していないブラウザでも再生できるようにする

前項までの作業でEdgeやSafariでは再生できますが、HLS配信にネイティブで対応していないChromeやFirefox等ではまだ再生できません。再生できるようにするにはvideo.jsというライブラリを利用します。

video.jsを導入する

video.jsとプラグイン(videojs-contrib-hls、videojs-contrib-media-sources)を導入する。
下記リンク先からダウンロードし/var/www/html/static/js/var/www/html/static/cssにアップロードする。
video.min.js, video-js.min.css v6.2.7
videojs-contrib-media-sources.min.js v4.5.2
videojs-contrib-hls.min.js v5.11.0

下記のように配置する。

|--output1.ts
|-- ・
|-- ・
|-- ・
|--output.m3u8
|--play.html
|--static
   |--css
   |  |--video-js.min.css
   |--js
      |--videojs-contrib-hls.min.js
      |--videojs-contrib-media-sources.min.js
      |--video.min.js

再生用ページを作成する(その2)

vi play.html
play.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Video.js Sample</title>
  <link href="static/css/video-js.min.css" rel="stylesheet">
  <script src="static/js/video.min.js"></script>
  <script src="static/js/videojs-contrib-media-sources.min.js"></script>
  <script src="static/js/videojs-contrib-hls.min.js"></script>
</head>
<body>
<video id="test" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
 width="640" height="360" data-setup="{}">
  <source src="output.m3u8" type="application/x-mpegURL">
</video>
</body>
</html>

参考

video.js で m3u8 形式の動画ファイルをブラウザで再生する

t114
基本的に自分用の備忘録メモとして使っているため、細かいところはご容赦ください。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした