shop_app/components/videoDialog/index.vue

<template>
	<up-overlay :show="show" :z-index="1500" :custom-style="customStyle" :overlay-style="overlayStyle">
		<view class="BBox">
			
			<view style="width: 100%;height: calc(100vh - 120px);">
			    <DomVideoPlayer
			        ref="domVideoPlayer"
			        object-fit="contain"
			        :controls="true"
			        :autoplay="true"
			        :loop="true"
			        :src="url" />
			</view>
			
			<view class="close" @click="close">
				<up-icon name="close" color="#ddd" size="30" />
			</view>
		</view>
	</up-overlay>
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import DomVideoPlayer from '@/components/DomVideoPlayer/index.vue'
	
	export default {
		components: { DomVideoPlayer },
		props: {
			show: {
				type: Boolean,
				default: false
			},
			url: {
				type: String
			}
		},
		setup(props, context) {
			const data = reactive({
				url: '',
				show: false,
				customStyle: {},
				overlayStyle: {
					background: '#000',
					height: '100vh',
					width: '100%'
				},
				playing: false,
				duration: 0,
				currentTime: 0,
				playbackRate: 1
			})
			
			const close = () => {
				data.show = false
				context.emit('close')
			}
			
			const onPlay = () => {
				
				data.playing = true
			}
			
			const onPause = () => {
			  data.playing = false
			}
			
			const onEnded = () => {
			  data.playing = false
			}
			
			const onDurationChange = (e) => {
			  console.log('onDurationChange', e)
			  data.duration = e
			}
			
			const onTimeUpdate = (e) => {
			  data.currentTime = e
			}
			
			const onRateChange = (e) => {
			  console.log('onRateChange', e)
			  data.playbackRate = e
			}
			
			watch(props, async (newProps) => {
				if (newProps.show) {
					data.show = true
					data.url = newProps.url
				}
			})
			
			return {
				...toRefs(data),
				close,
				onPlay,
				onPause,
				onEnded,
				onDurationChange,
				onTimeUpdate,
				onRateChange,
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.BBox{
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 60px 0 0;
		background-color: #000;
		
		.video{
			width: 100%;
			height: calc(100vh - 120px);
		}
		.close{
			width: 50px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
		}
	}
</style>