HTML5 およびスマート プレーヤを使用して動画を配信する

このトピックは、Video Cloud スマート プレーヤを使って、視聴者の機器の能力に応じて、動画を Flash または HTML5 で配信する方法を説明しています。

スマート プレーヤでは 1 つの Video Cloud プレーヤを使用するのみでよく、環境に応じて異なるプレーヤを作成して管理する必要がありません。

• はじめに
• スマート プレーヤとは何ですか
• どのプレーヤがスマート プレーヤですか。
• HTML5 モードを使用するかどうかは、どのように構成しますか
• スマート プレーヤのデザイン変更およびローカライズ
• 現在の制約事項
  • コンテンツの制限
  • プレーヤ公開の制限
  • HTML5 モードでのプレーヤの機能
  • プレーヤのデザイン制限
• スマート プレーヤと多重ビットレート レンディション
• スマート プレーヤと解析
• スマート プレーヤと広告

はじめに

モバイル Web の急成長により環境が細分化され、動画パブリッシャは、Flash Player のみを使用して希望する視聴者に到達することが困難になってきました。デスクトップ機器とモバイル機器の両方の視聴者全体に到達するには、HTML5 動画の使用も検討する必要があります。

動画チュートリアルを表示: HTML5 スマート プレーヤ

Flash は何年間にもわたって動画配信のインターネット標準となっている一方、HTML5 動画はまだ新興の技術です。HTML5 動画は急速に発展していますが、利用可能な統合の技術あるいはエコシステムの点からも、まだ Flash 動画のようには完成していません。

Video Cloud スマート プレーヤは、これらの課題に対応するように設計されています。HTML5 プレーヤ配信を有効化している場合、Video Cloud スマート プレーヤは、デスクトップ コンピュータの Flash Player で動画を再生します。コンピュータに Flash がインストールされていない場合は、Flash をインストールするように促します。モバイル機器では、Flash をサポートしインストールしている場合、Video Cloud スマート プレーヤは Flash Player で動画を再生します。Flash をサポートしていない、または Flash をインストールしていないモバイル機器の場合、Video Cloud 動画は HTML5 プレーヤで再生されます。これにより、Flash または HTML5 の動画を配信できる、単独の Video Cloud プレーヤを使うことができます。そのため、視聴者の環境別にプレーヤを作成する、または管理する必要はありません。従来のプレーヤが、Flash または HTML5 モードで自動的にロードすることができ、カスタマイズや JavaScript の追加も必要ありません。現在、Video Cloud は、Apple や Android のスマートフォンおよびタブレットの指定されたオペレーティング システム バージョンのネイティブ ブラウザ上で HTML5 プレーヤをサポートすることに決定しています。詳しくは 「HTML5 プレーヤでサポートされる機器」を参照してください。

弊社の目標は、Flash Player に提供している機能すべてを HTML5 プレーヤに備えることです。HTML5 モードのプレーヤをさらに改革するために、開発努力を大いに行っています。スマート プレーヤのこのリリースで、HTML5 モードではまだ利用できない機能に関する詳細は、このトピックの「現在の制限」セクションを参照してください。

注: デフォルトでは、Flash がサポートされる環境で Flash がインストールされていない場合、プレーヤは Flash をインストールするように視聴者を促します。Flash がサポートされているにもかかわらずインストールされていない場合に、HTML5 フォールバックを実装できます。この場合、Flash をインストールするように視聴者を促すのではなく、動画を HTML5 プレーヤで再生します。

スマート プレーヤとは何ですか

スマート プレーヤは、Flash Player または HTML5 プレーヤとして動作できる Video Cloud 動画プレーヤです。スマート プレーヤは、JavaScript プレーヤ パブリッシング コードを使用してロードされると、ロードしている機器を検出します。機器が Flash をサポートしている場合、プレーヤは、Flash モードでロードされます。機器が Flash をサポートせず HTML5 をサポートしている場合、プレーヤは HTML5 モードでロードされます。

HTML5 モードは、Apple iOS および Android OS 機器でのみサポートされます。機器が HTML5 モードをサポートしているかどうかをテストするには、機器のブラウザを使用して http://admin.brightcove.co.jp/html5support/index.html を参照してください。ご利用の機器が Video Cloud HTML5 プレーヤと互換性を持っているか、そのテスト ページに明確に報告されます。

どのプレーヤがスマート プレーヤですか

標準のプレーヤ テンプレートはすべてスマート プレーヤです。つまり、単一動画プレーヤ、単一プレイリスト プレーヤ、およびマルチ プレイリスト プレーヤのための標準プレーヤ テンプレートを使用するプレーヤは、Flash プレーヤまたは HTML5 プレーヤとして動作できます。HTML5 モードでは、標準のマルチ プレイリスト テンプレートは最初のプレイリストのみを表示します。または、優先プレイリストが割り当てられているときは、優先プレイリストだけを表示します。優先プレイリストの設定の詳細については、「プレーヤ内の優先コンテンツを指定する」を参照してください。すべての標準プレーヤ テンプレートの詳細については、「プレーヤ テンプレート」を参照してください。さらに、BEML で作成されたテンプレートもスマート プレーヤとして動作します。ただし、HTML5 プレーヤでサポートされる BEML 要素のみを使用する場合に限ります。

