video

Video模块管理多媒体视频相关能力，可用创建视频播放控件，直播推流控件等。

方法：

createVideoPlayer: 创建VideoPlayer对象
createLivePusher: 创建LivePusher对象
getVideoPlayerById: 查找已经创建的VideoPlayer对象
getLivePusherById: 查找已经创建的LivePusher对象

对象：

VideoPlayer: 视频播放控件对象
VideoPlayerStyles: 视频播放控件参数
VideoPlayerEvents: 视频播放控件事件类型
LivePusher: 直播推流控件对象
LivePusherStyles: 直播推流控件配置选项
LivePusherEvents: 直播推流控件事件类型

回调方法：

VideoPlayerEventCallback: 视频播放控件事件监听回调函数
LivePusherEventCallback: 视频播放控件事件监听回调函数

模块：

5+功能模块（permissions）


{
// ...
"permissions":{
	// ...
	"VideoPlayer": {
		"description": "视频播放"
	},
	"LivePusher": {
		"description": "直播推流"
	}
}
}

createVideoPlayer

创建VideoPlayer对象


VideoPlayer plus.video.createVideoPlayer(id, styles);

说明：

调用此方法创建后并不会显示，需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示。注意：此时需要通过styles参数的top/left/width/height属性设置控件的位置及大小。

参数：

id: ( String ) 必选 VideoPlayer对象的全局标识
可用于通过plus.video.getVideoPlayerById()方法查找已经创建的VideoPlayer对象。
styles: ( VideoPlayerStyles ) 可选 视频播放控件参数
设置视频播放控件的位置及大小等。

返回值：

VideoPlayer : 视频播放控件对象

平台支持：

Android - 4.0+ (支持): Android4.0及以上版本支持。
iOS - 7.0+ (支持): iOS7.0及以上版本支持。

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var player = null;
// 创建视频播放控件
function createVideoPlayer() {
	if(!player){
		player = plus.video.createVideoPlayer('videoplayer', {
			src:'rtmp://live.hkstv.hk.lxdns.com/live/hks',
			top:'100px',
			left:'0px',
			width: '100%',
			height: '200px',
			position: 'static'
		});
		plus.webview.currentWebview().append(player);
	}
}
	</script>
	<style type="text/css">
*{
	-webkit-user-select: none;
}
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
}
	</style>
	</head>
	<body>
		<button onclick="createVideoPlayer()">创建视频播放控件</button>
	</body>
</html>

createLivePusher

创建LivePusher对象


LivePusher plus.video.createLivePusher(id, styles);

说明：

参数：

id: ( String ) 必选 LivePusher对象的全局标识
可用于通过plus.video.getLivePusherById()方法查找已经创建的LivePusher对象。
styles: ( LivePusherStyles ) 可选 直播推流控件参数
设置直播推流控件的位置及大小等。

返回值：

LivePusher : 直播推流控件对象

平台支持：

Android - 4.1+ (支持): Android4.1及以上版本支持。
iOS - 8.0+ (支持): iOS8.0及以上版本支持。

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// 创建直播推流控件
function createLivePusher() {
	if(!pusher){
		pusher = plus.video.createLivePusher('livepusher', {
			url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb',
			top:'100px',
			left:'0px',
			width: '100%',
			height: '300px',
			position: 'static'
		});
		plus.webview.currentWebview().append(pusher);
	}
}
	</script>
	<style type="text/css">
*{
	-webkit-user-select: none;
}
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
}
	</style>
	</head>
	<body>
		<button onclick="createLivePusher()">创建直播推流控件</button>
	</body>
</html>

getVideoPlayerById

查找已经创建的VideoPlayer对象


VideoPlayer plus.video.getVideoPlayerById(id);

说明：

查找指定id的VideoPlayer对象，如果不存在则返回null。

参数：

id: ( String ) 必选 VideoPlayer对象的全局标识
如果存在多个相同标识的VideoPlayer对象，则返回第一个查找到的VideoPlayer对象。如果不存在指定标识的VideoPlayer对象，则返回null。

