apicloud apicloud

注册
查看: 10376|回复: 88

[模块教程] scrollVideo模块demo示例

版主

UID:83211

主题:
169
帖子:
9240
云币:
1995

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

[模块教程] scrollVideo模块demo示例

10376 88 | 发表于 2019-6-24 22:06:14 |阅读模式 | |
scrollVideo模块用ijkplayer封装在iOS、Android下仿抖音上下滑动播放视频功能(列表图片加载会存在延迟,可能会出现黑屏,属于正常现象,后续优化;iOS可以无限循环播放,Android没有无限循环播放功能)。


点击进入模块详情

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <title>Module Develop</title>
  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.                 <style type="text/css">
  8.                         html, body {
  9.                                 height: 100%
  10.                         }
  11.                         body {
  12.                                 background-color: #fff;
  13.                                 margin: 0;
  14.                         }
  15.                         #wrap {
  16.                                 height: 100%;
  17.                                 position: relative;
  18.                         }
  19.                         #header {
  20.                                 padding-top: 20px;
  21.                                 background-color: #5082c2;
  22.                                 height: 44px;
  23.                                 position: relative;
  24.                         }
  25.                         #header h1 {
  26.                                 font-size: 20px;
  27.                                 height: 44px;
  28.                                 line-height: 44px;
  29.                                 margin: 0em;
  30.                                 color: #fff;
  31.                                 margin-left: 100px;
  32.                                 margin-right: 100px;
  33.                                 text-align: center;
  34.                         }
  35.                         #main {
  36.                                 display: -webkit-box;
  37.                                 -webkit-box-orient: vertical;
  38.                                 -webkit-box-pack: center;
  39.                         }
  40.                         a.button {
  41.                                 display: -webkit-box;
  42.                                 -webkit-box-orient: vertical;
  43.                                 -webkit-box-pack: center;
  44.                                 -webkit-box-align: center;
  45.                                 height: 32px;
  46.                                 margin: 8px;
  47.                                 background-color: rgba(240,240,240,1.0);
  48.                                 border-color: rgba(220,220,220,1.0);
  49.                                 border-width: 2px;
  50.                                 border-style: solid;
  51.                         }
  52.                         a.active {
  53.                                 background-color: rgba(240,240,240,0.7);
  54.                         }
  55.                 </style>
  56.         </head>
  57.         <body>
  58.                 <div id="wrap">
  59.                         <div id="main">
  60.                                 <a class="button" tapmode="active" onclick="_addEventListener()" >滑动播放器监听</a>
  61.                                 <a class="button" tapmode="active" onclick="openScrollVideo()" >打开滑动播放器</a>
  62.                                 <a class="button" tapmode="active" onclick="hideScrollVideo()" >隐藏滑动播放器</a>
  63.                                 <a class="button" tapmode="active" onclick="showScrollVideo()" >显示滑动播放器</a>
  64.                                 <a class="button" tapmode="active" onclick="closeScrollVideo()" >关闭滑动播放器</a>
  65.                                 <a class="button" tapmode="active" onclick="addVideoData()" >添加一条记录</a>
  66.                                 <a class="button" tapmode="active" onclick="pause()" >暂停播放</a>
  67.                                 <a class="button" tapmode="active" onclick="play()" >暂停后继续播放</a>
  68.                                 <br>
  69.                                 <br>
  70.                                 <br>
  71.                                 <br>
  72.                                 <br>
  73.                                 <br>
  74.                                 <br>
  75.                                 <br>
  76.                                 <br>
  77.                                 <br>
  78.                                 <br>
  79.                                 <br>
  80.                                 <br>
  81.                                 <br>
  82.                                 <br>
  83.                                 <br>
  84.                                 <br>
  85.                                 <br>
  86.                                 <br>
  87.                                 <br>
  88.                                 <br>
  89.                                 <br>
  90.                                 <br>
  91.                                 <br>
  92.                                 <br>
  93.                                 <br>
  94.                                 <br>
  95.                                 <br>
  96.                                 <br>
  97.                                 <br>
  98.                         </div>
  99.                 </div>
  100.         </body>
  101.         <script type="text/javascript">
  102.                 var demo = null;
  103.                 apiready = function() {
  104.                         demo = api.require('scrollVideo');
  105.                         if (!demo) {
  106.                                 alert("请添加模块后编译");
  107.                                 return;
  108.                         }
  109.                 }
  110.                 function _addEventListener() {
  111.                         demo.addEventListener(function(ret, err) {
  112.                                 console.log(JSON.stringify(ret));
  113.                                 api.toast({
  114.                                         msg : JSON.stringify(ret)
  115.                                 });
  116.                         });
  117.                 }

  118.                 function openScrollVideo() {
  119.                         demo.openScrollVideo({
  120.                                 rect : {
  121.                                         x : 0,
  122.                                         y : 150,
  123.                                         h : 400
  124.                                 },
  125.                                 userData : [{
  126.                                         uid : new Date().getTime() + 1,
  127.                                         imageUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/bc281dfcaf750de7acd9c8e9224e237b.png',
  128.                                         videoUrl : 'http://apiclouddelimg.oss-cn-beijing.aliyuncs.com/VID_20181101_152546.mp4',
  129.                                         isLocalCache : true
  130.                                 }, {
  131.                                         uid : new Date().getTime() + 2,
  132.                                         imageUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/1a73dd6a90a52b2aad1aafefbf977e4c.png',
  133.                                         videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/00b2141bff87cfaa75498f66214aeb9e.mp4',
  134.                                         isLocalCache : true
  135.                                 }, {
  136.                                         uid : new Date().getTime() + 3,
  137.                                         imageUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/ec65083dbdc6bb18a6318591ac6c15a5.png',
  138.                                         videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/9d9906ba474152307d7edca6bd72fbe2.mp4',
  139.                                         isLocalCache : true
  140.                                 }, {
  141.                                         uid : new Date().getTime() + 4,
  142.                                         imageUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/51fc1ddde9790c96a6986b74342a15e3.png',
  143.                                         videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/dc811d2c4d88b409063c7ea2065fe6a0.mp4',
  144.                                         isLocalCache : true
  145.                                 }, {
  146.                                         uid : new Date().getTime() + 5,
  147.                                         imageUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/51fc1ddde9790c96a6986b74342a15e3.png',
  148.                                         videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/dc811d2c4d88b409063c7ea2065fe6a0.mp4',
  149.                                         isLocalCache : true
  150.                                 }],
  151.                                 backgroundColor : '',
  152.                         }, function(ret, err) {
  153.                                 alert(JSON.stringify(ret) + " " + JSON.stringify(err));
  154.                         });
  155.                 }

  156.                 function addVideoData() {
  157.                         demo.addVideoData({
  158.                                 uid : new Date().getTime() + 6,
  159.                                 imageUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/51fc1ddde9790c96a6986b74342a15e3.png',
  160.                                 videoUrl : 'http://7z2dc9.com1.z0.glb.clouddn.com/apicloud/dc811d2c4d88b409063c7ea2065fe6a0.mp4',
  161.                                 isLocalCache : true
  162.                         }, function(ret, err) {
  163.                                 alert(JSON.stringify(ret));
  164.                         });
  165.                 }

  166.                 function hideScrollVideo() {
  167.                         demo.hideScrollVideo(function(ret, err) {
  168.                                 alert(JSON.stringify(ret));
  169.                         });
  170.                 }

  171.                 function showScrollVideo() {
  172.                         demo.showScrollVideo(function(ret, err) {
  173.                                 alert(JSON.stringify(ret));
  174.                         });
  175.                 }

  176.                 function closeScrollVideo() {
  177.                         demo.closeScrollVideo(function(ret, err) {
  178.                                 alert(JSON.stringify(ret));
  179.                         });
  180.                 }

  181.                 function pause() {
  182.                         demo.pause(function(ret, err) {
  183.                                 alert(JSON.stringify(ret));
  184.                         });
  185.                 }

  186.                 function play() {
  187.                         demo.play(function(ret, err) {
  188.                                 alert(JSON.stringify(ret));
  189.                         });
  190.                 }
  191.         </script>
  192. </html>
