|
videoPlayer模块(视频播放)demo示例
[复制链接]
videoPlayer 封装了视频播放功能(不支持音频播放)。可快进、快退设置播放位置等操作,亦可设置屏幕亮度和系统声音大小。通过监听接口可获取模块上的各种手势操作事件。
点击进入模块详情:http://www.apicloud.com/mod_detail?mdId=35792
点击进入完整源码和图片资源:https://**.**/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>
复制代码
|
|