HTML5 モードを使用するかどうかは、どのように構成しますか

HTML5 モードを使用するかどうかは、アカウント レベルと各プレーヤ レベルの両方で構成できます。デフォルトでは、すべてのプレーヤに対して HTML5 モードが有効化されています。既存のプレーヤすべてに対して HTML5 モードを無効にするか、個々のプレーヤに対して HTML5 モードを有効あるいは無効にできます。詳細は、「HTML5 動画配信オプションを設定する」を参照してください。

スマート プレーヤのデザイン変更およびローカライズ

スマート プレーヤは、少数の例外を除き、他の Video Cloud プレーヤとまったく同じようにスタイル設定できます。Video Cloud Studio の Publishing モジュールを使用して、プレーヤの外観をカスタマイズできます。また、カスタマイズした色、スタイル、画像、およびテーマは、プレーヤが Flash モードか HTML5 モードのどちらで動作していても使用されます。

同様に、プレーヤが Flash モードか HTML5 モードのどちらで動作していても、スマート プレーヤのローカライズも有効です。ただし、クロスドメインのセキュリティ制限により、HTML5 モードのスマート プレーヤは、Video Cloud の標準プレーヤ言語のみを使用できます。Video Cloud がホストしていない外部の XML プレーヤ ラベル ファイルをロードすることはできません。

現在の制約事項

弊社の目標は、Flash Player と同じ全機能を HTML5 プレーヤに備えることです。すでにこの方向で重要なイノベーションを行っています。後のリリースでは、HTML5 モードのプレーヤにさらに機能を追加し続けます。現在 HTML5 モードのスマート プレーヤには、Flash モードと比較して次の機能制限があります。

コンテンツの制限

Video Cloud スマート プレーヤ機能のコンテンツ要件は、モバイル動画の要件とほとんど同じです。

• エンコードと配信
  • 動画は H.264（MP4）または HTTP ライブ ストリーミング（HLS）でエンコードする必要があります。HTML5 動画プレーヤでは H.263（FLV）動画を配信できません。
  • アカウントにユニバーサル デリバリ サービスまたはプログレッシブ ダウンロード（PD）のいずれかを設定する必要があります。ユニバーサル デリバリ サービスは、すべてのアカウントのセットアップでストリーミング用にデフォルトで有効化されています。Flash Media Server（FMS）ストリーミングを使用して、HTML5 動画プレーヤで動画を配信することはできません。「ビデオ配信オプションを設定する」を参照してください。
• ご利用の動画には、モバイル ネットワークを介しての配信に適した、低帯域幅のレンディションが 1 つ以上あります。動画が、Video Cloud のデフォルトのトランスコーディング オプションを使用している場合、準備は万全です。そうでない場合、帯域幅合計が約 256 kbps であり、H.264 ベースライン プロファイルでエンコードされたレンディションが動画に必要です。Professional または Enterprise アカウントを持っている場合、ブライトコーブはさらに HLS レンディションの作成も推奨します。詳細は、「モバイル配信のエンコード」、「トランスコーディング オプションを設定する」および「標準トランスコード設定リファレンス」をご覧ください。
• パフォーマンスに関連する問題を回避するため、HTML5 モードのスマート プレーヤは、プレイリストの最初の 20 本の動画のみをロードします。プレーヤ パブリッシング コードで「優先動画」として指定されている動画がプレイリストの最初の 20 本の動画に含まれない場合は、その優先動画はスマート プレーヤにロードされ、プレイリストの 20 本目の動画はプレーヤにロードされません。
• HTML5 ではロゴ オーバーレイはサポートされていません。アカウント設定でのロゴ バーンイン オプションを選択している場合、ロゴ オーバーレイは HTML5 モードでプレイヤ上に表示されますが、バーンイン オーバーレイは、クリックスルー URL をサポートしていないことにご注意ください。

プレーヤ公開の制限

プレーヤの公開には、JavaScript プレーヤ パブリッシング コードを使用する必要があります。プレーヤ パブリッシング コードについてご覧ください。

単一動画プレーヤにおいては、[クイック公開] ダイアログで Web サイトのコードを選択する必要があることを意味しています。

プレイリスト プレーヤでは、JavaScript コードを使用する必要があります。

JavaScript プレーヤ パブリッシング コードを使用して公開されたプレーヤ、あるいはリンク URL から起動されたプレーヤだけが、スマート プレーヤとして機能できます。ActionScript や HTML 埋め込みコードで公開されたプレーヤは、スマート プレーヤとして動作しません。したがって、機器が Flash をサポートする場合プレーヤは Flash モードでロードされ、サポートしない場合はまったくロードされません。

HTTPS ページ上で公開されたスマート プレーヤを HTML5 モードでロードすると、セキュリティ警告が発生します。ドメイン制限がスマート プレーヤに有効な場合、プレーヤは HTTPS ページ上で HTML5 モードではロードされません。

