CMAF再生にトライ2020年02月10日ツイートデータスタジアムのエンジニア、片岡です。動画を再生する機能をWEBサイトで提供しようとした際には、videoタグを使うことになります。生のJavaScriptでvideoタグを制御する事もできますが、より便利・高度に動画を扱いたい場合はHTML5動画プレイヤーライブラリを使って実現します。2020年1月現在、世に出ているものの中から使えそうなものをまとめてみました。多くのサイトで使われているようです。(公式サイトによると450,000以上のWebサイト)データスタジアムの運営しているサービスでも利用しています。スター数はかなりありますね。機能豊富で開発も活発のようです。Google製ということで期待ができます。2019でもセッションがあったとの事。Playerといったものもあります。特徴をざっと俯瞰します。・フレームワークなし、jQueryは不要シークバー上でサムネイルプレビューはVideo.jsには標準搭載されていない機能でした。Encoding、HLS/MPEG-DASHを利用した低遅延動画配信の新フォーマットです。従来のHLSライブ配信では10秒以上の遅延が発生するのが一般的でしたが、CMAF、エンコーダ、回線を最適化して配信することで2〜3秒になります。利用した超低遅延配信を実現Plyrが新しい動画配信フォーマットであるCMAFにも対応しているかどうか知りたかったのですが、公式サイトには明確にCMAF対応といった記載がありません。HLS形式の動画を作成し、Plyrで再生できるか検証してみました。(VODですが)サンプルコードPlyrだけではなく、hls.jsも合わせて利用します。iOSはネイティブでHLS対応のためsourceを使用。その他はhls.jsで再生。iOSはネイティブでHLS対応のためsourceを使用。その他はhls.jsで再生。HLSが再生できました。HLSを作成すると、動画は.cmfv、音声は.cmfaというファイル(中身は両方fMP4)に分割して作成されており、m3u8から参照される形になります。Toolを見ると、それらのファイルが読み込まれて再生されているのが分かります。HLSの再生をすることができました。CMAFはプレイヤー側の対応がまだまだ、という話もありますがOSSのプレイヤーを使ってマルチプラットフォームで再生することができました。利用した超低遅延配信を実現エンジニア募集中!データスタジアムでは一緒に働いていただけるエンジニアを募集しています。野球、サッカー、バスケなどスポーツが好きな方であれば、とても面白い仕事ができる会社です。興味を持たれた方はぜひこちらをご覧ください。