@(HTML5)
前端

前端视频播放调研

需求

• 支持hls视频格式。
• 支持Android、iOS、Web播放视频。
• 统计视频开始、暂停、正在播放中，结束事件。
• 统计用户何时进入页面，并且在页面待了多久。

多端播放技术方案选型

• Android对hhls格式的视频支持的不好，所以需要SDK在WebView中加入自己实现的视频播放器，所以目前Android只统计视频开始播放这个事件，视频播放解码弹出系统视频播放器列表让用户选择，所以其他事件无法监听，等待SDK实现播放器后在统计其他事件。
• iOS对hls格式支持良好，可以直接调用HTML5视频相关的API实现所有需求。
• Web不支持hls，决定采用flash的解决方案，通过寻找和调研后，最终选择了GrindPlayer作为视频播放器，使用Flashls作为hls的解码器插件。
  
  • GrindPlayer：http://osmfhls.kutu.ru/docs/grind/ 这里有详细的文档，可以实现视频数据统计的需求。
  • hls：http://www.flashls.org，不要下载官网的demo，要下载GitHub里面的版本。

统计用户视频留存时间和页面留存时间

• 进入页面 进入页面后，向服务端发送一个请求。
• 离开页面 由于离开页面事件监听到已经无法控制，只能够阻止一下，但是阻止后无法获得关闭回掉并有充足的事件发送一个请求，所以决定每分钟向服务器发送一个请求。
• 视频留存时间 由于关闭页面、按Home等复杂事件前端无法监控，所以视频决定每30S向服务端发送一个请求，告诉服务端正在播放视频，视频播放完毕后不再发送，重新播放后才可以再发送这个请求。

视频播放数据上报实现

由于Android只统计了开始播放事件，不做过多处理。

iOS视频播放统计上报使用HTML5原生API实现，如下：

// videoStart 视频开始播放
videoEle.addEventListener("play", function(e){
    upVideoDataTools.videoStart();
    console.log("start");
}, false);
// videoPause 视频暂停播放
videoEle.addEventListener("pause", function(e){
    upVideoDataTools.videoPause();
    console.log("pause");
}, false);
// videoEnd 视频播放结束
videoEle.addEventListener("ended", function(e){
    upVideoDataTools.videoEnd();
    console.log("end");
});
// 每隔30S上传一次视频播放信息 videoPlaying
window.setInterval(function(){
    if(videoEle.played && videoEle.played.length > 0){
        var currentTime = videoEle.currentTime;
        var duration = videoEle.duration;
        if(currentTime < duration){
            upVideoDataTools.videoPlaying();
            console.log("playing");
        }
    }
}, 30000);

Flash引入方式

• 需要文件
  swfobject.js：作为加载flash的js库
  GrindPlayer.swf：flash播放器
  flashhlsOSMF.swf：hls的视频解码插件

• js加载flash的代码

var parameters = {
        src: queryParam.videoSrc, //视频的url
        autoPlay: "false",
        verbose: true,
        controlBarAutoHide: "true",
        controlBarPosition: "bottom",
        poster: "images/poster.png",
        javascriptCallbackFunction: "jsbridge",
        plugin_hls: "../flash/flashlsOSMF.swf", // hls解码插件的地址
        hls_minbufferlength: -1,
        hls_maxbufferlength: 30,
        hls_lowbufferlength: 3,
        hls_seekmode: "KEYFRAME",
        hls_startfromlevel: -1,
        hls_seekfromlevel: -1,
        hls_live_flushurlcache: false,
        hls_info: false,
        hls_debug: false,
        hls_debug2: false,
        hls_warn: false,
        hls_error: false,
        hls_fragmentloadmaxretry : -1,
        hls_manifestloadmaxretry : -1,
        hls_capleveltostage : false,
        hls_maxlevelcappingmode : "downscale"
    };
swfobject.embedSWF(
            "../flash/GrindPlayer.swf" // flash视频播放器地址
            , "ppscFlashVideo" // 页面中的ID
            , '100%'
            , '100%'
            , "10.1.0"
            , "expressInstall.swf" // flash安装提示 可忽略
            , parameters // 一些必备参数 在上面写到了
            , {
                allowFullScreen: "true",
                wmode: wmodeValue
            }
            , {
                name: "GrindPlayer" // 视频播放器的名字 引入多个视频的时候需要考虑
            }
    );

• Web使用了flash暴露的事件，实现如下：

function jsbridge(playerId, event, data) {
    switch(event) {
        case "onJavaScriptBridgeCreated":
            break;
        case "timeChange":
            // 视频开始播放
            if(isPlayStart === false && data.currentTime > 0 && data.currentTime < 1){
                upVideoDataTools.videoStart();
                isPlayStart = true;
            }
            // 视频正在播放
            if(isCanUpPlaying === true && isPlayStart === true && isComplete === false){
                upVideoDataTools.videoPlaying();
                // 由于无法实时查看视频播放状态 只能在触发该事件的时候检查是否过了30S
                isCanUpPlaying = false;
                // 记得定时器要清除 
                if(upPlayingTimer != null){
                    window.clearTimeout(upPlayingTimer);
                }
                upPlayingTimer = window.setTimeout(function(){
                    isCanUpPlaying = true;
                }, 30000);
            }
            break;
        case "paused":
            // 视频播放暂停
            upVideoDataTools.videoPause();
            break;
        case "complete":
            // 视频播放完成
            if(isComplete === false){
                isComplete = true;
                upVideoDataTools.videoEnd();
            }
            break;
        default:
            // console.log("*", event, data);
    }
}