复制代码


模块定制开发 qq: 176142998

主题:
61
帖子:
195
云币:
225
发表于 2019-8-6 15:10:26 |
单击事件 单击和切换视频都会触发 如何用于判断单击视频播放暂停?

版主

UID:83211

主题:
169
帖子:
9240
云币:
1995

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-8-6 16:54:32 |
合创网络 发表于 2019-8-6 15:10
单击事件 单击和切换视频都会触发 如何用于判断单击视频播放暂停?

滑动切换的时候不会触发单击把。。。
模块定制开发 qq: 176142998

主题:
61
帖子:
195
云币:
225
发表于 2019-8-8 11:13:42 |
52yaoer 发表于 2019-8-6 16:54
滑动切换的时候不会触发单击把。。。

会哦 会触发 onSingleTapUp和onPageSelected,如图滑动一次触发了两次,测试机型HUAWEI nova 青春版手机,安卓8.0.0

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

版主

UID:83211

主题:
169
帖子:
9240
云币:
1995

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

 楼主| 发表于 2019-8-8 12:07:39 来自手机 |
你可以各自处理逻辑。不影响的吧。

入门司机

UID:600284

主题:
99
帖子:
430
云币:
480
发表于 2019-9-5 16:06:28 |
怎么想抖音那样,视频上层有一些按钮什么,评论 点赞什么的, 用什么方法 让这些按钮 跟随 视频一起滑动。

入门司机

UID:600284

主题:
99
帖子:
430
云币:
480
发表于 2019-9-5 17:06:24 |
52yaoer 发表于 2019-8-8 12:07
你可以各自处理逻辑。不影响的吧。

怎么想抖音那样,视频上层有一些按钮什么,评论 点赞什么的, 用什么方法 让这些按钮 跟随 视频一起滑动。

主题:
21
帖子:
170
云币:
338
发表于 2019-9-5 17:54:32 |
小hao1 发表于 2019-9-5 17:06
怎么想抖音那样,视频上层有一些按钮什么,评论 点赞什么的, 用什么方法 让这些按钮 跟随 视频一起滑动 ...

最好的就是在视频上面加一层透明的frame,但是apicloud的点击  滑动事件 有很大几率的捕获不到,这个很难受,除了这样,其他方法貌似有些不可取了。

入门司机

UID:600284

主题:
99
帖子:
430
云币:
480
发表于 2019-9-5 18:10:15 |
晨曦250 发表于 2019-9-5 17:54
最好的就是在视频上面加一层透明的frame,但是apicloud的点击  滑动事件 有很大几率的捕获不到,这个很难 ...

这就很难受呢?要不然 只有自己html自己画个?

主题:
21
帖子:
170
云币:
338
发表于 2019-9-5 18:42:16 |
小hao1 发表于 2019-9-5 18:10
这就很难受呢?要不然 只有自己html自己画个?

我试了用swiper页面做一个上下滑动的循环,在里面嵌入一个播放器,然后加入各种小图标什么的,但是我试了一下,卡顿比较严重,而且事件捕获也比较差,难受。
您需要登录后才可以回帖 登录 | 立即注册

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