映像制作 eラーニングのことならビズバレー
文字サイズの変更 標準 
大きい
ホーム > スタッフブログ
スタッフブログ
k.takahashi
k.taguchi
j.hashimoto
j.katou
y.hotate
m.kawai
s_inomata
t.saito
ビズバレーは、東京都 千代田区で活動する、映像制作、DVD、eラーニングを扱う会社です。

HTTP Live Streaming(以下 HLS) とは、Appleが開発した、動画配信のテクノロジーで、iPhoneなどで動画をストリーム再生したい場合、利用される形式です。

HSLは、特別なストリーミングサーバーを必要とせず、通常のWebサーバーから配信できるため、レンタルサーバーでも、その気になれば、少しの設定で配信することは可能です。

HLSの動作デバイスは

  • MacOS X10.6以降のSafariブラウザ
  • iOS3.0以降
  • Android3.0以降
Windowsでは、VLC media playerで(一応)動作しますが、IE、Chrome、Firefox、そしてMacOSでもChrome、Firefoxといったメジャーなブラウザでは、動作しません。

※追記 2014/7/25 FlashでHLSを再生できるようにしたベンダーがでてきています。(有償です)

HLSの特徴として、通信速度に応じて映像画質を変えるアダプティブストリーミングで再生することができます。これは、ビットレート・画面サイズの異なる同一の動画を複数作り、クライアント側の通信速度に応じて、再生しながら切り替えるストリーミングのことを言います。

同じWebサーバーからの配信で、HLSとの比較に、プログレッシブダウンロードの動画ストリームがあります。この場合、別のビットレートの動画に切り替えることができないため、柔軟性の面で、HLSのほうが優れています。逆に、HLSのネックは、再生環境が限られるといった所でしょうか。

HLS動画の仕組み
HLSの動画フォーマットは、MPEG TS(映像 コーデックH.264)、AAC(音声)です。そして、1つの動画は、10秒ごとに分割された、細切れのファイル(.ts)になり(※ これをメディアセグメントファイルと言います。)、目次に相当するプレイリストファイル(.m3u8)の2つから構成されます。

HSLの仕組み

ファイルが分割されているので、プレイリストの再生指示により、どのファイルからも読み込むことができ、プレイリストの指定順に、次々とファイルが読み込まれます。見た目には、ファイルが分割されていても、スムーズに一体として再生されます。

再生順

1つ1つのファイルは、プログレッシブダウンロードのように読み込まれるため、10秒を超えてあまり長い分割だと、再生に時間がかかったり、細かすぎるとサーバーに負担がかかるため、推奨は10秒になっています。

またベンダー製品のAdobe Media ServerWowza Media Serverでは、HLSをサポートしています。通常のWebサーバーで配信できるなら、ストリーミングサーバーは、必要なさそうですが、ファイルをあらかじめ分割せず配信できたり、Flashなど別の配信フォーマットにも1つの動画ファイルで対応できるといった、特徴があります。

Appleのサイトでは、HSLについてのドキュメントが公開されているので、気になる方は、一読しておくといいでしょう。また、サンプル動画のURLも記載されているので、参考になると思います。
HTTP Live Streamingの概要 (PDFファイル)

次回は、実際に作ってみようと思います。
HTTP Live Streaming 動画配信のやり方 (実践)

参考
「FlashでHLS(HTTP Live Streaming)を再生するには・・・ただし有償」
https://bizvalley.co.jp/blog/7055.html

HTTP Live Streaming は、特別なサーバーアプリケーションを必要とせず、MIME設定を行えば簡単に配信できることを、HTTP Live Streaming 動画配信のやり方 (実践)で、説明しましたが、そのとき、Webサーバーは、Apacheをベースにしていたので、今回は、Windows ServerのIISから配信を試してみようと思います。

とはいっても、MIME設定するだけです。

サーバーを用意する
Windows Serverは、AmazonEC2のクラウドを利用しました。数時間程度の利用なら数百円程度で高スペックなサーバーを利用できるので、とても便利です。

20130210-05

IISでMIMEを設定する
IISは、インストール済みであることを前提として、MIMEの設定を追加します。サーバーマネージャーから、Webサイトの設定を行います。いくつか設定項目がある中から「MIMEの種類」を選択します。

20130210-01

MIMEタイプを追加する
「追加」を選択すると、種類を追加することができます。

20130210-02

ここで、下記2つを追加します。

ファイルの拡張子 .m3u8
MIMEの種類 application/x-mpegURL

ファイルの拡張子 .ts
MIMEの種類 video/MP2T

20130210-03

これで設定は完了です、あらかじめ動画用意すると、このような感じで再生できます。

サーバー側のネットワーク負荷をみると、常に負荷が掛かっている訳でなく、断面化された動画のセグメントファイルを、定期的に送信しているように見えます。このあたり、プログレッシブダウンロードと比べてみると面白いかもしれません。

20130210-04

 


こんにちは、田口です、今回からvideo-js の機能をいろいろ見てみようと思います。前回はデモを動かしてみましたが、それだけでもさまざまなボタンや機能があったと思います。

