Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
38
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@t114

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

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 形式の動画ファイルをブラウザで再生する

38
Help us understand the problem. What is going on with this article?
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
38
Help us understand the problem. What is going on with this article?