1 line
6.1 KiB
Plaintext
1 line
6.1 KiB
Plaintext
{"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;"} |