整理 | MUI项目中使用Video模块播放视频以及直播推流

在本次项目中，根据客户方的要求，需要一个短视频功能模块。团队在选择前端框架时，使用的是MUI框架，一个最接近原生App体验的前端框架，可以调用H5+ API实现众多的功能，其中Video模块即是管理多媒体视频相关的能力，如创建视频播放控件，直播推流控件等。

视频播放

点击按钮弹出视频播放界面。

/**
 * @description 创建VideoPlayer对象
 * @example VideoPlayer plus.video.createVideoPlayer(id, styles);
 * @param {id}  VideoPlayer对象的全局标识
 * @param {styles}  视频播放控件参数
 */
var player = plus.video.createVideoPlayer('vp', {
    'src': 'res/defaultVideo.mp4',//视频资源地址,支持本地地址,也支持网络地址及直播流
    'initial-time': 5,//视频初始播放位置,单位为秒,仅在视频开始播放前设置有效
    'duration': 10,//视频长度,单位为秒,仅在视频开始播放前设置有效
    'controls': true, //是否显示默认播放控件
    'danmu-list': [{
        "text": "弹幕01",
        "color": "#FF0000",
        "time": 2
    }, {
        "text": "弹幕02",
        "color": "#00FF00",
        "time": 2
    }],
    'danmu-btn': true,//是否显示弹幕按钮
    'enable-danmu': true,//是否展开弹幕
    'autoplay': true,//是否自动播放
    'loop': true,//是否循环播放
    'muted': true,//是否静音播放
    'direction': 0,//设置全屏时视频的方向
    'show-progress': true,//是否显示播放进度
    'show-fullscreen-btn': false,//是否显示全屏按钮
    'show-play-btn': true,//是否显示视频底部控制栏的播放按钮
    'show-center-play-btn': true,//是否显示视频中间的播放按钮
    'enable-progress-gesture': true,//是否开启控制进度的手势
    'objectFit': "fill",//当视频大小与video容器大小不一致时,视频的表现形式contain(包含),fill(填充),cover(覆盖),默认值为contain.
    'poster': '',//视频封面的图片网络资源地址
    'top':  '85px',//VideoPlayer控件左上角的垂直偏移量
    'left': '5%',//VideoPlayer控件左上角的水平偏移量
    'width': '90%',//VideoPlayer控件的宽度
    'height': '600px',//VideoPlayer控件的高度
    'position': 'static'//VideoPlayer控件在Webview窗口的布局模式,static静态布局模式;absolute绝对布局模式,默认static
});
//创建VideoPlayer后,需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示.
plus.webview.currentWebview().append(player);

在当前页面div标签中显示。

mui.plusReady(function () {
    /**
     * @description 创建VideoPlayer对象
     * @example var video = new plus.video.VideoPlayer(id, styles);
     * @param {id}  视频播放控件在Webview窗口的DOM节点的id值
     * @param {styles}  视频播放控件参数
     */
    var video = new plus.video.VideoPlayer("currentVideo", {
        'src': 'res/defaultVideo.mp4',//视频资源地址,支持本地地址,也支持网络地址及直播流
        'initial-time': 5,//视频初始播放位置,单位为秒,仅在视频开始播放前设置有效
        'duration': 10,//视频长度,单位为秒,仅在视频开始播放前设置有效
        'controls': true, //是否显示默认播放控件
        'danmu-list': [{
            "text": "弹幕01",
            "color": "#FF0000",
            "time": 2
        }, {
            "text": "弹幕02",
            "color": "#00FF00",
            "time": 2
        }],
        'danmu-btn': true,//是否显示弹幕按钮
        'enable-danmu': true,//是否展开弹幕
        'autoplay': true,//是否自动播放
        'loop': true,//是否循环播放
        'muted': true,//是否静音播放
        'direction': 0,//设置全屏时视频的方向
        'show-progress': true,//是否显示播放进度
        'show-fullscreen-btn': false,//是否显示全屏按钮
        'show-play-btn': true,//是否显示视频底部控制栏的播放按钮
        'show-center-play-btn': true,//是否显示视频中间的播放按钮
        'enable-progress-gesture': true,//是否开启控制进度的手势
        'objectFit': "fill",//当视频大小与video容器大小不一致时,视频的表现形式contain(包含),fill(填充),cover(覆盖),默认值为contain.
        'poster': '',//视频封面的图片网络资源地址
        'top':  '85px',//VideoPlayer控件左上角的垂直偏移量
        'left': '5%',//VideoPlayer控件左上角的水平偏移量
        'width': '90%',//VideoPlayer控件的宽度
        'height': '600px',//VideoPlayer控件的高度
        'position': 'static'//VideoPlayer控件在Webview窗口的布局模式,static静态布局模式;absolute绝对布局模式,默认static
    })
});

很多时候，我们需要对视频进行监听操作，比如现在很流行的视频播放一段时间后弹出广告。

/**
 * @description 监听视频播放控件事件
 * @example void video.addEventListener(event, listener, capture);
 * @param {event}  视频播放控件事件类型
 * @param {listener}  监听事件发生时执行的回调函数
 * @param {capture}  捕获事件流顺序，暂无效果
 */
