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

[插件开发] videoPicture模块demo示例

[复制链接]
发表于 2020-9-24 09:48:25
本帖最后由 52yaoer 于 2020-9-24 10:08 编辑


videoPicture模块用ijkplayer封装在iOS、Android下带视频播放的轮播功能(本底层是基于ijkplayer,播放类型支持比较多,如果需要轻便的播放器底层(如:仅播放MP4)可以单独联系封装)。

点击进入模块详情

  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.         <title>Module Develop</title>
  5.         <meta charset="utf-8">
  6.         <meta name="viewport"
  7.                 content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  8.         <style type="text/css">
  9.                 html,
  10.                 body {
  11.                         height: 100%
  12.                 }

  13.                 body {
  14.                         background-color: #fff;
  15.                         margin: 0;
  16.                 }

  17.                 #wrap {
  18.                         height: 100%;
  19.                         position: relative;
  20.                 }

  21.                 #header {
  22.                         padding-top: 20px;
  23.                         background-color: #5082c2;
  24.                         height: 44px;
  25.                         position: relative;
  26.                 }

  27.                 #header h1 {
  28.                         font-size: 20px;
  29.                         height: 44px;
  30.                         line-height: 44px;
  31.                         margin: 0em;
  32.                         color: #fff;
  33.                         margin-left: 100px;
  34.                         margin-right: 100px;
  35.                         text-align: center;
  36.                 }

  37.                 #main {
  38.                         display: -webkit-box;
  39.                         -webkit-box-orient: vertical;
  40.                         -webkit-box-pack: center;
  41.                 }

  42.                 a.button {
  43.                         display: -webkit-box;
  44.                         -webkit-box-orient: vertical;
  45.                         -webkit-box-pack: center;
  46.                         -webkit-box-align: center;
  47.                         height: 32px;
  48.                         margin: 8px;
  49.                         background-color: rgba(240, 240, 240, 1.0);
  50.                         border-color: rgba(220, 220, 220, 1.0);
  51.                         border-width: 2px;
  52.                         border-style: solid;
  53.                 }

  54.                 a.active {
  55.                         background-color: rgba(240, 240, 240, 0.7);
  56.                 }
  57.         </style>
  58. </head>

  59. <body>
  60.         <div id="wrap">
  61.                 <div id="main">
  62.                         <a class="button" tapmode="active" onclick="requestPermission()">requestPermission</a>
  63.                         <a class="button" tapmode="active" onclick="openCarousel()">openCarousel</a>
  64.                         <a class="button" tapmode="active" onclick="closeCarousel()">closeCarousel</a>
  65.                         <a class="button" tapmode="active" onclick="showCarousel()">showCarousel</a>
  66.                         <a class="button" tapmode="active" onclick="hideCarousel()">hideCarousel</a>
  67.                 </div>
  68.         </div>
  69. </body>
  70. <script type="text/javascript">
  71.         var demo = null;
  72.         apiready = function () {
  73.                 demo = api.require('videoPicture');
  74.                 if (!demo) {
  75.                         alert("请添加模块后编译");
  76.                         return;
  77.                 }
  78.         }
  79.         function requestPermission() {
  80.                 api.requestPermission({
  81.                         list: ['storage', 'photos'],
  82.                 }, function (ret, err) {
  83.                         api.alert({
  84.                                 msg: JSON.stringify(ret)
  85.                         });
  86.                 });
  87.         }

  88.         function openCarousel() {
  89.                 demo.openCarousel({
  90.                         rect: {
  91.                                 x: 30,
  92.                                 y: 400,
  93.                                 w: 300,
  94.                                 h: 200,
  95.                                 fixedOn: 'index_frm', //固定在名为'index_frm'的frame上
  96.                                 //fixed:false //跟随网页滚动
  97.                         },
  98.                         data: [{
  99.                                 imageUrl: 'http://img**.**/3332-1518523974124-26',
  100.                                 type: 1,//1:视频 2:图片 如果是带视频的轮播。第一个必须是视频
  101.                                 videoUrl: 'https://v-cdn**.**.cn/123468.mp4'
  102.                         }, {
  103.                                 imageUrl: 'http://img**.**/3332-1518523974126-29',
  104.                                 type: 2,
  105.                         }, {
  106.                                 imageUrl: 'http://img**.**/3332-1518523974125-28',
  107.                                 type: 2,
  108.                         }, {
  109.                                 imageUrl: 'http://img**.**/3332-1518523974125-27',
  110.                                 type: 2,
  111.                         }, {
  112.                                 imageUrl: 'http://img**.**/3332-1518523974124-26',
  113.                                 type: 2,
  114.                         }, {
  115.                                 imageUrl: 'http://img**.**/3332-1518523974124-26',
  116.                                 type: 1,
  117.                         }]
  118.                 }, function (ret, err) {
  119.                         alert(JSON.stringify(ret));
  120.                 });
  121.         }


  122.         function closeCarousel() {
  123.                 demo.closeCarousel();
  124.         }

  125.         function showCarousel() {
  126.                 demo.showCarousel();
  127.         }

  128.         function hideCarousel() {
  129.                 demo.hideCarousel();
  130.         }
  131. </script>

  132. </html>
复制代码


您需要登录后才可以回帖 登录

本版积分规则