StrobeMediaPlayback的Javascript桥接

StrobeMediaPlayback是Adobe官方出的流媒体播放器，支持RTMP协议，在项目中运用到了，却在网上怎么都找不到相关资料，可以说是寥寥无几。

无奈之下，稍微看了点源代码，对播放器与JS桥接的方式进行了整理，于是有了此文。

 

关键代码：

/**
 * 初始化播放器
 */
function initPlayer(){
	var p = {
		//视频地址
		src : rtmpUrl,
		//是否自动隐藏控制栏
		controlBarAutoHide : "false",
		//控制栏位置
        	controlBarPosition: "bottom",
        	//流类型
		streamType : "vod",
		//是否自动播放
		autoPlay : "true",
		//不显示详细信息
		verbose : "false",
		//是否显示缓冲中字样
		bufferingOverlay : "true",
		//播放前显示的自定义画面
		//poster : ctx + "/images/homepage/logo.png",
		//播放结束的自定义画面
		//endOfVideoOverlay : ctx + "/images/homepage/logo.png",
		//是否自动切换清晰度（客户端），无作用
		autoSwitchQuality : "true",
		//超时时间
		rtmpNetConnectionFactoryTimeout : 20,
		//js事件桥接
		javascriptCallbackFunction: "onJavaScriptBridgeCreated"
	};
	var ppi = ctx + "/lib/flashplayer/playerProductInstall.swf";
	var params = {
		quality : "high",
		bgcolor : "#000000",
		allowscriptaccess : "sameDomain",
		allowfullscreen	: "true",
		wmode:"Opaque"
	};
	var attributes = {
		id : "player",
		name : "player",
		align : "middle"
	};
	$("#flashContent").html("");
	swfobject.embedSWF(ctx + "/lib/flashplayer/StrobeMediaPlayback.swf", "flashContent", "1020", "500", "10.3.0", ppi, p, params, attributes);
	swfobject.createCSS("#flashContent", "display:block;text-align:left;");
}

 

其中的javascriptCallbackFunction为关键参数，用于指定Javascript桥接函数。Player在初始化后，会调用指定的函数并传入player的id。但这还有一个前提， 就是允许flash访问Javascript，所以，在flash参数中，需指定allowscriptaccess为sameDomain或always，其中always代码允许访问所有js，sameDomain则指同域脚本。

 

再来看看onJavaScriptBridgeCreated函数，这个函数很简单，就是传入一个playerId，可以用这个playerId找到对应的player对象，如下：

function onJavaScriptBridgeCreated(id){
	player = document.getElementById(id);
}

 

拿到player对象了，然后就是可以用这个player对象做事件监听和操作了。

以下是从源代码中分析出来支持监听的事件和支持直接调用的函数：
 

监听事件	直接调用函数
volumeChange	setMediaResourceURL
mutedChange	addEventListener
panChange	addEventListeners
audioSwitchingChange	setCurrentTime
numAlternativeAudioStreamsChange	play2
pingComplete	stop2
pingError	load
bufferingChange
bufferTimeChange
containerChange
displayObjectChange
mediaSizeChange
drmStateChange
isRecordingChange
switchingChange
numDynamicStreamsChange
autoSwitchChange
transitionComplete
transition
beginFragment
endFragment
downloadComplete
downloadError
fragmentDuration
fileError
indexError
scriptData
actionNeeded
notifyBootstrapBox
indexReady
ratesReady
requestLoadIndex
loadStateChange
bytesLoadedChange
bytesTotalChange
mediaElementChange
traitAdd
traitRemove
metadataAdd
metadataRemove
canPlayChange
canSeekChange
temporalChange
hasAudioChange
hasAlternativeAudioChange
isDynamicStreamChange
canLoadChange
canBufferChange
hasDRMChange
hasDisplayObjectChange
mediaPlayerStateChange
valueAdd
valueRemove
valueChange
creationComplete
creationError
parseComplete
parseError
canPauseChange
playStateChange
pluginLoad
pluginLoadError
seekingChange
currentChildChange
currentTimeChange
durationChange
complete
markerTimeReached
markerDurationReached
markerAdd
markerRemove

 

除了以上罗列的事件之外，该开源播放器，是支持插件以及自定义事件的，具体的实现方式，作者尚未研究。这里主要是针对实现播放器常见功能重点研究几个事件和函数。

其中最重要的事件，莫过于currentTimeChange事件，以该事件为例，对播放器添加事件监听，如下：

player.addEventListener("currentTimeChange", "onCurrentTimeChange");

/**
 * 播放器时间变化事件
 * @param time
 * @param duration
 */
function onCurrentTimeChange(time, duration){
	currentTime = time;
}

 该事件被触发时，播放器会调用对应的js函数，并传入当前时间和总时间两个参数。

假设我们要做刷新后的继续播放，就需要通过该函数记录当前播放时间，并在下一次加载页面的时候，通过setCurrentTime来进行跳转（值得注意的是，该方法需要监听playStateChange事件中在buffering状态下执行），如下（省略添加监听事件的代码）：

/**
 * 播放状态变更事件
 * @param state
 */
function onMediaPlayerStateChange(state){
	//是否需要跳转
	if(needJump){
		//当状态为缓冲中时，进行时间跳转
		if(state == "buffering"){
			player.setCurrentTime(currentTime);
			//清除跳转处理信息
			needJump = false;
			currentTime = null;
		}
	}
}

其他事件监听的原理类似，具体入参，可以通过js的arguments获取得知，或阅读ActionScript的源代码做确切了解。

 

本文主要是探讨了StrobeMediaPlayback与js桥接并实现监听与控制的方式，具体各事件的监听处理，还是需要进一步研究的。