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
|