示例代码：
<!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':'你的视频链接',
'top':'500px',
'left':'0px',
'width': '100%',
'height': '200px',
'initial-time':'59.547001'
});
plus.webview.currentWebview().append(player);
// 监听开始播放事件
player.addEventListener('play', function(e){
plus.nativeUI.alert('Video play');
}, false)
// 监听播放进度更新事件
player.addEventListener('timeupdate', function(e){
console.log(JSON.stringify(e));
}, false);
// 监听播放结束事件
player.addEventListener('ended', function(e){
plus.nativeUI.alert('Video ended');
}, false);
}
}
document.addEventListener('plusready', createVideoPlayer, 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>
用Hbuilder运行这个页面，就可以监听到的播放进度更新事件和播放进度结束事件。视频播放过程中，会有一个总时长和已观看时长。我们拿到已观看时长，传参。在用户下次进来时，把这个已观看时长的num值，赋值给initial-time即可,这样用户就可以继续看下去。
initial-time是VideoPlayer的一个参数。此外VideoPlayer还支持很多其他的参数，如我的测试中用到的top、left、width、height。
- 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"。 - 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 无效。
网友评论