在本次项目中，根据客户方的要求，需要一个短视频功能模块。团队在选择前端框架时，使用的是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();
})
网友评论