video常见问题我要提意见

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

说明:

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

方法:

对象:

回调方法:

权限:

5+功能模块(permissions)


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

createVideoPlayer

创建VideoPlayer对象


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

说明:

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

参数:

返回值:

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);
	}
}
	</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);
				

说明:

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

参数:

返回值:

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);
	}
}
	</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。

参数:

返回值:

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。

参数:

返回值:

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)。

构造:

方法:

VideoPlayer.constructor(id, styles)

创建VideoPlayer对象


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

说明:

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

参数:

返回值:

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">
// 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函数的执行。 可多次调用此方法向视频播放控件添加多个监听器,当监听的事件发生时,将按照添加的先后顺序执行。

参数:

返回值:

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。

参数:

返回值:

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。

参数:

返回值:

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);
						

说明:

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

参数:

返回值:

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);
						

参数:

返回值:

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);
						

说明:

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

参数:

返回值:

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);
						

参数:

返回值:

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 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

视频播放控件参数

属性:

VideoPlayerEvents

视频播放控件事件类型

常量:

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对象


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

说明:

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

参数:

返回值:

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">
// 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函数的执行。 可多次调用此方法向直播推流控件添加多个监听器,当监听的事件发生时,将按照添加的先后顺序执行。

参数:

返回值:

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。

参数:

返回值:

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。

参数:

返回值:

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);
						

说明:

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

参数:

返回值:

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);
						

说明:

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

参数:

返回值:

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);
						

参数:

返回值:

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

直播推流控件配置选项

属性:

LivePusherEvents

直播推流控件事件类型

常量:

VideoPlayerEventCallback

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


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

参数:

返回值:

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.
}
				

参数:

返回值:

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>