基本プレイヤーのチュートリアル

簡単なチュートリアルに従い、Ooyalaプレイヤーを使い始めてみましょう。

Ooyalaプレイヤーで作業するにあたり、こちらの基本プレイヤーのチュートリアルをご利用いただけます。本チュートリアルでは お客様にプログラミングをしていただく必要はありません。

こちらには、メッセージバスやさまざまなOoyalaプログラミング関数を使用する高度な例も 含まれています。より高度なプレイヤーJavaScript.

ステップ 1:シンプルなウェブページを作成する

最低限の要素を備えたHTML5のウェブページを作成してみましょう。 HTML5の場合、1つだけ以下を用意します <!doctype> declaration: <!DOCTYPE html>.基本ウェブページは このようになります。
<!DOCTYPE html>
<html>
<head>
<title>My Test Player V3 Web Page </title>
</head>
<body>
    My Player V3 Content.
</body>
</html>
注: すべてのブラウザで正常に動作するように <!DOCTYPE html> HTML5ウェブページには必ず宣言を いれるようにします。Windows IE9は特に厳密で、この宣言文がなければページが正しく描画されない可能性が あります。

ステップ 2:Ooyala V3プレイヤーの読み込み

player_branding_id を渡してプレイヤーを読み込みます。プレイヤーブランディングIDは特定のプレイヤーの名前を 指定します。以下のスクリーンショットに示されている通り、Backlot → 管理 → Embedタブに このプレイヤーIDがあります。このIDは英数字からなる文字列で、embedコード文字列に似ています。

プレイヤーブランディングIDに関する詳細情報は、 Ooyalaサポートセンター → デベロッパードキュメントのトピック 「 プレイヤー 」 をご覧ください。

注: player_idは旧プレイヤーの一部であり、Ooyalaプレイヤーでは使用しません。 新しいembedスタイルからこの要件は削除されています。現在のプレイヤーを使用すると、 JavaScriptデベロッパーがプレイヤーオブジェクトを作成し、新しいプレイヤーから、そして将来的な目的で 直接参照することができます。

読み込みたいモジュールも忘れずに指定してください。モジュールはサードパーティ製 またはその他カスタムモジュールでも構いません。カスタムOPFモジュールの場合、FlashまたはFlashフォールバック使用時のみ、 引き続き動作します。

次の例で示すとおり、このステップではプレイヤーのコード、 およびその他追加モジュールを読み込むことができます。これにより、プレイヤーの 読み込み部と作成部を分離することができます。複数プレイヤーを作成する 場合でも、読み込みは1度だけで済みます。

<head>
<!-- Load Ooyala Player -->
<script src='http://player.ooyala.com/v3/insert_player_branding_id'></script>
<!-- Load additional custom modules -->
<script src='/mymodule.js'></script>
</head>
プレイヤー読み込みスクリプトとなる最初のスクリプト行は、ヘッドタグまたはボディタグ、 どちらにでも配置できます。スクリプト行を以下に配置した場合:
  • <head> タグの場合、まずプレイヤーの読み込みが行われ、続けて 残りのウェブページが読み込まれます。

  • <head> タグの外側の場合、まずウェブページが読み込まれ、 それからプレイヤーが読み込まれます。

実装する読み込み優先順位の決定は、お客様次第です。

ステップ 3:プレイヤーの配置

プレイヤーUIおよびユニークなDOM IDを持つビデオ画面を 含む<div>要素を作成します。デフォルトでは、プレイヤーUIは コンテナ<div> タグで指定された空間すべてを占有します。 <div> タグの使用は必須です。<div> タグはプレイヤーのコンテナを作成し、それによりプレイヤー位置の制御ができ、サイトのレイアウトの 変更にプレイヤーが対応できるようにします。次の例は、 player_container_idを表す“playerwrapper”の div id を指定します。このdiv idは後ほど読み込んだプレイヤーの参照に使用します。
注: div idと player_container_idという用語は同義語です。2つとも、プレイヤーを作成するコンテナの DOM IDを表しています。
<!-- Player Placement -->
<div id='playerwrapper' style='width:480px;height:360px;'></div>
 
注: HTMLスタンダードは、それぞれのdiv idはユニークでなければいけません。

ステップ 4:プレイヤーの作成

<div> の直後に JQuery的なスクリプトをインクルードし、プレイヤーの作成および初期化を行い、ビデオをプレイヤーに 関連付け、追加したいクエリー文字列パラメータをインクルードします。最初は、自分自身でプレイヤーの ビデオembedコードを作成する必要があります。次の例はビデオプレイヤーを作成し、 div idで特定される<div> コンテナにプレイヤーを配置します。 playerwrapper.
      <script>
        var videoPlayer = OO.Player.create('playerwrapper','video_embed_code', {
              // additional params go here
              });
             videoPlayer.play();
    </script>

この記事はお役にたちましたか?