在本次项目中，根据客户方的要求，需要一个短视频功能模块。团队在选择前端框架时，使用的是MUI框架，一个最接近原生App体验的前端框架，可以调用H5+API实现众多的功能，其中Video模块即是管理多媒体视频相关的能力，如创建视频播放控件，直播推流控件等。
视频播放
点击按钮弹出视频播放界面。/**
*
description创建VideoPlayer对象*
exampleVideoPlayerplus.video.createVideoPlayer(id,styles);*
param{id}VideoPlayer对象的全局标识*
param{styles}视频播放控件参数*/
varplayer=plus.video.createVideoPlayer(vp,{
src:res/defaultVideo.mp4,//视频资源地址,支持本地地址,也支持网络地址及直播流
initial-time:5,//视频初始播放位置,单位为秒,仅在视频开始播放前设置有效
duration:10,//视频长度,单位为秒,仅在视频开始播放前设置有效
controls:true,//是否显示默认播放控件
danmu-list:[{
text:弹幕01,
color:#FF,
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:px,//VideoPlayer控件的高度
position:static//VideoPlayer控件在Webview窗口的布局模式,static静态布局模式;absolute绝对布局模式,默认static
});
//创建VideoPlayer后,需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示.
plus.webview.currentWebview().append(player);
在当前页面div标签中显示。 /**
*
description创建VideoPlayer对象*
examplevarvideo=newplus.video.VideoPlayer(id,styles);*
param{id}视频播放控件在Webview窗口的DOM节点的id值*
param{styles}视频播放控件参数*/
varvideo=newplus.video.VideoPlayer(currentVideo,{
src:res/defaultVideo.mp4//视频资源地址,支持本地地址,也支持网络地址及直播流
});
很多时候，我们需要对视频进行监听操作，比如现在很流行的视频播放一段时间后弹出广告。/**
*
description监听视频播放控件事件*
examplevoidvideo.addEventListener(event,listener,capture);*
param{event}视频播放控件事件类型*
param{listener}监听事件发生时执行的回调函数*
param{capture}捕获事件流顺序，暂无效果*/
video.addEventListener(pause,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流量的重要来源之一。/**
*
description创建LivePusher对象*
exampleLivePusherplus.video.createLivePusher(id,styles);*
param{id}LivePusher对象的全局标识*
param{styles}直播推流控件参数*/
varpusher=plus.video.createLivePusher(livepusher,{
url:rtmp://testlivesdk.v0.upaiyun.