返回值：

VideoPlayer : 视频播放控件对象

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var player = null;
// 创建视频播放控件
function createVideoPlayer() {
	if(!player){
		player = plus.video.createVideoPlayer('videoplayer', {
			src:'rtmp://live.hkstv.hk.lxdns.com/live/hks',
			top:'100px',
			left:'0px',
			width: '100%',
			height: '200px',
			position: 'static'
		});
		plus.webview.currentWebview().append(player);
	}
}
// 查找视频播放控件
function findVideoPlayer() {
	var b = plus.video.getVideoPlayerById('videoplayer');
	if(b){
		console.log('find success!');
		alert('success');
	} else {
		console.log('find failed!');
		alert('failed');
	}
}
	</script>
	<style type="text/css">
*{
	-webkit-user-select: none;
}
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
}
	</style>
	</head>
	<body>
		<button onclick="createVideoPlayer()">创建视频播放控件</button>
		<br/>
		<button onclick="findVideoPlayer()">查找视频播放控件</button>
	</body>
</html>

getLivePusherById

查找已经创建的LivePusher对象


LivePusher plus.video.getLivePusherById(id);

说明：

查找指定id的LivePusher对象，如果不存在则返回null。

参数：

id: ( String ) 必选 LivePusher对象的全局标识
如果存在多个相同标识的LivePusher对象，则返回第一个查找到的LivePusher对象。如果不存在指定标识的LivePusher对象，则返回null。

返回值：

LivePusher : 直播推流控件对象

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// 创建直播推流控件
function createLivePusher() {
	if(!pusher){
		pusher = plus.video.createLivePusher('livepusher', {
			url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb',
			top:'100px',
			left:'0px',
			width: '100%',
			height: '300px',
			position: 'static'
		});
		plus.webview.currentWebview().append(pusher);
	}
}
// 查找直播推流控件
function findLivePusher() {
	var b = plus.video.getLivePusherById('livepusher');
	if(b){
		console.log('find success!');
		alert('success');
	} else {
		console.log('find failed!');
		alert('failed');
	}
}
	</script>
	<style type="text/css">
*{
	-webkit-user-select: none;
}
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
}
	</style>
	</head>
	<body>
		<button onclick="createLivePusher()">创建视频播放控件</button>
		<br/>
		<button onclick="findLivePusher()">查找直播推流控件</button>
	</body>
</html>

VideoPlayer

视频播放控件对象


interface plus.video.VideoPlayer {
	// Methods
	function void addEventListener(event, listener, capture);
	function void setStyles(styles);
	function void play();
	function void pause();
	function void seek(position);
	function void requestFullScreen();
	function void exitFullScreen();
	function void stop();
	function void hide();
	function void show();
	function void close();
	function void sendDanmu(danmu);
	function void playbackRate(rate);
}

说明：

VideoPlayer对象表示视频播放控件对象，在窗口中播放视频，可支持本地视频(mp4/flv)，网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。编码格式： Android平台：h264、mpeg4、flv、hevc、vp6f、vp8/9 iOS平台：h264、mpeg4、flv、hevc、vp6f

构造：

VideoPlayer.constructor(id, styles): 创建VideoPlayer对象

方法：

addEventListener: 监听视频播放控件事件
setStyles: 设置视频播放控件参数
setOptions: 设置视频播放控件参数（将废弃，使用setStyles）
play: 播放视频
pause: 暂停视频
seek: 跳转到指定位置
requestFullScreen: 切换到全屏
exitFullScreen: 退出全屏
stop: 停止播放视频
hide: 隐藏视频播放控件
show: 显示视频播放控件
close: 关闭视频播放控件
sendDanmu: 发送弹幕
playbackRate: 设置倍速播放

VideoPlayer.constructor(id, styles)

创建VideoPlayer对象


var video = new plus.video.VideoPlayer(id, styles);

说明：

创建VideoPlayer对象，并指定VideoPlayer对象的在界面中关联div或object标签的id号。

参数：

