エンジニアレポート

HTML5 動画プレイヤー 8選 / CMAF再生にトライ

2020年02月10日

データスタジアムのエンジニア、片岡です。

動画を再生する機能をWEBサイトで提供しようとした際には、videoタグを使うことになります。

生のJavaScriptでvideoタグを制御する事もできますが、より便利・高度に動画を扱いたい場合はHTML5動画プレイヤーライブラリを使って実現します。

2020年1月現在、世に出ているものの中から使えそうなものをまとめてみました。

名前 デモ GitHubスター ライセンス 最終リリース
Video.js デモ 27.1k Apache 2.0 2019.12.25
Plyr デモ 16k MIT 2019.12.25
MediaElement.js デモ 7.1k MIT 2019.10.19
Clappr デモ 4.9k BSD 3-Clause 2019.09.20
Shaka Player デモ 3.6k Apache 2.0 2020.01.16
JW Player デモ プロプライエタリ 2020.01.03
THEO Player デモ プロプライエタリ 不明
VisualOn Player デモ プロプライエタリ 不明

※GitHubスターは2020.1.26時点

Video.js がスター数1位。かなり多くのサイトで使われているようです。
(公式サイトによると450,000以上のWebサイト)
データスタジアムの運営しているサービスでも利用しています。

Plyr もスター数はかなりありますね。機能豊富で開発も活発のようです。

Shaka Player はGoogle製ということで期待ができます。Google I/O 2019でもセッションがあったとの事。
【視聴メモ】 Anatomy of a Web Media Experience (Google I/O ’19)

プロプライエタリの3つについてはGoogle Trendsで比較してみると、JW Player が圧倒的でした。
その他にNexPlayerbitmovin Playerといったものもあります。
プロプライエタリ動画プレイヤートレンド

Plyr

ここでは Plyr の特徴をざっと俯瞰します。
plyrイメージ 画像参照元: https://plyr.io/

・VTTキャプションとスクリーンリーダーの完全サポート
・マークアップを使用してプレイヤーの見た目をカスタマイズ可能
・レスポンシブ対応
・hls.js、Shaka、dash.jsを使用したストリーミング再生のサポート
・ネイティブフルスクリーン
・キーボードショートカット
・ピクチャーインピクチャー
・速度制御機能
・複数のキャプション
・国際化サポート
・シークバー上でサムネイルプレビュー
・フレームワークなし、jQueryは不要

シークバー上でサムネイルプレビューはVideo.jsには標準搭載されていない機能でした。
逆にDRMは Video.js では公式プラグインで利用可能ですが Plyr では不可のようです。

CMAF (Common Media Application Format) サポート

CMAFはfMP4(Fragmented MP4)、HTTPのChunked Transfer Encoding、HLS/MPEG-DASHを利用した低遅延動画配信の新フォーマットです。

従来のHLSライブ配信では10秒以上の遅延が発生するのが一般的でしたが、CMAF、エンコーダ、回線を最適化して配信することで2〜3秒になります。

株式会社フジテレビジョン、ワールドカップバレー 2019 の配信において AWS を利用した超低遅延配信を実現

Plyrが新しい動画配信フォーマットであるCMAFにも対応しているかどうか知りたかったのですが、公式サイトには明確にCMAF対応といった記載がありません。

試しにAWS Media ConvertでCMAF HLS形式の動画を作成し、Plyrで再生できるか検証してみました。(VODですが)

サンプルコード

Plyrだけではなく、hls.jsも合わせて利用します。

サンプル動画再生
以下の組み合わせでCMAF HLSが再生できました。

OS ブラウザ 結果
macOS X Catalina Chrome
macOS X Catalina Safari
Windows 10 Chrome
Windows 10 Edge △(画質が粗い)
Windows 10 Firefox
Windows 10 IE11 △(画質が粗い)
Android 7 Chrome
iOS 13 (iPhone) Safari
iOS 11 (iPad) Safari

MediaConvertでCMAF HLSを作成すると、動画は.cmfv、音声は.cmfaというファイル(中身は両方fMP4)に分割して作成されており、m3u8から参照される形になります。

Developer Toolを見ると、それらのファイルが読み込まれて再生されているのが分かります。

まとめ

という事で、Plyrとhls.jsを使ってWEBサイトでCMAF HLSの再生をすることができました。

CMAFはプレイヤー側の対応がまだまだ、という話もありますがOSSのプレイヤーを使ってマルチプラットフォームで再生することができました。

参考情報

エンジニア募集中

データスタジアムでは一緒に働いていただけるエンジニアを絶賛募集中です!

野球、サッカー、バスケをはじめとして色々なスポーツの仕事があります。

AWSやAzure、動画やAIなど技術的にもチャレンジできる職場です。

テクノロジーの力で、日本のスポーツを一緒に発展させていきましょう!

<募集中のポジション(2020年8月1日現在)>

開発エンジニア(速報サービス)

開発エンジニア(スポーツチーム向けサービス)

インフラエンジニア

最新記事

エンジニアトップ エンジニアインタビュー エンジニアレポート

  • 採用情報
  • おしらせ
  • 掲載事例

ページトップヘ