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

  • 相关阅读:
    设计模式-组合模式
    WWDC2017-advanced_animations_with_uikit
    PS--人物皮肤处理流程(一)
    PS--人物黄金色调
    废墟调色规律
    PS--色彩调试
    PS--磨皮技巧
    PS 部分技巧快捷键
    PS--图片调色
    PS--增加照片暗部的亮度
  • 原文地址:https://www.cnblogs.com/mracale/p/6726348.html
Copyright © 2011-2022 走看看