video
- 方法：
- 对象：
- 回调方法：
- 权限：
createVideoPlayer
- 说明：
- 参数：
- 返回值：
- 平台支持：
- 示例：
createLivePusher
- 说明：
- 参数：
- 返回值：
- 平台支持：
- 示例：
getVideoPlayerById
- 说明：
- 参数：
- 返回值：
- 示例：
getLivePusherById
- 说明：
- 参数：
- 返回值：
- 示例：
VideoPlayer
- 说明：
- 构造：
- 方法：
VideoPlayer.constructor(id, styles)
- 说明：
- 参数：
- 返回值：
- 平台支持：
- 示例：
addEventListener
- 说明：
- 参数：
- 返回值：
- 示例：
setStyles
- 说明：
- 参数：
- 返回值：
- 示例：
setOptions
- 说明：
- 参数：
- 返回值：
- 示例：
play
- 说明：
- 参数：
- 返回值：
- 示例：
pause
- 说明：
- 参数：
- 返回值：
- 示例：
seek
- 说明：
- 参数：
- 返回值：
- 示例：
requestFullScreen
- 参数：
- 返回值：
- 示例：
exitFullScreen
- 参数：
- 返回值：
- 示例：
stop
- 说明：
- 参数：
- 返回值：
- 示例：
hide
- 说明：
- 参数：
- 返回值：
- 示例：
show
- 说明：
- 参数：
- 返回值：
- 示例：
close
- 说明：
- 参数：
- 返回值：
- 示例：
sendDanmu
- 说明：
- 参数：
- 返回值：
- 示例：
playbackRate
- 参数：
- 返回值：
- 平台支持：
- 示例：
VideoPlayerStyles
- 属性：
VideoPlayerEvents
- 常量：
LivePusher
- 说明：
- 构造：
- 方法：
LivePusher.constructor(id, options)
- 说明：
- 参数：
- 返回值：
- 平台支持：
- 示例：
addEventListener
- 说明：
- 参数：
- 返回值：
- 示例：
setStyles
- 说明：
- 参数：
- 返回值：
- 示例：
setOptions
- 说明：
- 参数：
- 返回值：
- 示例：
preview
- 说明：
- 参数：
- 返回值：
- 示例：
start
- 说明：
- 参数：
- 返回值：
- 示例：
stop
- 说明：
- 参数：
- 返回值：
- 示例：
pause
- 说明：
- 参数：
- 返回值：
- 示例：
resume
- 说明：
- 参数：
- 返回值：
- 示例：
switchCamera
- 参数：
- 返回值：
- 示例：
snapshot
- 参数：
- 返回值：
- 示例：
close
- 说明：
- 参数：
- 返回值：
- 示例：
LivePusherStyles
- 属性：
LivePusherEvents
- 常量：
VideoPlayerEventCallback
- 参数：
- 返回值：
- 示例：
LivePusherEventCallback
- 参数：
- 返回值：
- 示例：

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项

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。
min-bitrate: (Number类型)最小码率默认值为200。
max-bitrate: (Number类型)最大码率默认值为1000。
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>

uni-app使用plus注意事项

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>

uni-app使用plus注意事项