byClassmethod検索AWSAlexaモバイルビッグデータサーバーレスTableauAlteryxイベントWebサイトの動画の取り扱いでやってしまう10の間違いCloudinary技術ブログ公式翻訳Cloudinary2019年05月08日classmethod(1)21インターネット上で動画の使用が爆発的に増加していることは、特に驚くことでもないでしょう。SpeedCurveのブログ記事からも、平均的なサイトにおける動画の劇的な増加がご覧いただけます。動画の増加に伴い、帯域幅の使用量も増えます。これは、ITの予算問題だけでなく、サイト訪問者にとっても費用がかかるものです。費用以外にも、ユーザーエクスペリエンスの考慮が必要となります。ページが重いほど、ページの読み込み速度が遅くなり、訪問者がサイトから離れていく可能性が高くなってしまいます。ページの読み込み速度はSEOランキングにおいても重要な要素のため、動画は真剣に考え、正しく扱う必要があるものと言えます。コーデック、ビットレート、アダプティブビットレートストリーミングなど、開発者にはまだまだ馴染みのない用語で示され、なかなか難解であり、その結果、動画の導入においては様々な誤りがあります。Cloudinaryは、よくある動画の問題を多数解決します。本記事では、私たちが日々直面している動画に関する課題とそれらがどのように解決できるか(するべきか)を見直していきます。Cloudinaryを使用していない開発者の方々にとって、役に立つかもしれません。1)間違った映像解像度を使用している恐らく最もよく見られる一般的な間違いは、実際の表示に比べて大きすぎる解像度で配信されている動画です。画像と同じように、ブラウザのサイズ変更に頼り、ブラウザがレンダリングできるよりも多い画素数を配信するのは無駄なことです。映像のエンコードには時間がかかり、効率的に行えるソリューションもそれほど多くはありません。それでは、どうすればいいでしょうか?開発者でよくあるのが、ページ上で<video>タグ内に動画を参照させるなど、自分の知る方法で済ませてしまい、そして他のもっと簡単なものに移ってしまうこと。これも非常に一般的な方法ではあります。この例をyahoo.comのホームページから見てみてください。コンテナは幅215pxなのに、幅1080pxもの動画が取得されています。結果はどちらの方法でも同じのように見えますが、サーバー上で動画を適切なサイズでエンコードすると、膨大な帯域幅を節約することができます。ブラウザに送信されてレンダリングできない分の画素数はすべて、無駄なバイトということです。2)間違った動画コーデックを使用している上記と同様に、慣れていない開発者は、与えられたものをそのままページに表示させるというアプローチを取るかもしれません。多くの場合、これはWeb向けに最適化されていないコーデックを使用することになり、またバイトを無駄にしてしまいます。フォーマットと同じようにコーデックを考えてみてください。見た目がほとんど同じだとしても、サイズは大きく異なります。動画コーデックでも同じことで、適したツールを選択しているか確認が必要です。すべてのブラウザでサポートされており、Web動画配信用に作成されているため、少なくともWebの動画をH.264としてエンコードしておいた方が良いでしょう。3)高すぎる動画ビットレートを使用しているビットレートは、1秒の動画をエンコードするのに必要なビット数です。フレーム内のピクセル数の合計に、1秒あたりのフレーム数を掛け、さらに1pxあたりのバイト数を掛けて、ビットレートを求めます。高すぎる設定にしても、画像の品質設定と同じように、目では気付かない程度の違いでファイルが重くなるだけです。ビットレートは解像度の関数なので、必要な解像度を決め、それから求める見栄えを再現するビットレート乗数を考えます。その後は、異なる解像度でのエンコードにその乗数を再活用できます。Cloudinaryを使用してこれを自動的に行うことも可能です。4)アダプティブビットレートストリーミングを使用していないNetflixやYouTubeを見ていて、品質の変化に気付いたことはありますか?はっきりと滑らかな映像が、突然粗く途切れ途切れになるなど。それは、アダプティブビットレートストリーミングの動きを確認されたのです。アダプティブビットストリーミングでは、一つの動画を複数のビットレート・解像度でエンコードし、閲覧者の画面サイズと利用可能な帯域幅に基づいた最適なものを動画プレーヤーに判断させます。バッファリングや、画面表示に対して大きすぎる動画のダウンロードをさせる代わりに、訪問者それぞれが正しい解像度/ビットレートを取得できるようにし、またネットワーク状況がストリーミングの途中で変化しても適応できます。長いフォームの映像にのみ使用すべき方法であり、20秒程度などの短い映像には不要です。5)最新の動画コーデックを使用していない上記ではH.264コーデックに触れましたが、実はもっと最新で効率的なコーデックもあります。VP9やH.265などのコーデックの方が、30%から50%ほど効率が良いのです。そのため、Webサイトのパフォーマンスを重視している場合にはこれらも無視できません。XRといった画像フォーマットに似ており、古いお馴染みのJPGよりも効率的ですが、広くサポートされているわけではありません。幸いなことに、どのユーザーにどのコードを提示するかの大量の条件付きロジックを書かなくとも、これらの最新のコーデックは簡単に利用することができます。動画プレーヤーの素晴らしいところは、複数の動画のオプションを与えておくと、再生可能な最初の動画を再生してくれることです。これにより非常に簡単に、複数のコーデックを用意して、再生対応している最も効率的なコーデックをブラウザに選択させることができます。ユーザーエクスペリエンス向上と経費節約の両方を達せさせるのに最も簡単な方法の1つです。7)コンテンツに間違ったビットレートを使用しているアクションシーンやサッカーの試合でコンテンツが途切れるのを見たことはありますか?これは、ビットレートの設定がシーン内のすべての動きを表現するには低すぎる場合に発生します。動画コンテンツを圧縮するためにコーデックが使用する方法の1つは、フレーム間でピクセル情報を共有することです。動き回っているアクションシーンでは、フレーム間で共通している情報は大量にはありません。このような状況では、通常よりも高いビットレートを維持しながら映像解像度を下げることを検討すると良いでしょう。その一方、あまり動きのないシーンもあります。Daisy」のような映画では、高解像度にするとしても恐らく高いビットレートは必要ないでしょう。このような動画コンテンツは通常よりも低いビットレートでエンコードすることで、さらに節約することができます。8)自動再生動画をミュートしていない今日のブラウザは、ミュートされていない限り動画を自動再生しません。Chromeが2018年4月に動画のミュート要件をリリースしましたが、今なお静止してしまっている動画バナーが見られます。したがって、ヒーローの背景映像でも、その他どんな映像も、ページ読み込み時に自動再生させたい場合には、次のようにvideoタグに”muted"属性が追加されていることを確認してください。“playsinline"属性を付与しましょう。playsinline>...</video>9)HTML5動画プレーヤーの代わりに重いプレーヤーを使用している特別な動画プレーヤーでは、ユーザーは余計なダウンロードが必要となります。これらの動画プレーヤーはプラグインで、アダプティブビットレートストリーミングのサポート、分析イベント、ホットスポット、360度映像のサポート等といった、他では提供できない優れた機能が必要な場合に、追加することができます。いった動画プレーヤーは、ヒーローの背景映像や短い形式のビデオクリップなどには、過剰でまったく不必要です。ユーザーがプレーヤーをダウンロードしなければならず、無駄なバイト数が増えることになります。HTML5動画プレーヤーは実際には非常に優れており、恐らくWeb上のほとんどの動画コンテンツのニーズを満たせるでしょう。こちらの記事で詳細をご覧いただけます。動画プレーヤーが必要なときには、Cloudinaryが提供しているVideo.jsをベースとした無料のオープンソースプレーヤーもご利用いただけます。10)動画の代わりにGIFを使用しているアニメーションGIFはなかなかすごいです。短く、大概おかしなビデオクリップで、静止画では表現できないコンテキストがあります。GIFはかなり素晴らしいフォーマットで、実際に一番最初のWeb対応の画像フォーマットでした!一方で、フォーマットは古くなってきており、時代の流れに追いついていません。GIFの最後のアップデートはなんと29年前です。GIFはサイズが非常に大きくなることがあり、小さいクリップで数メガバイトになることもあります。ソリューション?それは、動画フォーマットに変換することです!現代の動画コーデックは、最初からWeb対応になっていて、動きのある画像を表示する方法として帯域幅効率も良く設計されています。私たちはGIFフォーマットに敬礼し崇拝していて、より良い代替手段があるにも関わらず、GIFを使い続けて私たち自身と訪問者に害を及ぼしているのです。(51kb)最後にこの記事では、Cloudinaryが日々直面する最も一般的な動画に関するWebサイトの問題をまとめてみました。確実にすべての問題を記述したわけではありませんが、解決するのに最も費用対効果が高いものをまとめ、皆さんにとって最適なソリューションを見つけるためにそこからさらなる調査ができるよう、一般的な説明を記載しました。Cloudinaryについてまだ聞いたことがない方のために説明しておくと、Cloudinaryでは上記のすべてと、他にもいくつかの問題が解決されています。Cloudinaryにアップロードされたすべての動画は、あらゆるサイズ、フォーマット、コーデック、品質に動的に変換できるため、Webサイトやユーザーの期待に最も合った様々な設定を簡単にテストすることができます。すべての動画は、正しいキャッシュ設定を使用し、書籍のあらゆるベストプラクティスを採用した高速CDNから配信されます。それから、Cloudinaryのクラウドベースの動的な動画の機能は、OTTのレスポンシブデザインに最適です。Cloudinaryは実際にはそれ以上のものを提供しています。動画や画像アップロードとクラウドベースのストレージを管理しており、さらにサインアップは無料です。Cloudinaryを試してみてください。上記のリストで何か重要なことが漏れていた場合は、下部のコメント欄で教えてください。13,813まだプロフィールが設定されていません。〜ログ収集、監視、分析を触って体感しよう!〜」を開催しますお申し込み受付は終了しました。ありがとうございました。今後セミナーのお知らせを受け取りたい方は、こちらからご登録をお願いします。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に関する技術情報サイトです。