イナヅマTVログ

OSMF(Open Source Media Framework)でVideo再生

| 2件のコメント

OSMF(Open Source Media Framework)を使ってビデオファイル(FLV, F4V)を再生してみるメモ。
Adobe Open Source : Open Source Media Framework
現在のstableはVer.1.5。
注目のStage Video対応は1.6からになります。

OSMFを使用すると対象Flash Playerは10.1からとなるらしい。
Flex SDK 4.1からosmf.swcは同梱されてるらしい。
Flash Builder 4 setup

Flex SDK 4.5.0.17689

package com.inazumatv.video
{
	import flash.display.DisplayObjectContainer;
 
	import org.osmf.elements.VideoElement;
	import org.osmf.events.MediaErrorEvent;
	import org.osmf.events.MediaPlayerStateChangeEvent;
	import org.osmf.events.PlayEvent;
	import org.osmf.events.TimeEvent;
	import org.osmf.media.MediaPlayer;
	import org.osmf.media.MediaPlayerSprite;
	import org.osmf.media.URLResource;
	import org.osmf.metadata.CuePoint;
	import org.osmf.traits.TraitEventDispatcher;
 
	public class PlayerSprite extends Object
	{
		private var _container:DisplayObjectContainer;
		private var _mps:MediaPlayerSprite;
		private var _videoElement:VideoElement;
		private var _mp:MediaPlayer;
 
		// ----------------------------------------
		//	CONSTRUCTOR
		// ----------------------------------------
		public function PlayerSprite(container:DisplayObjectContainer)
		{
			_container = container;
			init();
		}
		private function init():void
		{
			var source:String = 'rtmp://cp67126.edgefcs.net/ondemand/mp4:mediapm/osmf/content/test/cuepoints/spacealonehd_sounas_640_with_nav.f4v';
			_mps = new MediaPlayerSprite();
			_mp = mps.mediaPlayer;
 
			var resource:URLResource = new URLResource(source);
 
			_videoElement = new VideoElement();
			videoElement.resource = resource;
 
			var dispatcher:TraitEventDispatcher = new TraitEventDispatcher();
			dispatcher.media = videoElement;
			dispatcher.addEventListener(PlayEvent.PLAY_STATE_CHANGE, onPlayStateChange);
 
			mp.addEventListener(TimeEvent.CURRENT_TIME_CHANGE, onTimeUpdated);
			mp.addEventListener(TimeEvent.DURATION_CHANGE, onTimeUpdated);
			mp.addEventListener(MediaErrorEvent.MEDIA_ERROR, onMediaError);
 
			mp.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onMediaPlayerStateChange);
 
			mp.media = videoElement;
 
			try{
				container.addChild(_mps);
			} catch (error:TypeError) {
				trace(error);
			}
		}
		// ----------------------------------------
		//	EVENT HANDLER
		// ----------------------------------------
		private function onMediaError(event:MediaErrorEvent):void
		{
			trace(event);
		}
		private function onMediaPlayerStateChange(event:MediaPlayerStateChangeEvent):void
		{
			trace(event.state);
		}
		private function onPlayStateChange(event:PlayEvent):void
		{
			trace(event.playState);
		}
		private function onTimeUpdated(event:TimeEvent):void
		{
			trace('time: ' + mp.currentTime + ' duration: ' + mp.duration);
		}
		// ----------------------------------------
		//	GETTER / SETTER
		// ----------------------------------------
		// MediaPlayer
		public function get mp():MediaPlayer
		{
			return _mp;
		}
		// MediaPlayerSprite
		public function get mps():MediaPlayerSprite
		{
			return _mps;
		}
		// VideoElement
		public function get videoElement():VideoElement
		{
			return _videoElement;
		}
	}
}

ダウンロードしたOSMFのサンプルを参考にコードを作成しました。
ビデオURLはサンプルファイルに書かれているものです。
ちょっぴり悲しいアニメーションです。

トレースの結果は以下のようになります。
タイムコードのトレースは省きました。

onMediaPlayerStateChange loading
 
onPlayStateChange playing
 
onMediaPlayerStateChange ready
onMediaPlayerStateChange buffering
onMediaPlayerStateChange playing
 
onPlayStateChange stopped
 
onMediaPlayerStateChange buffering
onMediaPlayerStateChange ready

OSMFの要はorg.osmf.media.MediaPlayerだと思われます。
ただMediaPlayerDisplayObjectではないのでaddChildできません。
なのでMediaPlayerだけどDisplayObjectMediaPlayerSpriteが存在するのかも。

MediaPlayerSpriteを使わずMediaPlayerを使う場合は以下のようにします。

var source:String = 'assets/example.f4v';
var mp:MediaPlayer = new MediaPlayer();
var resource:URLResource = new URLResource(source);
var video:VideoElement = new VideoElement();
video.resource = resource;
mp.media = video;
container.addChild(mp.displayObject);

MediaPlayer.displayObjectをaddChildします。
なんかちょっと気持ち悪い使い方のような気がしますが…

【おまけ】
swcになってるパッケージのバージョンってどうやったら確認できるんだろ?

2件のコメント

  1. > swcになってるパッケージのバージョンってどうやったら確認できるんだろ?

    OSMF.swc のバージョンは、「import org.osmf.utils.Version;」すれば「Version.version」で「2.0」等のバージョン番号を取得できるようです。
    コンパイルせずに swc ファイルの外側から、中身のバージョンを確認する方法は…なさそうですね。
    3年近く前の記事ですが、OSMF を調べていたら、通りかかったのでコメントしてみました。

  2. こんな古い記事にコメントいただき、ありがとうございます。
    なるほど、コンパイル後だと確認できるのですね!
    助かりました。

コメントを残す