apicloud apicloud

注册
查看: 9670|回复: 24

[APP开发技巧] videoPlayer模块play接口实现的播放器

管理员

UID:253705

主题:
53
帖子:
460
云币:
856

[APP开发技巧] videoPlayer模块play接口实现的播放器

9670 24 | 发表于 2018-3-3 16:37:22 |阅读模式 | |

  1. //videoPlayer模块play接口实现的播放器,确实简单,方便。附件有图标素材。跟大家分享一下。

  2. <!DOCTYPE html>
  3. <html>

  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  7.     <title>title</title>
  8.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9.     <style>
  10.         body {
  11.             padding: 60px 10px;
  12.         }
  13.     </style>
  14. </head>

  15. <body>
  16.     <button type="button" tapmode onclick="fnvideoPlayerPlay()" name="button">打开自带界面播放器</button>
  17. </body>
  18. <script type="text/javascript" src="../script/api.js"></script>
  19. <script type="text/javascript">
  20.     apiready = function() {

  21.     };

  22.     function fnvideoPlayerPlay() {
  23.         var videoPlayer = api.require('videoPlayer');
  24.         videoPlayer.play({
  25.             texts: {
  26.                 head: {
  27.                     title: ''
  28.                 }
  29.             },
  30.             styles: {
  31.                 head: {
  32.                     bg: 'rgba(0.5,0.5,0.5,0.7)',
  33.                     height: 44,
  34.                     titleSize: 20,
  35.                     titleColor: '#fff',
  36.                     backSize: 30,
  37.                     backImg: 'widget://image/videoPlayer/back.png',
  38.                     setSize: 30,
  39.                     setImg: 'widget://image/videoPlayer/more.png'
  40.                 },
  41.                 foot: {
  42.                     bg: 'rgba(0.5,0.5,0.5,0.7)',
  43.                     height: 44,
  44.                     playSize: 30,
  45.                     playImg: 'widget://image/videoPlayer/play.png',
  46.                     pauseImg: 'widget://image/videoPlayer/pause.png',
  47.                     nextSize: 0,
  48.                     nextImg: '',
  49.                     timeSize: 14,
  50.                     timeColor: '#fff',
  51.                     sliderImg: '',
  52.                     progressColor: '#696969',
  53.                     progressSelected: '#1296db',
  54.                     verticalImg: "widget://image/videoPlayer/unfullscreen.png",
  55.                     horizontalImg: "widget://image/videoPlayer/fullscreen.png"
  56.                 }
  57.             },
  58.             path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
  59.             autoPlay: true
  60.         }, function(ret, err) {
  61.             if (ret) {

  62.             } else {

  63.             }
  64.         });
  65.     }
  66. </script>

  67. </html>
复制代码
竖屏

横屏:


右上角菜单点开后的界面


2018.7.13 更新自定义界面播放器demo
https://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=107612&page=1&extra=#pid542654

videoPlayer其他分享贴:
https://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=66035

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

职业车手

UID:129114

主题:
137
帖子:
1599
云币:
3281

APICloud粉丝圣诞节我还是个孩子!不想上班!SB侠APICloud大会专属勋章足球狗

发表于 2018-3-3 17:23:59 |
可以发到分享区。

主题:
3
帖子:
16
云币:
18
发表于 2018-8-9 16:58:15 |
我想问 他界面上自带的返回按钮怎么点击的时候怎么监听到

主题:
0
帖子:
46
云币:
12
发表于 2018-8-10 08:33:14 |
学习学习

主题:
1
帖子:
10
云币:
7
发表于 2018-8-14 20:44:11 |
正好需要

主题:
3
帖子:
16
云币:
18
发表于 2018-8-15 14:38:36 |
我想问一下 这个模块播放视频的时候动态传入标题怎么在ios上显示不全 安卓上显示正常

新手上路

UID:157910

主题:
29
帖子:
110
云币:
105
发表于 2018-8-29 14:36:23 |
支持m3u8吗

主题:
0
帖子:
1
云币:
1
发表于 2018-12-5 16:06:47 |
视频地址怎能弄的呀?我是初学者。明天就要交作业了

主题:
0
帖子:
4
云币:
4
发表于 2019-1-17 16:12:09 |
求问视频开始播放之前,已经加载完毕的图怎么设置啊,类似于视频第一帧图在哪里设置?

驾校小白

UID:290240

主题:
9
帖子:
26
云币:
24
发表于 2019-3-8 09:43:30 |
支持rtmp直播流吗?
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表