【apicloud】videoPlayer模块（视频播放）demo示例
videoPlayer 封装了视频播放功能（不支持音频播放）。可快进、快退设置播放位置等操作，亦可设置屏幕亮度和系统声音大小。通过监听接口可获取模块上的各种手势操作事件。
点击进入模块详情：http://www.apicloud.com/mod_detail?mdId=35792
点击进入完整源码和图片资源：https://github.com/apicloudcom/VideoPlayer-Example
index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
<style type="text/css">
html{ background-color: white; }
header{ border-bottom: 1px solid #ccc; padding: 25px 0; }
span {
padding: 10px 15px;
margin: 10px;
display: inline-block;
background-color: #e8e8e8;
}
.hover{ opacity: .4; }
</style>
</head>
<body>
<header>
<h1>videoPlayer</h1>
<mark>
使用前请详细阅读 文档 使用规则
</mark>
</header>
<span tapmode="hover" onclick="fnPlay()">play</span>
<span tapmode="hover" onclick="fnOpen()">open</span>
<span tapmode="hover" onclick="fnSetPath()">setPath</span>
<span tapmode="hover" onclick="fnStart()">start</span>
<span tapmode="hover" onclick="fnPause()">pause</span>
<span tapmode="hover" onclick="fnStop()">stop</span>
<span tapmode="hover" onclick="fnClose()">close</span>
<span tapmode="hover" onclick="fnShow()">show</span>
<span tapmode="hover" onclick="fnHide()">hide</span>
<span tapmode="hover" onclick="fnFullScreen()">fullScreen</span>
<span tapmode="hover" onclick="fnCancelFullScreen()">cancelFullScreen</span>
<span tapmode="hover" onclick="fnForward()">forward</span>
<span tapmode="hover" onclick="fnRewind()">rewind</span>
<span tapmode="hover" onclick="fnSeekTo()">seekTo</span>
<span tapmode="hover" onclick="fnSetBrightness()">setBrightness</span>
<span tapmode="hover" onclick="fnGetBrightness()">getBrightness</span>
<span tapmode="hover" onclick="fnSetVolume()">setVolume</span>
<span tapmode="hover" onclick="fnGetVolume()">getVolume</span>
<span tapmode="hover" onclick="fnAddEventListener()">addEventListener</span>
<span tapmode="hover" onclick="fnRemoveEventListener()">removeEventListener</span>
<span tapmode="hover" onclick="fnSetRect()">setRect</span>
</body>
</html>
<script type="text/javascript">
var videoPlayer;
apiready = function() {
videoPlayer = api.require('videoPlayer');
};
function fnPlay(){
var videoPlayer = api.require('videoPlayer');
videoPlayer.play({
texts: {
head: {
title: '顶部文字'
}
},
styles: {
head: {
bg: 'rgba(0.5,0.5,0.5,0.7)',
height: 44,
titleSize: 16,
titleColor: '#fff',
backSize: 20,
backImg: 'widget://image/back.png',
setSize: 20,
setImg: 'widget://image/set.png'
},
},
path: 'http://resource.apicloud.com/video/apicloud3.mp4',
autoPlay:true
},function(ret, err) {
alert(JSON.stringify(ret));
if (ret) {
alert(JSON.stringify(ret));
} else {
alert(JSON.stringify(err));
}
});
}
function fnOpen(){
videoPlayer.open({
rect:{
y:30,
h:150
},
autoPlay: true,
path: 'http://resource.apicloud.com/video/apicloud3.mp4'
}, function(ret, err){
if( ret.status ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnSetPath(){
videoPlayer.setPath({
path: 'http://resource.apicloud.com/video/apicloud3.mp4'
});
}
function fnStart(){
videoPlayer.start();
}
function fnPause(){
videoPlayer.pause();
}
function fnStop(){
videoPlayer.stop();
}
function fnClose(){
videoPlayer.close();
}
function fnShow(){
videoPlayer.show();
}
function fnHide(){
videoPlayer.hide();
}
function fnFullScreen(){
videoPlayer.fullScreen();
}
function fnCancelFullScreen(){
videoPlayer.cancelFullScreen();
}
function fnForward(){
videoPlayer.forward({
seconds: 5
});
}
function fnRewind(){
videoPlayer.rewind({
seconds: 5
});
}
function fnSeekTo(){
videoPlayer.seekTo({
seconds: 20
});
}
function fnSetBrightness(){
videoPlayer.setBrightness({
brightness: 50
});
}
function fnGetBrightness(){
videoPlayer.getBrightness(function( ret, err ){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnSetVolume(){
videoPlayer.setVolume({
volume: 0.6
});
}
function fnGetVolume(){
videoPlayer.getVolume(function( ret, err ){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnAddEventListener(){
videoPlayer.addEventListener({
name:'leftUp'
}, function(ret, err){
if( ret ){
alert( JSON.stringify( ret ) );
}else{
alert( JSON.stringify( err ) );
}
});
}
function fnRemoveEventListener(){
videoPlayer.removeEventListener({
name: 'leftUp'
});
}
function fnSetRect(){
videoPlayer.setRect({
rect:{
x: 0,
y: 0,
w: 'auto',
h: 'auto'
},
fullscreen: true
});
}
</script>
请先登录后发表评论
- 最新评论
- 总共0条评论