まずは、ということでクローズドキャプションとサブタイトルについて見てみましょう。この機能は、動画内の設定したシーク位置に字幕を表示することができます。デモでは2種類の色違いの文字が表示されていたと思います。これが、クローズドキャプションとサブタイトルになります。

20141218-1

ざっくり違いを書いてみると

クローズドキャプション
聴覚障害を持つ方にも考慮された字幕

サブタイトル
映画などの字幕(英語→日本語)や音声の内容を文字にしたもの

私の理解では、話し手のことばの言語を、そのまま文字にして起こしたもの、そのなかで状態の伝達に必要な(効果)音の文字表現は、クローズドキャプションに相当して、海外の映画などの日本語字幕は、サブタイトルに相当すると思います。例えば、ガラスが割れる音「ガシャーン!」という音の表現は、クローズドキャプションでは入り、一方、サブタイトルでは入らないケースもあるのかもしれません。

調べてみたら意外と難しかったというオチですが、ではテロップはどちらに入れるの?といえば、サブタイトルになると思います。また、動画教材で音声を切った状態で、学習できるように文字を起こす場合、その文字をクローズドキャプションに設定するといった使い方もできるでしょう。

※ ちなみに、デモの動画では、そこまで深く区別されておらず、クローズドキャプションとサブタイトルの内容は同じものです。

こんにちは、田口です、今回はオープンソースのHTML5 ビデオプレイヤーの videojs を試してみようと思います。このプレイヤーの開発元は 動画配信プラットフォームのBrightcove(ブライトコーブ社)のため、結構 本格的な作りです。今回は、まずということでデモを動かしてみましょう。

20141130-1

サイト上のDOWNLOADリンクから、ファイルをダウンロードします。ファイルを解凍して中をみてみると、video-js フォルダが入っています。

20141130-2.fw
とりあえずデモを動かす程度ならば、このフォルダをそのまま、FTPでサーバー上にアップロードするだけで十分です。この video-js フォルダの中には、demo.htmlファイルが入っています。このファイルをブラウザからアクセスしてみると、プレイヤーとデモ映像を確認することができます。

20141130-3
このように表示されればOKです。
20141130-4

実際の動画
https://bizvalley.co.jp/asset/01/video-js/demo.html

利用する場合は、demo.htmlやCSSなどをカスタマイズするとプレイヤーの色を自由に設定できたり、1.5倍速など早送り再生機能を付けることもできます。特にFlashのプレイヤーでは、早送り再生はできないので、特に教育系の動画では重宝する機能ではないでしょうか。いろいろ機能がついていますので、Youtubeではなく自前で動画を配信したい場合、プレイヤーの候補として有力な一つになると思います。

※ Flashでどうしても早送り再生したい場合は、動画自体をエンコード時に早送り状態、例えば1.5倍速で標準再生されるようにエンコードします。そして、1倍速から1.5倍速に切り替えるとき、再生位置を記憶して動画ファイルをすり替えます。つまり、x倍速分の動画ファイルが必要になり、サーバー上のディスク容量も消費しますが、動画の本数が少ない場合は、有用な方法です。

こんにちは、田口です。今回は、HTTP Live Streaming(以下HLS)をなんとかFlashで再生する方法を見てみようと思います。

HLSの基本は「HTTP Live Streaming 動画配信のやり方 (概要)」の記事をご覧いただくとして、HLSの弱点の1つは、マルチプラットホームに欠ける点が大きなデメリットでした。最近のAdobeは、Adobe Primetimeという、動画配信プラットホームの提供を始めています。そこでは、HLS、MPEG-DASHもサポートしているようで、FlashでHLSの再生ができることが分かります。

しかしながら、動画プレーヤー用 SDKは一般に公開されておらず、簡単に試すことはできません。そして、動画プレイヤーを提供する、flowplayerJW PlayerもFlashプレイヤーとしてHLS再生をサポートしていますが、残念ながら有償です。

今回は、flowplayerのHLSサイトを見ると、1つサンプルを見ることができます。

20140725-1

この動画が実際に、HLSで再生されているかブラウザのデベロッパーツールで見てみましょう。そうすると、m3u8ファイル、動画のセグメントファイルである、.tsファイルを読み込んでいることが分かります。Flashですので、プラグインが入っていれば、どのブラウザでも動作しますので、ブラウザ依存は起きにくいでしょう。

20140725-2

flowplayerのデモバーションでは、localhost上(自身のPC上)で、サンプルを動かすことができます。なにぶんlocalhostでしか動きませんので、レンタルサーバーなどで動きませんのでご注意ください。

このようにHLSをFlashで再生できるメリットは、Flashのプラグインが入っていればHLSを再生できること、複数の動画フォーマットを作る必要がないことです。sdkは有償ですが、複数フォーマット、ディスク容量を考慮するならば、おそらく元は取れるでしょう。

将来的には、動画の配信方式は、HLSとMPEG-DASHが主流になると言われ、DRMもプラグインを使わずにブラウザ内で処理できるようになるそうです。YoutubeやMicrosoft OneDriveでの動画再生は、(いつの間にかに)MPEG-DASHに切り替わっていることから、トレンドは変わりつつあるようです。

-