プレイヤーV3 JavaScriptの完全なサンプル

Ooyalaが推奨する基本的な構造がこちらの例になります。

JavaScriptプログラムを構築する方法は数多くありますが、こちらの例では数ある中の プレイヤーV3 APIを使用したベストプラクティスになります。

 
<!DOCTYPE html>
<html>

  <head>
    <title>My Test Player V3 Web Page </title>
    <!-- Load Ooyala Player -->
    <!-- Put the <script> call in the head so the Player is there when the page loads. -->
    <!-- Player query string parameters are added on the line below. -->
    <script src='http://player.ooyala.com/v3/e18ab1da1813483499554ea2d8e67fbd'></script>
    <!-- Load additional custom modules -->
    <!-- script src='/mymodule.js'></script -->
  </head>


  <body>
My Player V3 Content.

    // Layout for content elements to be fetched
    <div id='playerwrapper' style='width:480px;height:360px;'></div>
    <div id='metadata'>
      -- Metadata --<br/>
    </div>
    <div id='bitrate'>
      -- Bitrate --<br/>
    </div>
    <div id='buffer'>
      -- Buffer --<br/>
    </div>
    <script type=text/javascript>

     function getElement(id) {
     return document.querySelector('#'+id);
     }

function onCreate(player) {
  // Everything you do with the player should be done either in onCreate
  // or as listeners on the message bus
  // to ensure that the player is in the correct state.
  console.log("-- onCreate");
  player.mb.subscribe('*','myPage', function(eventName) {
    console.log("RECEIVED EVENT: "+eventName);

  // Player embedded parameters go here

  });
  // Preserve message bus
  window.mb = player.mb;

  // Error handling listener
  // Subscribe to error event
  mb.subscribe("error", "test-plugin", function(eventName, payload) {
    console.log(eventName+": "+payload);
  });

  // Buffer listener
  // Need to subscribe to an event if you want updates for the length of the buffer.
  // Ideally you'd listen for the BUFFERING event.
  window.bufferLength = -100;
  window.mb.subscribe('playheadTimeChanged', 'myPage', function(eventName) {
    var newBufferLength = player.getBufferLength();
    if (bufferLength === newBufferLength) { return; }
    window.bufferElement.innerHTML += "Buffer length is " + player.getBufferLength() + "<br/>"
    window.bufferLength = newBufferLength;
  });

  // Bitrate listener
  // You *must* listen to bitrateInfoAvailable in order to request it.
  window.mb.subscribe('bitrateInfoAvailable', 'myPage', function(eventName) {
    var rates = player.getBitratesAvailable();
    if (rates.length > 0) {
      for (var i=0; i < rates.length; i++) {
        window.bitrateElement.innerHTML += "Rate: " + rates[i] + "<br/>"
      }
    }
  });

  // Metadata
  // Content information is available after contentTreeFetched, but it is best to wait until
  // playbackReady for duration.
  window.mb.subscribe('playbackReady', 'myPage', function(eventName) {
    window.metadataElement.innerHTML += "Title is: " + player.getTitle() + "<br/>";
    window.metadataElement.innerHTML += "Description is: " + player.getDescription() + "<br/>";
    window.metadataElement.innerHTML += "Duration is: " + player.getDuration() + "<br/>";
  });
}

window.bufferElement = getElement('buffer');
window.bitrateElement = getElement('bitrate');
window.metadataElement = getElement('metadata');

OO.ready(function() { // Surround everything with OO.ready to make sure the script has
                      // loaded and initialized completely
  window.player = OO.Player.create('playerwrapper','w3ZHc0Njr33Tdp-RRcwfZMjaOrmzOP82', {
    onCreate: window.onCreate,
    autoplay: true // Instead of calling object.play it is easier (and more robust) to set autoplay here
  });
});
    </script>
  </body>
</html>

  

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