清水俊也(76)31はじめに清水です。HLS)を使って各種ブラウザからHLS形式の配信を再生する最低限度の設定をまとめてみました。HLS)のページを確認してみると、以下の記載がありました。Streaming/VHS)を使用することが推奨されています。7に組み込まれているとのことです。Streaming/VHS)を使ってHLS形式のライブ/オンデマンドストリーミング動画を再生した手順を、個人的な備忘録がてらまとめてみたいと思います。VHSでHLSを再生してみたvideo-jsタグの指定HTMLページ中に動画表示を埋め込む、video-jsタグを設定します。(例えば以前紹介したvideojs-contrib-hlsを使う場合はvideoタグでした。指定する属性など基本的な使い方はvideoタグと同様のようですが注意しましょう。)動画を表示させたい場所に記載します。widthとheighは動画Playerのサイズになります。srcでm3u8ファイルのURLを指定します。...</body>なお、動画を構成するファイル(m3u8プレイリストファイルとセグメントファイル)を別ドメインから配信する場合は、配信側で適切なCORS設定をしていること(CORSヘッダを付与していること)を確認しましょう。Streaming(VHS)のJavaScriptライブラリを読み込むコードと、player変数を記載します。タグの直後に以下のようにscriptタグでそれぞれ指定します。Streaming(VHS)の場合はVideo.js自体に組み込まれているとのことで、バージョン7.4.1で確認したところvideo.jsのみの読み込みで動作しました。*2なおバージョンについては本日2019/02/06時点で確認できる最新の7.4.1を使用していますが、適宜読み替えてください。CDNについてはhttps://unpkg.com/video.js@7.4.1/dist/video.jsなどunpkgで配布されているものを使うこともできるようです。GitHubからコードを取得して自環境に配置するというのも良いかと思います。Video.js用スタイルシートの設定Video.js用のスタイルシート(CSS)についても設定を行います。(これを設定しておかないと、再生ボタンやシークバーなどがきちんと表示されません。)スタイルシート用ファイルについてもCDNで配布されているものを利用します。以下のように、headタグ間にスタイルシートを指定します。...</head>こちらもunkpgで配布されているhttps://unpkg.com/video.js@7.4.1/dist/video-js.cssも利用可能のようです。必要に応じて自環境に配置などでも良いでしょう。htmlファイルにまとめると...以下となります。(videoタグのsrcについてはダミーのm3u8ファイルのURLとしています。Streaming/VHSを使ってHLS形式のストリーミング配信を再生する最低限度の設定についてまとめてみました。7でVHSが同梱されたことによりライブラリの読み込みが減ったことが大きいかなと思います。Stremaing再生機能が追加されたことが大きいですね!(なお、必要に応じてVHSを含まない別のVideo.jsライブラリを使うこともできるそうです。7については下記のブログエントリににロードマップも公開されています。Explorerのサポート削除とのことです。10が対象となるようですので古い環境での再生が必要な場合にはご注意ください。VHSでDASHも再生してみた最後におまけです。今回紹介したVHS、大きな特徴の一つはこのライブラリでmpeg-DASHの再生も可能なことです。以下のようにvideo-jsタグ内のsourceタグ部分を変更することでmpeg-DASHも再生することができました。srcの他、typeも変更するところがポイントですね。Streamingのサイトにはvideojs-http-streaming.jsファイルを読み込むコードが記載されているなど、Video.jsのバージョンなどで変わる可能性もあります。video.jsの読み込みだけでうまく動作しない場合は、https://unpkg.com/@videojs/http-streaming@1.8.0/dist/videojs-http-streaming.jsなども読み込んで試してみると良いかもしれません。6で対応が必要になるのではないでしょうか。762,371クラスメソッドAWSチーム清水です。トレードマークは帽子と黒ぶちメガネ。〜ログ収集、監視、分析を触って体感しよう!〜」を開催しますお申し込み受付は終了しました。ありがとうございました。今後セミナーのお知らせを受け取りたい方は、こちらからご登録をお願いします。CAFEのサービスが「LINEアプリ」として利用できるようになりました。これまではLINEのトークから利用する形でしたが、LINEサービス内から利用できるようになりました。これまでより便利に、シームレスにご利用いただけます。Cafe300件のシェア(そこそこ話題の記事)インフラ未経験の私が内定から入社までに読んだ技術書11冊ブログ記事2020年01月16日Yui300インフラ未経験で入社した私がインフラを勉強するために読んだ技術書11冊を感想とともにまとめました。平野重利123Pythonで、標準入力を変換して標準出力に出すCLIプログラムのテンプレートをご紹介します。菊池修治47こんにちは、菊池です。勉強会#1に登壇しました。サーバのみならずネットワーク機器の仮想化も年々進んでいます。スペックに縛られないこととか、展開のしやすさとか初期考慮点が少なくなるのは嬉しいです。武田隆志1098このエントリは、2018年、2019年に公開したAWS全サービスまとめの2020年版です。これまではいくつかに分割して公開していましたが、1エントリにまとめてほしいという要望をもらっていたため、今年は1エントリに集約してみました。CAFEのサービスが「LINEアプリ」として利用できるようになりました。これまではLINEのトークから利用する形でしたが、LINEサービス内から利用できるようになりました。これまでより便利に、シームレスにご利用いただけます。Cafe300件のシェア(そこそこ話題の記事)インフラ未経験の私が内定から入社までに読んだ技術書11冊ブログ記事2020年01月16日Yui300インフラ未経験で入社した私がインフラを勉強するために読んだ技術書11冊を感想とともにまとめました。悠紀235ShifterはWordPress環境をサーバーレスで立ち上げ、静的なサイトを生成することができるサービスです。FAQサイトをサクッと作ってみました。Takumi227こんにちは。DA事業本部の春田です。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。