（2008 年 9 月の Brightcove 3 リリース以後の）Brightcove 3 以降を使用して作成されたプレーヤのみが、スマート プレーヤです。Brightcove 2 で作成したプレーヤは、ActionScript 2 を使用し、スマート プレーヤとして機能しません。

HTML5 モードでのプレーヤの機能

下のスクリーンショットは、スマート プレーヤが、HTML5 モードでサポートされない機能を含んでいる場合に、Flash Player または HTML5 プレーヤとしてどのように表示されるかを示しています。HTML5 クローム プレーヤは、電子メール、ソーシャル共有、コード取得、フルスクリーン、ボリューム調整をサポートしません。ただし、クロムレス プレーヤは、プレーヤ本来のコントロールを使用し、画質切り替えなど、カスタム コントロールを備えていません。また、ソーシャル共有制御や音量調節など、サポートされていない機能も含みません。

Flash	HTML5

共有機能と共有メニュー: プレーヤの共有機能および共有メニュー（ソーシャル共有、リンクの取得、コードの取得、電子メール）は、HTML5 モードのスマート プレーヤでは、まだ利用できません。

ボリューム コントロール: プレーヤにはボリューム コントロールがありません。視聴者は、機器のボリューム コントロールを使用することになります。

フルスクリーン: ユーザーがフルスクリーン ボタンにアクセスできるようにするには、クロムレス動画プレーヤを使用して、ブラウザのネイティブ動画コントロールを表示させます。現在のところ、VideoPlayer クロームにはフルスクリーン コントロールはありません。Apple はフルスクリーン起動用の JavaScript コントロールを提供していないため、カスタム コントロールにフルスクリーン ボタンを含めることはできません。

プレーヤ API: Video Cloud の Flash 専用プレーヤ API は利用できません。スマート プレーヤ API を使用してください。

バンパ: HTML5 モードではバンパは現在、サポートされていません。バンパはスキップされます。

プレーヤのプラグイン: プレーヤーに追加された SWF プラグインは、HTML5 モードでは無効になります。追加の JavaScript プラグイン（スマート プレーヤ API を使って書かれた JavaScript ファイル）を追加することができます。プラグインの適切なバージョンが、Flash または HTML5 モードでロードされます。詳細については、プラグインを使って、「スマート プレーヤに機能を追加する」を参照してください。

プレーヤのデザイン制限

• カスタム スキン、テーマ、およびスタイルシートは、HTML5 モードではまだサポートされていません。
• Flash モードのプレーヤと HTML5 モードのプレーヤの間には、デザインの小さな相違が存在する場合があります。
• BEML <Style> を使用する場合、id 属性ではなく、class 属性のみを使用してください。<Style class="videoList"> 等のスタイルを使用すると、BEML コードには ID "videoList" を持つタグが 2 つ含まれることになり、これによってプレーヤは、HTML5 モードで正しく機能しなくなります。

スマート プレーヤと多重ビットレート レンディション

HTML5 モードのスマート プレーヤでは、ビデオ配信は標準 HTTP 上で行われます。その結果、視聴者が最初に動画の再生を始めるときに、HLS レンディションがある場合を除いて、プレーヤはレンディションを選択する必要があります。また、モバイル機器には、帯域幅検出を行うための HTML5 アプリケーション向けメカニズムがありません。したがって、プレーヤは、レンディションを切り替えることができません。弊社では、最も幅広く使用事例に対応するため、品質が低いレンディションの 1 つを選択しています。これは、モバイル ネットワーク上での再生を保証するためです。その場合の帯域幅合計は 256 kbps に最も近いレンディションです。

HTML5 モードのスマート プレーヤは、H.264（MP4）ファイルの再生だけを試み、H.263（FLV）レンディションは無視します。iOS 機器に関しては、プレーヤは利用可能な Apple HTTP Live Streaming（M2TS）レンディションを再生します。非常に狭い帯域幅が検出された場合、利用可能である場合は 音声のみのレンディション を再生することが可能です。

スマート プレーヤと解析

Analytics モジュールは、動画が Flash プレーヤか HTML5 プレーヤのいずれから視聴されているかを判断するためのプラットフォームの傾向レポートを提供します。プラットフォームの傾向レポートは、指定された日付期間内の表示回数、表示時間（分）、表示当たりの表示時間（分）を Flash または HTML5 動画プレーヤ プラットフォーム別に表示します。プラットフォームの傾向の表示についての詳細は、「解析レポートのリファレンス」を参照してください。

HTML5 モードのプレーヤからのストリーム、プレーヤのロード、使用帯域幅に関するデータは、収集され、Video Cloud Studio の [レポート] ページで報告されます。このデータは、Flash モードからのデータと共に集計され、Flash での使用データから HTML5 での使用データを分ける方法はありません。

スマート プレーヤと広告

Video Cloud は、HTML5 プレーヤで提供される動画にプレロール広告を表示するための制限サポートを提供しています。動画広告キャンペーンをトラフィックしポリシを割り当てる手順は、Flash で提供される動画に広告を割り当てる手順と同じですが、HTML5 での広告配信には、HTML5 対応のスマート プレーヤでの公開および特別な広告サーバー統合手順が必要です。詳細およびサポート制限については、「HTML5 を使って広告を配信する」を参照してください。