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

製品エディション
Video CloudExpress I, Express II, Express III, Professional, Enterprise

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

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

はじめに

モバイル Web の急成長により環境が細分化され、動画パブリッシャは Flash Player のみを使用して希望する視聴者に到達することが困難になってきました。デスクトップ機器とモバイル機器の両方の視聴者全体に到達するには、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 HTML5 プレーヤが現在サポートする Apple および Android オペレーティング システムの詳細なリストは、「HTML5 プレーヤでサポートされる機器」トピックを参照してください。

弊社の目標は、HTML5 のブラウザ サポートが発達するにつれて、Flash Player に提供している機能すべてを HTML5 プレーヤに備えることです。スマート プレーヤのこのリリースで、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 プレーヤ ラベル ファイルをロードすることはできません。

現在の制約事項

弊社の目標は HTML5 の発達につれて、Flash Player と同じ機能を HTML5 プレーヤに備えることです。現在 HTML5 モードのスマート プレーヤには、Flash モードと比較して次の機能制限があります。

コンテンツの制限

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

  • エンコードと配信
    • 動画は H.264(MP4)または HTTP ライブ ストリーミング(HLS)でエンコードする必要があります。HTML5 動画プレーヤでは H.263(FLV)動画を配信できません。
    • アカウントにユニバーサル デリバリ サービスまたはプログレッシブ ダウンロード(PD)のいずれかを設定する必要があります。ユニバーサル デリバリ サービスは、すべてのアカウントのセットアップでストリーミング用にデフォルトで有効化されています。Flash Media Server(FMS)ストリーミングを使用して、HTML5 動画プレーヤで動画を配信することはできません。「ビデオ配信オプションを設定する」を参照してください。

      プログレッシブ ダウンロードによって iOS 機器(iPhone または iPad)に動画を配信する場合、iOS は視聴者が再生しようとしなくても、動画全体をダウンロードしようとします。iOS 機器を使用する視聴者が多くいる場合、これによって帯域幅の使用が増えます。お客様の全動画に HLS レンディションを用意すると、これを防ぐことができます。

      注: 2013 年 11 月 20 日、デフォルトの HLS レンディションが、すべての Video Cloud パブリッシャに利用できるようになりました。

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

プレーヤ公開の制限

プレーヤの公開には、JavaScript プレーヤ パブリッシング コードを使用する必要があります。プレーヤ パブリッシング コードについての詳細は、「Video Cloud プレーヤを公開する」を参照してください。

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

スマート プレーヤのクイック公開

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

スマート プレーヤ用パブリッシング コード

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

HTTPS ページ上で公開されたスマート プレーヤを HTML5 モードでロードすると、セキュリティ警告が発生する場合があります。詳細は、「HTTPS ページで Video Cloud プレーヤを公開する」を参照してください。

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

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

FlashHTML5

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

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

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

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

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

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

プレーヤのデザイン制限

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

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

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

新しいコメントを投稿する

The content of this field is kept private and will not be shown publicly.
0

コメント