{"version":3,"file":"su-video.js","sources":["../../../../../../src/sheep/ui/su-video/su-video.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS12aWRlby9zdS12aWRlby52dWU"],"sourcesContent":["<template>\r\n  <view class=\"ui-video-wrap\">\r\n    <video\r\n      :id=\"`sVideo${uid}`\"\r\n      class=\"radius\"\r\n      :style=\"[{ height: height + 'rpx' }]\"\r\n      :src=\"src\"\r\n      controls\r\n      object-fit=\"contain\"\r\n      :enable-progress-gesture=\"state.enableProgressGesture\"\r\n      :initial-time=\"initialTime\"\r\n      x5-video-player-type=\"h5\"\r\n      x-webkit-airplay=\"allow\"\r\n      webkit-playsinline=\"true\"\r\n      @error=\"videoErrorCallback\"\r\n      @timeupdate=\"timeupdate\"\r\n      @play=\"play\"\r\n      @pause=\"pause\"\r\n      @ended=\"end\"\r\n      :poster=\"poster\"\r\n      :autoplay=\"autoplay\"\r\n    >\r\n      <!-- #ifdef APP-PLUS -->\r\n      <cover-view :style=\"{ transform: 'translateX(' + moveX + 'px)' }\" />\r\n      <!-- #endif -->\r\n    </video>\r\n  </view>\r\n</template>\r\n<script setup>\r\n/**\r\n * 视频组件\r\n *\r\n * @property {Number} uid = 0 \t\t\t\t\t\t- 当前轮播下标,还用来标记视频Id\r\n * @property {Number} moveX = 0 \t\t\t\t\t- app端轮播滑动距离\r\n * @property {String} height = 300 \t\t\t\t\t- 高度（rpx)\r\n * @property {String} width = 750 \t\t\t\t\t- 宽度（rpx)\r\n * @property {Number} initialTime = 0 \t\t\t\t- 指定视频播放位置\r\n * @property {String} videoSize\t\t\t\t\t\t- 视频大小\r\n * @property {String} src \t\t\t\t\t\t\t- 视频播放地址\r\n * @property {String} poster \t\t\t\t\t\t- 视频封面\r\n *\r\n *\r\n */\r\n\r\nimport { reactive, nextTick, getCurrentInstance } from 'vue'\r\nimport sheep from '@/sheep'\r\nconst vm = getCurrentInstance()\r\n\r\n// 数据\r\nconst state = reactive({\r\n  // #ifdef APP-PLUS\r\n  enableProgressGesture: true, // 手势滑动\r\n  // #endif\r\n  // #ifndef APP-PLUS\r\n  enableProgressGesture: false, // 手势滑动\r\n  // #endif\r\n  showModal: false, // 弹框\r\n})\r\n\r\n// 接收参数\r\nconst props = defineProps({\r\n  moveX: {\r\n    type: [Number],\r\n    default: 0,\r\n  },\r\n  // 下标索引\r\n  uid: {\r\n    type: [Number, String],\r\n    default: 0,\r\n  },\r\n  // 视频高度\r\n  height: {\r\n    type: Number,\r\n    default: 300,\r\n  },\r\n  // 视频宽度\r\n  width: {\r\n    type: Number,\r\n    default: 750,\r\n  },\r\n  // 指定视频初始播放位置，单位为秒（s）\r\n  initialTime: {\r\n    type: Number,\r\n    default: 1,\r\n  },\r\n  src: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  poster: {\r\n    type: String,\r\n    default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',\r\n  },\r\n  autoplay: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n})\r\n\r\n// 事件\r\nconst emits = defineEmits(['videoTimeupdate'])\r\n\r\n// 播放进度变化时触发,播放进度传给父组件\r\nconst timeupdate = (e) => {\r\n  emits('videoTimeupdate', e)\r\n}\r\nconst videoErrorCallback = (e) => {\r\n  console.log('视频错误信息:', e.target.errMsg)\r\n}\r\n// 当开始/继续播放时触发play事件\r\nconst play = () => {\r\n  console.log('视频开始')\r\n}\r\n// 当暂停播放时触发 pause 事件\r\nconst pause = () => {\r\n  console.log('视频暂停')\r\n}\r\n// 视频结束触发end 时间\r\nconst end = () => {\r\n  console.log('视频结束')\r\n}\r\n// 开始播放\r\nconst startPlay = () => {\r\n  nextTick(() => {\r\n    const video = uni.createVideoContext(`sVideo${props.index}`, vm)\r\n    video.play()\r\n  })\r\n}\r\n\r\n// 暂停播放\r\nconst pausePlay = () => {\r\n  const video = uni.createVideoContext(`sVideo${props.index}`, vm)\r\n  video.pause()\r\n}\r\n\r\n// 播放前拦截\r\nconst beforePlay = () => {\r\n  uni.getNetworkType({\r\n    success: (res) => {\r\n      const networkType = res.networkType\r\n      // if (networkType === 'wifi' || networkType === 'ethernet') {\r\n      //   startPlay();\r\n      // } else {\r\n      //   uni.showModal({\r\n      //     title: '提示',\r\n      //     content: `当前为移动网络，播放视频需消耗手机流量，是否继续播放？${networkType}`,\r\n      //     success: (res) => {\r\n      //       if (res.confirm) {\r\n      //         startPlay();\r\n      //       } else {\r\n      //         state.isplay = false;\r\n      //       }\r\n      //     },\r\n      //   });\r\n      //   sheep.$helper.toast('正在消耗流量播放');\r\n      //   startPlay();\r\n      // }\r\n      startPlay()\r\n    },\r\n  })\r\n}\r\n\r\n// 抛出方法供父组件调用\r\ndefineExpose({\r\n  pausePlay,\r\n})\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n \r\n.radius {\r\n  width: 100%;\r\n}\r\n.ui-video-wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  .poster-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    .poster-image {\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    .play-icon {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      width: 80rpx;\r\n      height: 80rpx;\r\n      background-color: rgba($color: #000000, $alpha: 0.1);\r\n      border-radius: 50%;\r\n      transform: translate(-50%, -50%);\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/ui/su-video/su-video.vue'\nwx.createComponent(Component)"],"names":["getCurrentInstance","reactive","uni"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAM,KAAKA,cAAAA,mBAAoB;AAG/B,UAAM,QAAQC,cAAAA,SAAS;AAAA,MAKrB,uBAAuB;AAAA;AAAA,MAEvB,WAAW;AAAA;AAAA,IACb,CAAC;AAGD,UAAM,QAAQ;AAwCd,UAAM,QAAQ;AAGd,UAAM,aAAa,CAAC,MAAM;AACxB,YAAM,mBAAmB,CAAC;AAAA,IAC5B;AACA,UAAM,qBAAqB,CAAC,MAAM;AAChC,cAAQ,IAAI,WAAW,EAAE,OAAO,MAAM;AAAA,IACxC;AAEA,UAAM,OAAO,MAAM;AACjB,cAAQ,IAAI,MAAM;AAAA,IACpB;AAEA,UAAM,QAAQ,MAAM;AAClB,cAAQ,IAAI,MAAM;AAAA,IACpB;AAEA,UAAM,MAAM,MAAM;AAChB,cAAQ,IAAI,MAAM;AAAA,IACpB;AAUA,UAAM,YAAY,MAAM;AACtB,YAAM,QAAQC,cAAG,MAAC,mBAAmB,SAAS,MAAM,KAAK,IAAI,EAAE;AAC/D,YAAM,MAAO;AAAA,IACf;AA8BA,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;ACpKD,GAAG,gBAAgB,SAAS;"}