プレイヤーHTMLファイルを使用する

player.html ファイルにはプレイヤーのロジックを実装し、player.jsのUI要素とのやり取りの振る舞いを 定義します。

default.jsはリモートのサンドボックスあり、default.htmlはローカルのサンドボックスにあると考えて もらっても構いません。お互いに通信することはできません。アプリ作成にJavaScriptを 使用して、直接デフォルトのHTMLに影響を及ぼすスクリプトを構築したとしても、リモートコンテナ としてiframeのコンテンツにアクセスしない限り、実現はしません。default.htmlは ローカルファイルであり、default.jsはリモート環境に読み込まれます。Window 8 iframeは リモートのdefault.jsファイルと直接やりとりができます。
player.html ファイル内:
  1. アプリに対してプレイヤーブランディングIDを提供します。
  2. ボディタグを追加し、その中にプレイヤーのレイアウトを定義し、プレイヤーのインスタンスを作成 します。
  3. ページの最後で、プレイヤーが再生可能状態にあることを示すOO.ready関数を追加します。
  4. また、default.htmlコンソールログからメッセージを収集するreceiveMessage関数 を追加します。
  5. 機能を追加したい場合、ここで追加のロジックを実装します。

参考例:Player.HTMLファイル

次の例はプレイヤーのレイアウトを定義し、プレイヤーのスタイルを構築するためにCSSを参照します。 ボディタグ内で、プレイヤーのインスタンスを作成します。

 
<html>
 <head>
  <title>Player V3 Demo</title>
  <script src='http://player.ooyala.com/v3/MzZiMzc1ZDUzZGVlYmMxNzA3Y2MzNjBk
  ?platform=html5'></script>
   </head>
   <body style=""margin:0; padding:0; background:black;">
       <div id="playerwrapper" style="width: 100%; height:400px"></div>
       <div id="status" style="width:100%; height:50px; color:red;"> </div>
       <button id="playButton" value="Play" disabled="true">Play</button>
       <button id="reloadButton" value="Play" disabled="true">Change to 
       new embed code</button>
 <script>
  // This app is based on a blog post from MS
 // http://alastaira.wordpress.com/2011/09/26
   /creating-a-windows-8-metro-slippy-map-application/
 // All logic is impleted in player.html for now
    var embedCodes = ["45cmZqNDrKn7TvtpfGa9k9fQSeyK4VaI",
                     '1lM21wNDrCTF8nA4YaQibBh16vv4D8pM',
                     "UxaXI5MzruPkO9medlrVQ9sZbgpqgMxr"];
     var currentIndex = 0;
     var oplayer = null;

     function onVideoPlaying() {
         var status = document.getElementById("status");
         status.innerHTML = "Playing";
       }

       function onPlayButtonClicked() {
           oplayer.play();
       }

       function onReloadButtonClicked() {
           currentIndex = (currentIndex + 1) % embedCodes.length;
           oplayer.setEmbedCode(embedCodes[currentIndex]);
           oplayer.play();
       }

       function createPlayer(OO) {
           OO.$("#playerwrapper").html('');
           var embedCode = embedCodes[currentIndex];
           oplayer = OO.Player.create('playerwrapper', embedCode, {
               width: '100%',
               height: '100%'
           });
           oplayer.subscribe(OO.EVENTS.PLAYING, "ie_iframe", 
           onVideoPlaying);
           
       }

       OO.ready(function (OO) {
           var playButton = document.getElementById("playButton");
           playButton.disabled = false;
           playButton.onclick = onPlayButtonClicked;

           var reloadButton = document.getElementById("reloadButton");
           reloadButton.disabled = false;
           reloadButton.onclick = onReloadButtonClicked;
           createPlayer(OO);
       });

       function receiveMessage(e) {
           // Notification from default.html
           console.log("from parent", e.data);
       }
       window.attachEvent("onmessage", receiveMessage);

     </script>
   </body>
</html>

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