JavaScriptデモとサンプル

JavaScriptサンプルは、Ooyalaプレイヤーの埋め込み能力とプレイヤーAPIを使ってプレイヤーに機能を 追加する能力を説明しています。

JavaScriptサンプル

次の例のデモがhttp://demo.ooyala.com/product-demos/playerScripting-demo.htmlから利用できます。デモでJavaScript APIの使用方法を説明しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>JavaScript Example of the Ooyala Player API</title>
</head>

<body>

<script src="http://player.ooyala.com/player.js?callback=
receiveOoyalaEvent&playerId=player&width=480&height=360&embedCode=
llMDQ6rMWxVWbvdxs2yduVEtSrNCJUk1&version=2"></script>
<script>

function receiveOoyalaEvent(playerId, eventName, eventArgs) {
var ciecc,ttc,ecc,vc;

 switch(eventName) {
   case "playheadTimeChanged":
     onPlayheadTimeChanged(eventArgs);
     break;
   case "stateChanged":
     onStateChanged(eventArgs);
     break;
   case "currentItemEmbedCodeChanged":
     onCurrentItemEmbedCodeChanged(eventArgs);
     ciecc=eventArgs;
     break;
   case "totalTimeChanged":
     onTotalTimeChanged(eventArgs);
     ttc=eventArgs;
     break;
   case "embedCodeChanged":
     onEmbedCodeChanged(eventArgs);
     ecc=eventArgs;
     break;
   case "volumeChanged":
     onVolumeChanged(eventArgs);
     break;
   case "apiReady":
     //note: apiReady event has no eventArgs (3rd call-back parameter)
     onCurrentItemEmbedCodeChanged(ciecc);
     onTotalTimeChanged(ttc);
     onEmbedCodeChanged(ecc);
     break;
 }
}

function onEmbedCodeChanged(eventArgs) {
 document.getElementById("embedCode").innerHTML =
 eventArgs.embedCode + " == " + document.getElementById("player").getEmbedCode();
 document.getElementById("title").innerHTML = eventArgs.title + " == " +
 document.getElementById('player').getTitle();
}

function onCurrentItemEmbedCodeChanged(eventArgs) {
 document.getElementById("currentItemEmbedCode").innerHTML = 
 eventArgs.embedCode +" == " + document.getElementById("player")
 .getCurrentItemEmbedCode();
 document.getElementById("currentItemTitle").innerHTML = 
 eventArgs.title +" == " + document.getElementById("player").getCurrentItemTitle();
}

function onTotalTimeChanged(eventArgs) {
 document.getElementById("totalTime").innerHTML =
 eventArgs.totalTime + " == " + document.getElementById("player").getTotalTime();
}

function onPlayheadTimeChanged(eventArgs) {
 document.getElementById("playheadTime").innerHTML =
 eventArgs.playheadTime + " == "+document.getElementById("player").getPlayheadTime();
}

function onVolumeChanged(eventArgs) {
 document.getElementById("volume").innerHTML =
 eventArgs.volume + " == " + document.getElementById("player").getVolume();
}
function onStateChanged(eventArgs) {
 document.getElementById("state").innerHTML =
 eventArgs.state + " == " + document.getElementById("player").getState();
}
</script>

State <span id="state"></span>
<br>
Embed Code <span id="embedCode"></span>
<br>
Title <span id="title"></span>
<br>
CurrentItemEmbedCode <span id="currentItemEmbedCode"></span>
<br>
CurrentItemTitle <span id="currentItemTitle"></span>
<br>
Total Time <span id="totalTime"></span>

<br>
Playhead Time <span id="playheadTime"></span>
<br>
Volume <span id="volume"></span>
<br>
<button onclick="document.getElementById('player').playMovie()">Play</button>
<button onclick="document.getElementById('player').pauseMovie()">Pause</button>
<button onclick="document.getElementById('player').setPlayheadTime
(document.getElementById('player')
.getPlayheadTime() + 30)">
+30s</button>
<br><br>
<button onclick="document.getElementById('player').setQueryStringParameters
({embedCode:'8wNTqa-6MkpEB1c7fNGOpoSJytLptmm9',hide:'share,fullscreen'})">
Switch Movie</button>

<%= partial :"ganalytics" %>
</body>
</html>

   

プレイヤーオブジェクトEmbedコード

特定のブログやソーシャルネットワークなどJavaScriptが受け入れられない状況には、Ooyalaプレイヤーを 組み込むためのオブジェクトembedコードの使用例としてこちらを提供しています。可能な限りJavaScriptを使用することをお勧めします。オブジェクトembed コードは、このドキュメントのはじめで説明されていたJavaScript APIに対するサポート 不足、および自動的に最新のFlashバージョンに更新される視聴者機能を取り除きます。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ooyalaPlayer"
  width="640" height="480"
  codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value=" http://player.ooyala.com/player.swf" />
<param name="bgcolor" value="#000000" />
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="true" />
<param name="flashvars" value="embedCode=9qbTrtNmh_YxuWN7ifQ38ttUkska9UF4" />
<embed src="http://player.ooyala.com/player.swf" bgcolor="#000000" width="640" 
  height="480"
  name="ooyalaPlayer"
  align="middle" play="true" loop="false"
  allowscriptaccess="always" type="application/x-shockwave-flash"
  allowfullscreen="true"
  flashvars="embedCode=9qbTrtNmh_YxuWN7ifQ38ttUkska9UF4"
  pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>

   

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