ActionScript例

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

Flex ActionScript 3 APIインターフェースサンプル

次の3つの例、"Flex ActionScript 3 APIインターフェイス" "初期サンプル"と"追加プレイヤー 機能サンプル"は、柔軟性とさまざまなプレイヤーActionScript APIを紹介しています。

次の例は、ActionScriptインターフェイスの使い方を説明しています。

package com.ooyala.api
{
 /**
 * Player API
 */
 [Event (name="currentItemEmbedCodeChanged" )]
 [Event (name="embedCodeChanged" )]
 [Event (name="playComplete" , type="flash.events.Event" )]
 [Event (name="loadComplete" )]
 [Event (name="playheadTimeChanged" )]
 [Event (name="stateChanged" )]
 [Event (name="totalTimeChanged" )]
 [Event (name="volumeChanged" )]

 public class Player extends UIComponent
 {

   /**
   * Load the Ooyala player
   */
   public function load():void

   /**
   * Pass "query string parameters" to change the movie or channel in the player.
   * You can pass a string (similar to HTML Snippet query string
   * and FlashVars in direct Flash embed) or properties of an object
   */
   public function set queryStringParameters(parameters:*): void
   /**
   * embedCode of the player itself (for a channel, it will be channel)
   */
   [Bindable (event="embedCodeChanged" )]
   public function get embedCode():String
   /**
   * Convenient shortcut for set queryStringParameters('embedCode='+value)
   * i.e. Reloads movie/channel in player
   */
   public function set embedCode(value:String): void
   /**
   * Total time (in seconds) of the currently active item in the player
   * For a channel, the total length of the current video in the channel
   */
   [Bindable (event="totalTimeChanged" )]
   public function get totalTime():Number
   /**
   * Playhead time for the current active video in the player
   * For a channel, the playhead time of the current video in the channel
   */
   [Bindable (event="playheadTimeChanged" )]
   public function get playheadTime():Number
   /**
   * Seek within the active video in the channel
   */
   public function set playheadTime(value:Number): void
   /**
   * Player Volume setting
   */
   [Bindable (event="volumeChanged")]
   public function get volume():Number
   public function set volume(value:Number): void
   /**
   * The current state of the player. One of:
   * playing
   * paused
   * buffering
   * finished
   * error
   */
  [Bindable (event="stateChanged")]
  public function get state():String
  /**
  * The embedCode of the current video in the player.
  * In the case of a channel, this will be the embedCode
  * of the current video in the channel
  */
  [Bindable (event="currentItemEmbedCodeChanged" )]
  public function get currentItemEmbedCode():String
  /**
  * Play the current video or channel
  */
  public function play():void
  /**
  * Play the current video or channel
  */
  public function pause():void

 }//end of class
}

   

初期サンプル

こちらは2つのサンプルの1つ目で、Adobe ActionScript 3を使ってAdobe Flexアプリケーションに 埋め込まれたOoyalaプレイヤーの機能を説明しています。この例は基本的な統合を 示していますが、次の「追加機能」サンプルでは、APIで公開されている機能の多くを使用する方法を 示しています。これら2つのサンプルを含むサンプルソースコードが次から利用できます。

Flash API デモ

プレイヤーはFlash 10をターゲットにしている必要があります。これについての詳しい情報は、以下からご確認ください。

Flashプレイヤー10をターゲットにする

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 applicationComplete="player.load()"
 backgroundColor="#000000"
 layout="vertical"
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:ooyala="com.ooyala.api.*"
 >
 <ooyala:Player
   id="player"
   width="100%"
   height="100%"
   embedCode="x0b2E6REM6ksHP8PMsOaWRNkq2uwLyFv"
   loadComplete="player.playMovie()"
 />
</mx:Application>

   

追加機能サンプル

Flex ActionScriptサンプルに加えて、Flashプロジェクトサンプルを以下で紹介します。

Flash API デモ

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  applicationComplete="player.load()"
  backgroundColor="#000000"
  layout="absolute"
  xmlns:ooyala="com.ooyala.api.*" >
<ooyala:Player id="player" width="100%" height="100%"
  queryStringParameters="{source.selectedItem}"
/>
<mx:HBox y="0" horizontalCenter="0"
  backgroundColor="black" backgroundAlpha="0.5"
  borderColor="white" borderStyle="solid" borderThickness="1"
  cornerRadius="10"
  paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10">
<mx:VBox color="white" fontWeight="bold" minWidth="150">
<mx:Label text="Current Time: {player.playheadTime.toFixed(2)}s"/>
<mx:Label text="Total Time: {player.totalTime}s"/>
<mx:Label text="Volume: {(player.volume * 100).toFixed(0)}%"/>
<mx:Label text="Play State: {player.state}"/>
</mx:VBox>
<mx:ComboBox id="source" selectedIndex="0" labelField="comboboxLabel">
<mx:Array>
<mx:Object
  comboboxLabel="Sample Video #1"
  embedCode="x0b2E6REM6ksHP8PMsOaWRNkq2uwLyFv"
  hide="sharing,fullscreen,endscreen"
/>
<mx:Object
  comboboxLabel="Sample Video #2"
  embedCode="sxM2I6UiPuCkPaUuWM6KObYoyA-MOBcn"
  hide="info"
/>
</mx:Array>
</mx:ComboBox>
<mx:Button label="Play" click="player.playMovie()"
  visible="{player.state != 'playing'}"
  includeInLayout="{player.state != 'playing'}"/>
<mx:Button label="Pause" click="player.pauseMovie()"
  visible="{player.state == 'playing'}"
  includeInLayout="{player.state == 'playing'}"/>
<mx:Button label="seek -30s" click="player.playheadTime -= 30"/>
<mx:Button label="seek +30s" click="player.playheadTime += 30"/>
<mx:Button label="volume 25%" click="player.volume = 0.25"/>
</mx:HBox>
</mx:Application>
   

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