请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
1682
帖子
10
勋章
Y币

videoPlayer模块(视频播放)demo示例

  [复制链接]
发表于 2017-8-1 14:41:12
videoPlayer 封装了视频播放功能(不支持音频播放)。可快进、快退设置播放位置等操作,亦可设置屏幕亮度和系统声音大小。通过监听接口可获取模块上的各种手势操作事件。

点击进入模块详情:http://www.apicloud.com/mod_detail?mdId=35792

点击进入完整源码和图片资源:https://**.**/apicloudcom/VideoPlayer-Example

index.html:
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  5.         <meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
  6.         <style type="text/css">
  7.             html{ background-color: white; }
  8.             header{ border-bottom: 1px solid #ccc; padding: 25px 0; }
  9.             span {
  10.                 padding: 10px 15px;
  11.                 margin: 10px;
  12.                 display: inline-block;
  13.                 background-color: #e8e8e8;
  14.             }
  15.             .hover{ opacity: .4; }
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <header>
  20.             <h1>videoPlayer</h1>
  21.             <mark>
  22.                 使用前请详细阅读 文档 使用规则
  23.             </mark>
  24.         </header>
  25.         <span tapmode="hover" onclick="fnPlay()">play</span>
  26.         <span tapmode="hover" onclick="fnOpen()">open</span>
  27.         <span tapmode="hover" onclick="fnSetPath()">setPath</span>
  28.         <span tapmode="hover" onclick="fnStart()">start</span>
  29.         <span tapmode="hover" onclick="fnPause()">pause</span>
  30.         <span tapmode="hover" onclick="fnStop()">stop</span>
  31.         <span tapmode="hover" onclick="fnClose()">close</span>
  32.         <span tapmode="hover" onclick="fnShow()">show</span>
  33.         <span tapmode="hover" onclick="fnHide()">hide</span>
  34.         <span tapmode="hover" onclick="fnFullScreen()">fullScreen</span>
  35.         <span tapmode="hover" onclick="fnCancelFullScreen()">cancelFullScreen</span>
  36.         <span tapmode="hover" onclick="fnForward()">forward</span>
  37.         <span tapmode="hover" onclick="fnRewind()">rewind</span>
  38.         <span tapmode="hover" onclick="fnSeekTo()">seekTo</span>
  39.         <span tapmode="hover" onclick="fnSetBrightness()">setBrightness</span>
  40.         <span tapmode="hover" onclick="fnGetBrightness()">getBrightness</span>
  41.         <span tapmode="hover" onclick="fnSetVolume()">setVolume</span>
  42.         <span tapmode="hover" onclick="fnGetVolume()">getVolume</span>
  43.         <span tapmode="hover" onclick="fnAddEventListener()">addEventListener</span>
  44.         <span tapmode="hover" onclick="fnRemoveEventListener()">removeEventListener</span>
  45.         <span tapmode="hover" onclick="fnSetRect()">setRect</span>

  46.     </body>
  47. </html>
  48. <script type="text/javascript">
  49.     var videoPlayer;
  50.     apiready = function() {
  51.         videoPlayer = api.require('videoPlayer');
  52.     };
  53.     function fnPlay(){
  54.         var videoPlayer = api.require('videoPlayer');
  55.         videoPlayer.play({
  56.             texts: {
  57.                 head: {
  58.                     title: '顶部文字'
  59.                 }
  60.             },
  61.             styles: {
  62.                 head: {
  63.                     bg: 'rgba(0.5,0.5,0.5,0.7)',
  64.                     height: 44,
  65.                     titleSize: 16,
  66.                     titleColor: '#fff',
  67.                     backSize: 20,
  68.                     backImg: 'widget://image/back.png',
  69.                     setSize: 20,
  70.                     setImg: 'widget://image/set.png'
  71.                 },
  72.                
  73.             },
  74.             path: 'http://resource.apicloud.com/video/apicloud3.mp4',
  75.             autoPlay:true
  76.         },function(ret, err) {
  77.              alert(JSON.stringify(ret));
  78.             if (ret) {
  79.                 alert(JSON.stringify(ret));
  80.             } else {
  81.                 alert(JSON.stringify(err));
  82.             }
  83.         });
  84.     }
  85.     function fnOpen(){
  86.         videoPlayer.open({
  87.             rect:{
  88.                 y:30,
  89.                 h:150
  90.             },
  91.             autoPlay: true,
  92.             path: 'http://resource.apicloud.com/video/apicloud3.mp4'
  93.         }, function(ret, err){        
  94.             if( ret.status ){
  95.                 alert( JSON.stringify( ret ) );
  96.             }else{
  97.                 alert( JSON.stringify( err ) );
  98.             }
  99.         });
  100.     }
  101.     function fnSetPath(){
  102.         videoPlayer.setPath({
  103.             path: 'http://resource.apicloud.com/video/apicloud3.mp4'
  104.         });
  105.     }
  106.     function fnStart(){
  107.         videoPlayer.start();
  108.     }
  109.     function fnPause(){
  110.         videoPlayer.pause();
  111.     }
  112.     function fnStop(){
  113.         videoPlayer.stop();
  114.     }
  115.     function fnClose(){
  116.         videoPlayer.close();
  117.     }
  118.     function fnShow(){
  119.         videoPlayer.show();
  120.     }
  121.     function fnHide(){
  122.         videoPlayer.hide();
  123.     }
  124.     function fnFullScreen(){
  125.         videoPlayer.fullScreen();
  126.     }
  127.     function fnCancelFullScreen(){
  128.         videoPlayer.cancelFullScreen();
  129.     }
  130.     function fnForward(){
  131.         videoPlayer.forward({
  132.             seconds: 5
  133.         });
  134.     }
  135.     function fnRewind(){
  136.         videoPlayer.rewind({
  137.             seconds: 5
  138.         });
  139.     }
  140.     function fnSeekTo(){
  141.         videoPlayer.seekTo({
  142.             seconds: 20
  143.         });
  144.     }
  145.     function fnSetBrightness(){
  146.         videoPlayer.setBrightness({
  147.             brightness: 50
  148.         });
  149.     }
  150.     function fnGetBrightness(){
  151.         videoPlayer.getBrightness(function( ret, err ){        
  152.             if( ret ){
  153.                 alert( JSON.stringify( ret ) );
  154.             }else{
  155.                 alert( JSON.stringify( err ) );
  156.             }
  157.         });
  158.     }
  159.     function fnSetVolume(){
  160.         videoPlayer.setVolume({
  161.             volume: 0.6
  162.         });
  163.     }
  164.     function fnGetVolume(){
  165.         videoPlayer.getVolume(function( ret, err ){        
  166.             if( ret ){
  167.                 alert( JSON.stringify( ret ) );
  168.             }else{
  169.                 alert( JSON.stringify( err ) );
  170.             }
  171.         });
  172.     }
  173.     function fnAddEventListener(){
  174.         videoPlayer.addEventListener({
  175.             name:'leftUp'
  176.         }, function(ret, err){        
  177.             if( ret ){
  178.                 alert( JSON.stringify( ret ) );
  179.             }else{
  180.                 alert( JSON.stringify( err ) );
  181.             }
  182.         });
  183.     }
  184.     function fnRemoveEventListener(){
  185.         videoPlayer.removeEventListener({
  186.             name: 'leftUp'
  187.         });
  188.     }
  189.     function fnSetRect(){
  190.         videoPlayer.setRect({
  191.             rect:{
  192.                 x: 0,
  193.                 y: 0,
  194.                 w: 'auto',
  195.                 h: 'auto'
  196.             },
  197.             fullscreen: true
  198.         });
  199.     }
  200. </script>
复制代码


5
帖子
0
勋章
417
Y币
支持,谢谢
5
帖子
0
勋章
199
Y币
感谢分享,学习了!!!

回帖拿金币,支持支持
5
帖子
0
勋章
17
Y币
回帖拿金币,支持支持
99
帖子
1
勋章
314
Y币
帖拿金币,支持支持
75
帖子
0
勋章
822
Y币
支持一下,拿云币
136
帖子
1
勋章
853
Y币
捡个云币
258
帖子
4
勋章
1024
Y币

回帖拿金币,支持支持
105
帖子
2
勋章
1万+
Y币
支持支持
12345678910... 12下一页
您需要登录后才可以回帖 登录

本版积分规则