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

截止此处，H5+ API Video模块在MUI项目中的简单使用已经完成，我们在项目中使用时需要针对项目来个别处理。