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桥接并实现监听与控制的方式,具体各事件的监听处理,还是需要进一步研究的。