id: ( String ) 必选 视频播放控件在Webview窗口的DOM节点的id值
为了定义视频控件在Webview窗口中的位置，需要指定控件定位标签（div或objecct）的id号，系统将根据此id号来确定视频播放控件的大小及位置。
styles: ( VideoPlayerStyles ) 可选 视频播放控件参数
设置视频播放控件的资源地址、初始播放位置等参数。

返回值：

VideoPlayer : 视频播放控件对象

平台支持：

Android - 4.0+ (支持): Android4.0及以上版本支持。
iOS - 7.0+ (支持): iOS7.0及以上版本支持。

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	var video = new plus.video.VideoPlayer('video',{
		src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'
	});
}
document.addEventListener('plusready', plusReady, false);
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

addEventListener

监听视频播放控件事件


void video.addEventListener(event, listener, capture);

说明：

向视频播放控件添加事件监听器，当指定的事件发生时，将触发listener函数的执行。可多次调用此方法向视频播放控件添加多个监听器，当监听的事件发生时，将按照添加的先后顺序执行。

参数：

event: ( VideoPlayerEvents ) 必选 视频播放控件事件类型
listener: ( VideoPlayerEventCallback ) 必选 监听事件发生时执行的回调函数
capture: ( Boolean ) 可选 捕获事件流顺序，暂无效果

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	var video = new plus.video.VideoPlayer('video',{
		src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'
	});
	// 监听开始播放事件
	video.addEventListener('play', function(e){
		plus.nativeUI.alert('Video play');
	}, false)
	// 监听播放进度更新事件
	video.addEventListener('timeupdate', function(e){
		console.log(JSON.stringify(e));
	}, false);
	// 监听播放结束事件
	video.addEventListener('ended', function(e){
		plus.nativeUI.alert('Video ended');
	}, false);
}
document.addEventListener('plusready', plusReady, false);
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

setStyles

设置视频播放控件参数


void video.setStyles(styles);

说明：

用于动态更新视频播放控件的配置参数。注意：有些选项无法动态更新，只能创建时进行设置，详情参考VideoPlayerStyles。

参数：