video.addEventListener("play", function(e) {
    /**
     * @param {play}  视频播放事件
     * @param {pause}  视频暂停事件
     * @param {ended}  视频结束事件
     * @param {timeupdate}  视频播放进度更新事件
     * @param {fullscreenchange}  视频播放全屏播放状态变化事件
     * @param {waiting}  视频缓冲事件
     * @param {error}  视频错误事件
     */
    console.log(e)
})

对于大多数视频，我们需要实现视频的切换，这时我们可以使用setStyles来更改视频的播放地址。

video.setStyles({
    'src': 'res/video01.mp4'
})

我们也可以自定义按钮来控制视频的播放、暂停等。

document.getElementById('playBtn').addEventListener('tap', function() {
    /**
     * @event {Function()} play 播放视频
     * @event {Function()} pause 暂停视频
     * @event {Function(position)} seek 跳转到指定位置,position为跳转的位置
     * @event {Function(direction)} requestFullScreen 切换全屏，direction为视频的方向
     * @event {Function()} exitFullScreen 退出全屏
     * @event {Function()} stop 停止播放视频
     * @event {Function()} hide 隐藏视频播放控件
     * @event {Function()} show 显示视频播放控件
     * @event {Function()} close 关闭视频播放控件
     * @event {Function(danmu)} sendDanmu 发送弹幕，danmu为发送的弹幕{"text": "弹幕文本内容", "color": "弹幕颜色"}
     * @event {Function(rate)} playbackRate 设置倍速播放，rate为播放的倍速，0.5/0.8/1.0/1.25/1.5 
     */
    video.play();
})

直播推流

从游戏角度来看，诸如某鱼、某虎等直播软件已经成为主流，平台的数据动辄过百万。对于移动端设备而言，其轻便易携带更是这类APP流量的重要来源之一。

document.getElementById('livePusher').addEventListener('tap', function() {
    /**
     * @description 创建LivePusher对象
     * @example LivePusher plus.video.createLivePusher(id, styles);
     * @param {id}  LivePusher对象的全局标识
     * @param {styles}  直播推流控件参数
     */
    var pusher = plus.video.createLivePusher("livepusher", {
        'url': 'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb',//推流地址
        'mode': 'SD',//推流视频模式:SD(标清),HD(高清),FHD(超清)
        'muted': true,//是否静音
        'enable-camera': true,//开启摄像头
        'auto-focus': true,//自动聚焦
        'beauty': 1,//是否美颜,0表示不使用美颜;1表示使用美颜
        'whiteness': 3,//是否美白,0表示不使用美白；1,2,3,4,5值越大美白程度越大
        'aspect': '3:4',//宽高比
        'top': '10%',//LivePusher控件左上角的垂直偏移量
        'left': '5%',//LivePusher控件左上角的水平偏移量
        'width': '90%',//LivePusher控件的宽度
        'height': '600px',//LivePusher控件的高度
        'position': "static",//LivePusher控件在Webview窗口的布局模式
    })
    //此方法创建后需要调用Webview创建的append方法将其添加到Webview窗口后才能显示
    plus.webview.currentWebview().append(pusher);
    
});

将直播流控件放置在当前页面的div标签中。

    /**
     * @description 创建LivePuser对象
     * @example var pusher = new plus.video.LivePusher(id, styles);
     * @param {id}  直播推流控件在Webview窗口的DOM节点的id值
     * @param {styles}  直播推流控件配置选项
     */
    var livePusher = new plus.video.LivePusher('currentLive', {
        'url': 'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb',//推流地址
        'mode': 'SD',//推流视频模式:SD(标清),HD(高清),FHD(超清)
        'muted': true,//是否静音
        'enable-camera': true,//开启摄像头
        'auto-focus': true,//自动聚焦
        'beauty': 1,//是否美颜,0表示不使用美颜;1表示使用美颜
        'whiteness': 3,//是否美白,0表示不使用美白；1,2,3,4,5值越大美白程度越大
        'aspect': '3:4',//宽高比
        'top': '10%',//LivePusher控件左上角的垂直偏移量
        'left': '5%',//LivePusher控件左上角的水平偏移量
        'width': '90%',//LivePusher控件的宽度
        'height': '600px',//LivePusher控件的高度
        'position': "static",//LivePusher控件在Webview窗口的布局模式
    })

对直播控件进行监听。

    /**
     * @description 监听直播推流控件事件
     * @example void pusher.addEventListener(event, listener, capture);
     * @param {event}  直播推流控件事件类型
     * @param {listener}  监听事件发生时执行的回调函数
     * @param {capture}  捕获事件流顺序，暂无效果
     */
    livePusher.addEventListener('statechange', function(e) {
        /**
         * @param {statechange}  状态变化事件
         * @param {netstatus}  网络状态同时事件
         * @param {error}  渲染错误事件
         */
        console.log(e);
    })

我们可以自定义按钮来控制直播推流的方式。

document.getElementById('liveBtn').addEventListener('tap', function() {
    /**
     * @event {Function(styles)} setStyles  设置直播推流控件参数
     * @event {Function()} preview  预览摄像头采集数据 
     * @event {Function(successCB, errorCB)} start 开始推流 
     * @event {Function(options)} stop 停止推流，options为停止推流的参数{"preview": true},用于定义停止推流后是否继续预览
     * @event {Function()} pasue 暂停推流
     * @event {Function()} resume 恢复推流
     * @event {Function()} switchCamera 切换前后摄像头
     * @event {Function()} snapshot 快照
     * @event {Function()} close 关闭直播推流控件
     */
    livePuser.close();
})