styles: ( VideoPlayerStyles ) 必选 要更新的配置参数

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var src1 = 'rtmp://live.hkstv.hk.lxdns.com/live/hks';
var src2 = 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400';
var src = src1;
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:src
	});
}
document.addEventListener('plusready', plusReady, false);
// 切换视频地址
function switchVideo(){
	src = (src==src1)?src2:src1;
	video.setStyles({src:src});
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="switchVideo()">切换视频地址</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

setOptions

设置视频播放控件参数（将废弃，使用setStyles）


void video.setOptions(options);

说明：

用于动态更新视频播放控件的配置选项。注意：有些选项无法动态更新，只能创建时进行设置，详情参考VideoPlayerStyles。

参数：

options: ( VideoPlayerStyles ) 必选 要更新的配置选项

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var src1 = 'rtmp://live.hkstv.hk.lxdns.com/live/hks';
var src2 = 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400';
var src = src1;
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:src
	});
}
document.addEventListener('plusready', plusReady, false);
// 切换视频地址
function switchVideo(){
	src = (src==src1)?src2:src1;
	video.setOptions({src:src});
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="switchVideo()">切换视频地址</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

play

播放视频


void video.play();

说明：

如果视频已经处于播放状态，则操作无效。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function plsyVideo(){
	video.play();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="plsyVideo()">播放视频</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

pause

暂停视频


void video.pause();

说明：

如果视频未处于播放状态，则操作无效。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 暂停视频
function pauseVideo(){
	video.pause();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="pauseVideo()">暂停视频</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

seek

跳转到指定位置


void video.seek(position);

说明：

如果视频未处于播放状态，则操作无效。

参数：

position: ( Number ) 必选 跳转到的位置
单位为秒（s）。注意：由于视频流只能从关键帧开始播放，可能存在不精确的情况。

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 调到指定位置播放
function seekVideo(){
	video.seek(100)
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="seekVideo()">调到视频100秒处播放</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

requestFullScreen

切换到全屏


void video.requestFullScreen(direction);

参数：

direction: ( Number ) 必选 视频的方向
可取值： 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）。

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 全屏播放
function fullscreenVideo(){
	video.requestFullScreen();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="fullscreenVideo()">全屏播放</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

exitFullScreen

退出全屏


void video.exitFullScreen();

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 全屏播放
function fullscreenVideo(){
	video.requestFullScreen();
	video.addEventListener('ended', function(){
		video.exitFullScreen();
	}, false);
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="fullscreenVideo()">全屏播放（播放完成后自动退出全屏）</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

stop

停止播放视频


void video.stop();

说明：

如果视频未处于播放或暂停状态，则操作无效。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 停止播放
function stopVideo(){
	video.stop();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="stopVideo()">停止播放</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

hide

隐藏视频播放控件


void video.hide();

说明：

隐藏只是控件不可见，控件依然存在并且不改变播放状态。如果控件已经隐藏，则操作无效。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 隐藏视频
function hideVideo(){
	video.hide();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="hideVideo()">隐藏视频</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

show

显示视频播放控件


void video.show();

说明：

将隐藏的控件显示出来（回复到隐藏前的状态）。如果控件已经显示，则操作无效。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 隐藏视频
function hideVideo(){
	video.hide();
}
// 显示视频
function showVideo(){
	video.showe();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="hideVideo()">隐藏视频</button>
		<button onclick="showVideo()">显示视频</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

close

关闭视频播放控件


void video.close();

说明：

关闭操作将释放控件所有资源，不再可用。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 关闭视频
function closeVideo(){
	video.close();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="closeVideo()">关闭视频</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

sendDanmu

发送弹幕


void video.sendDanmu(danmu);

说明：

如果视频未处于播放状态，则操作无效。

参数：

danmu: ( JSON ) 必选 发送的弹幕
支持以下属性：text（弹幕的文本内容），color（弹幕的颜色）。

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 发送弹幕
function danmuVideo(){
	video.sendDanmu({text:'要显示的弹幕文本',color:'#FF0000'});
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="danmuVideo()">发送弹幕</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

playbackRate

设置倍速播放


void video.playbackRate(rate);

参数：

rate: ( Number ) 必选 播放的倍率
可取值： 0.5/0.8/1.0/1.25/1.5。

返回值：

void : 无

平台支持：

Android - ALL (支持)
iOS - ALL (不支持): 暂不支持倍率播放。

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var video = null;
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	video = new plus.video.VideoPlayer('video',{
		src:'http://vjs.zencdn.net/v/oceans.mp4'
	});
}
document.addEventListener('plusready', plusReady, false);
// 播放视频
function playVideo(){
	video.play();
}
// 设置播放倍率
function rateVideo(){
	video.playbackRate(1.5);
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<button onclick="playVideo()">播放视频</button>
		<button onclick="rateVideo()">倍率播放</button>
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

VideoPlayerStyles

视频播放控件参数

属性：

src: (String 类型 )视频资源地址
支持本地地址，也支持网络地址及直播流（RTMP）。
initial-time: (Number 类型 )视频初始播放位置
单位为秒（s）。注意：仅在视频开始播放前设置有效。
duration: (Number 类型 )视频长度
单位为秒（s）。注意：仅在视频开始播放前设置有效。
controls: (Boolean 类型 )是否显示默认播放控件
默认值为true。包括播放/暂停按钮、播放进度、时间等。
danmu-list: (Array(JSON) 类型 )弹幕列表
弹幕JSON对象包括属性：text（String类型，弹幕文本类容），color（String类型，弹幕颜色，格式为#RRGGBB），time（Number类型，弹幕出现的时间，单位为秒）。
danmu-btn: (Boolean 类型 )是否显示弹幕按钮
默认值为false。注意：仅在控件构造时设置有效，不能动态更新。
enable-danmu: (Boolean 类型 )是否展示弹幕
默认值为false。注意：仅在控件构造时设置有效，不能动态更新。
autoplay: (Boolean 类型 )是否自动播放
默认值为false。
loop: (Boolean 类型 )是否循环播放
默认值为false。
muted: (Boolean 类型 )是否静音播放
默认值为false。
direction: (Number 类型 )设置全屏时视频的方向
不指定则根据宽高比自动判断。有效值为： 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度）。默认值为-90。
show-progress: (Boolean 类型 )是否显示播放进度
默认值为true。
show-fullscreen-btn: (Boolean 类型 )是否显示全屏按钮
默认值为true。
show-play-btn: (Boolean 类型 )是否显示视频底部控制栏的播放按钮
默认值为true。
show-center-play-btn: (Boolean 类型 )是否显示视频中间的播放按钮
默认值为true。
enable-progress-gesture: (Boolean 类型 )是否开启控制进度的手势
默认值为true。
objectFit: (String 类型 )当视频大小与 video 容器大小不一致时，视频的表现形式
有效值为：contain（包含），fill（填充），cover（覆盖）。默认值为contain。仅Android平台支持。
poster: (String 类型 )视频封面的图片网络资源地址
如果 controls 属性值为 false 则设置 poster 无效。
top: (String 类型 )VideoPlayer控件左上角的垂直偏移量
可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的高度；自动计算，如"auto",根据height值自动计算，相对于父Webview窗口垂直居中。
left: (String 类型 )VideoPlayer控件左上角的水平偏移量
可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的宽度；自动计算，如"auto"，根据width值自动计算，相对于父Webview窗口水平居中。默认值为"0px"。
width: (String 类型 )VideoPlayer控件的宽度
可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的宽度。默认值为"100%"。
height: (String 类型 )VideoPlayer控件的高度
可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的高度。默认值为"100%"。
position: (String 类型 )VideoPlayer控件在Webview窗口的布局模式
可取值： "static" - 静态布局模式，如果页面存在滚动条则随窗口内容滚动； "absolute" - 绝对布局模式，如果页面存在滚动条不随窗口内容滚动；默认值为"static"。

VideoPlayerEvents

视频播放控件事件类型

常量：

"play": (String 类型 )视频播放事件
当视频开始/继续播放时触发。无事件回调函数参数。
"pause": (String 类型 )视频暂停事件
当视频暂停播放时触发。无事件回调函数参数。
"ended": (String 类型 )视频结束事件
当视频播放到末尾时触发。无事件回调函数参数。
"timeupdate": (String 类型 )视频播放进度更新事件
当视频播放进度变化时触发，触发频率250ms一次。事件回调函数参数event.detail = {currentTime:"Number类型，当前播放时间（单位为秒）",duration:"Number类型，视频总长度（单位为秒）"}。
"fullscreenchange": (String 类型 )视频播放全屏播放状态变化事件
当视频播放进入或退出全屏时触发。事件回调函数参数event.detail = {fullScreen:"Boolean类型，当前状态是否为全屏", direction:"String类型，vertical或horizontal"}。
"waiting": (String 类型 )视频缓冲事件
当视频播放出现缓冲时触发。无事件回调函数参数。
"error": (String 类型 )视频错误事件
当视频播放出错时触发。无事件回调函数参数。

LivePusher

直播推流控件对象


interface plus.video.LivePusher {
	// Methods
	function void addEventListener(event, listener, capture);
	function void setStyles(styles);
	function void preview();
	function void start();
	function void stop(options);
	function void pause();
	function void resume();
	function void switchCamera();
	function void snapshot();
	function void close();
}

说明：

LivePusher对象表示直播推流控件对象，在窗口中显示捕获视频，实时推送到流媒体（RTMP）服务器。

构造：

LivePusher.constructor(id, options): 创建LivePusher对象

方法：

addEventListener: 监听直播推流控件事件
setStyles: 设置直播推流控件参数
setOptions: 设置直播推流控件参数（将废弃，使用setStyles）
preview: 预览摄像头采集数据
start: 开始推流
stop: 停止推流
pause: 暂停推流
resume: 恢复推流
switchCamera: 切换前后摄像头
snapshot: 快照
close: 关闭直播推流控件

LivePusher.constructor(id, options)

创建LivePusher对象


var pusher = new plus.video.LivePusher(id, styles);

说明：

创建LivePusher对象，并指定LivePusher对象的在界面中关联div或object标签的id号。

参数：

id: ( String ) 必选 直播推流控件在Webview窗口的DOM节点的id值
为了定义直播推流控件在Webview窗口中的位置，需要指定控件定位标签（div或objecct）的id号，系统将根据此id号来确定直播推流控件的大小及位置。
styles: ( LivePusherStyles ) 可选 直播推流控件配置选项
设置直播推流服务器地址地址等参数。

返回值：

LivePusher : 直播推流控件对象

平台支持：

Android - 4.1+ (支持): Android4.1及以上版本支持。
iOS - 8.0+ (支持): iOS8.0及以上版本支持。

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	var pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
}
document.addEventListener('plusready', plusReady, false);
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

addEventListener

监听直播推流控件事件


void pusher.addEventListener(event, listener, capture);

说明：

向直播推流控件添加事件监听器，当指定的事件发生时，将触发listener函数的执行。可多次调用此方法向直播推流控件添加多个监听器，当监听的事件发生时，将按照添加的先后顺序执行。

参数：

event: ( LivePusherEvents ) 必选 直播推流控件事件类型
listener: ( LivePusherEventCallback ) 必选 监听事件发生时执行的回调函数
capture: ( Boolean ) 可选 捕获事件流顺序，暂无效果

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

setStyles

设置直播推流控件参数


void pusher.setStyles(styles);

说明：

用于动态更新直播推流控件的配置参数。注意：有些选项无法动态更新，只能创建时进行设置，详情参考LivePusherStyles。

参数：

styles: ( LivePusherStyles ) 必选 要更新的配置选项

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher', {
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 设置推流服务器
function updatePusher() {
	pusher.setOptions({
		url:'rtmp://push.live.dcloud.io/test/test123';
	});
}
// 开始推流
function startPusher() {
	pusher.start();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="updatePusher()">更新推流服务器</button>
		<br/>
		<button onclick="startPusher()">开始</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

setOptions

设置直播推流控件参数（将废弃，使用setStyles）


void pusher.setOptions(options);

说明：

用于动态更新直播推流控件的配置选项。注意：有些选项无法动态更新，只能创建时进行设置，详情参考LivePusherStyles。

参数：

options: ( LivePusherStyles ) 必选 要更新的配置选项

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 设置推流服务器
function updatePusher() {
	pusher.setOptions({
		url:'rtmp://push.live.dcloud.io/test/test123';
	});
}
// 开始推流
function startPusher() {
	pusher.start();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="updatePusher()">更新推流服务器</button>
		<br/>
		<button onclick="startPusher()">开始</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

preview

预览摄像头采集数据


void pusher.preview();

说明：

调用摄像头采集图像数据，并在推流控件中预览（此时不会向服务器推流，需调用start方法才开始推流）。注意：为了确保预览窗口大小正确，应该在创建控件后延时一定的时间（如500ms）进行预览。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
}
document.addEventListener('plusready', plusReady, false);
// 预览
function preview(){
	pusher.preview();
}
// 结束
function stopPreview(){
	pusher.stop({preview:false});
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="preview()">预览</button>
		<br/>
		<button onclick="stopPreview()">结束预览</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

start

开始推流


void pusher.start(successCB, errorCB);

说明：

如果已经处于推流状态，则操作无效。

参数：

successCB: ( Function ) 必选 开始推流成功回调
开始推流操作成功时触发，回调函数无参数。
errorCB: ( Function ) 可选 快照失败回调
开始推流操作失败时触发，返回错误信息，回调参数event={code:"错误代码",message:"错误描述信息"}。

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

stop

停止推流


void pusher.stop(options);

说明：

如果未处于推流状态，则操作无效。

参数：

options: ( json ) 必选 停止推流的参数
支持属性值preview，用于定义停止推流后是否继续预览，可取值： true - 继续预览，仅停止向服务器推流； false - 关闭预览，同时停止向服务器推流。默认值为false。

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
// 停止推流
function stopPusher() {
	pusher.stop();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/>
		<button onclick="stopPusher()">停止</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

pause

暂停推流


void pusher.pause();

说明：

如果未处于推流状态，则操作无效。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
// 暂停推流
function pausePusher() {
	pusher.pause();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/>
		<button onclick="pausePusher()">暂停</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

resume

恢复推流


void pusher.resume();

说明：

如果未处于暂停状态，则操作无效。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
// 暂停推流
function pausePusher() {
	pusher.pause();
}
// 恢复推流
function resumePusher() {
	pusher.resume();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/>
		<button onclick="pausePusher()">暂停</button>
		<br/>
		<button onclick="resumePusher()">恢复</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

switchCamera

切换前后摄像头


void pusher.switchCamera();

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
// 切换摄像头
function switchCamera() {
	pusher.switchCamera();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/>
		<button onclick="switchCamera()">切换摄像头</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

snapshot

快照


void pusher.snapshot(successCB, errorCB);

参数：

successCB: ( Function ) 必选 快照成功回调
快照操作成功时触发，并返回快照信息，回调参数event={width:"快照图片宽度",height:"快照图片高度",tempImagePath:"快照图片路径"}。
errorCB: ( Function ) 可选 快照失败回调
快照操作失败时触发，返回错误信息，回调参数event={code:"错误代码",message:"错误描述信息"}。

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
// 快照
function snapshotPusher() {
	pusher.snapshot(function(e){
		plus.nativeUI.alert("snapshot success: "+JSON.stringify(e));
	}, function(e) {
		plus.nativeUI.alert("snapshot error: "+JSON.stringify(e));
	});
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/>
		<button onclick="snapshotPusher()">快照</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

close

关闭直播推流控件


void pusher.close();

说明：

关闭操作将释放控件所有资源，不再可用。

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
// 关闭推流
function closePusher() {
	pusher.close();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/>
		<button onclick="closePusher()">关闭</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

LivePusherStyles

直播推流控件配置选项

属性：

url: (String 类型 )推流地址
支持RTMP协议。
mode: (String 类型 )推流视频模式
可取值：SD（标清）, HD（高清）, FHD（超清）。
muted: (Boolean 类型 )是否静音
默认值为false。
enable-camera: (Boolean 类型 )开启摄像头
默认值为true。
auto-focus: (Boolean 类型 )自动聚集
默认值为true。
beauty: (Number 类型 )是否美颜
可取值0、1，其中0表示不使用美颜，1表示不使用美颜。默认值为0(不使用美颜)。
whiteness: (Number 类型 )是否美白
可取值0、1、2、3、4、5，其中0表示不使用美白，其余值分别表示美白的程度，值越大美白程度越大。默认值为0（不使用美白）。
aspect: (String 类型 )宽高比
可取值：3:4, 9:16。
top: (String 类型 )LivePusher控件左上角的垂直偏移量
可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的高度；自动计算，如"auto",根据height值自动计算，相对于父Webview窗口垂直居中。
left: (String 类型 )LivePusher控件左上角的水平偏移量
可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的宽度；自动计算，如"auto"，根据width值自动计算，相对于父Webview窗口水平居中。默认值为"0px"。
width: (String 类型 )LivePusher控件的宽度
可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的宽度。默认值为"100%"。
height: (String 类型 )LivePusher控件的高度
可取值：像素值，如"100px"；百分比，如"10%"，相对于父Webview窗口的高度。默认值为"100%"。
position: (String 类型 )LivePusher控件在Webview窗口的布局模式
可取值： "static" - 静态布局模式，如果页面存在滚动条则随窗口内容滚动； "absolute" - 绝对布局模式，如果页面存在滚动条不随窗口内容滚动；默认值为"static"。

LivePusherEvents

直播推流控件事件类型

常量：

"statechange": (String 类型 )状态变化事件
当推流连接服务器状态变化时触发。事件回调函数参数event={type:"事件类型，此时为statechange",target:"触发此事件的直播推流控件对象",detail:{code:"状态码，参考后面状态码说明",message:"描述信息"}}。其中code状态码： 1001 - 已经连接推流服务器； 1002 - 已经与服务器握手完毕,开始推流； 1003 - 打开摄像头成功； 1004 - 录屏启动成功； 1005 - 推流动态调整分辨率； 1006 - 推流动态调整码率； 1007 - 首帧画面采集完成； 1008 - 编码器启动； -1301 - 打开摄像头失败； -1302 - 打开麦克风失败； -1303 - 视频编码失败； -1304 - 音频编码失败； -1305 - 不支持的视频分辨率； -1306 - 不支持的音频采样率； -1307 - 网络断连，且经多次重连抢救无效，更多重试请自行重启推流； -1308 - 开始录屏失败，可能是被用户拒绝； -1309 - 录屏失败，不支持的Android系统版本，需要5.0以上的系统； -1310 - 录屏被其他应用打断了； -1311 - Android Mic打开成功，但是录不到音频数据； -1312 - 录屏动态切横竖屏失败； 1101 - 网络状况不佳：上行带宽太小，上传数据受阻； 1102 - 网络断连, 已启动自动重连； 1103 - 硬编码启动失败,采用软编码； 1104 - 视频编码失败； 1105 - 新美颜软编码启动失败，采用老的软编码； 1106 - 新美颜软编码启动失败，采用老的软编码； 3001 - RTMP -DNS解析失败； 3002 - RTMP服务器连接失败； 3003 - RTMP服务器握手失败； 3004 - RTMP服务器主动断开，请检查推流地址的合法性或防盗链有效期； 3005 - RTMP 读/写失败。
"netstatus": (String 类型 )网络状态通知事件
当推流的网络状态发生变化时触发。事件回调函数参数event={type:"事件类型，此时为netstatus",target:"触发此事件的直播推流控件对象",detail:{videoBitrate:"视频码率",audioBitrate:"音频码率",videoFPS:"视频帧率",netSpeed:"推流网速",videoWidth:"视频宽度",videoHeight:"视频高度"}}。
"error": (String 类型 )渲染错误事件
当推流发生错误是触发。事件回调函数参数event={type:"事件类型，此时为error",target:"触发此事件的直播推流控件对象",detail:{code:"错误编码，参考后面错误码说明",message:"描述信息"}}。其中code错误码： 1001 - 用户禁止使用摄像头； 1002 - 用户禁止使用录音。

VideoPlayerEventCallback

视频播放控件事件监听回调函数


void onEvent(event) {
	// Authenticate success code.
}

参数：

event: ( JSON ) 可选 事件触发时返回的参数
不同事件返回的参数不一样，详情参考VideoPlayerEvents事件说明。

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	// 创建视频播放控件
	var video = new plus.video.VideoPlayer('video',{
		src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'
	});
	// 监听播放进度更新事件
	video.addEventListener('timeupdate', function(e){
		console.log(JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		视频播放控件
		<br/><br/>
		<div id="video" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

LivePusherEventCallback

视频播放控件事件监听回调函数


void onEvent(event) {
	// event code.
}

参数：

event: ( JSON ) 可选 事件触发时返回的参数
不同事件返回的参数不一样，详情参考LivePusherEvents事件说明。

返回值：

void : 无

示例：


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
	// 监听网络状态变化事件
	pusher.addEventListener('netstatus', function(e){
		console.log('netstatus: '+JSON.stringify(e));
	}, false);
	// 监听错误事件
	pusher.addEventListener('error', function(e){
		console.log('error: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

Vdieo

API Reference

Plugins

Native.js

方法：

对象：

回调方法：

模块：

说明：

参数：

返回值：

平台支持：

示例：

说明：

参数：

返回值：

平台支持：

示例：

说明：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：

说明：

构造：

方法：

说明：

参数：

返回值：

平台支持：

示例：

说明：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：

参数：

返回值：

示例：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：

说明：

参数：

返回值：

示例：