front/components/fuyu-MixSwiper/MyVideo.vue

<template>
	<view class="myVideo_view" v-html="innerHtml" :id="id" :change:id="MyVideo.updateId" :isPlay="isPlay" :change:isPlay="MyVideo.handelPlay" ></view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => ({}),
			},
			// 添加控制播放和暂停的prop
			isPlay: {
				type: Boolean,
				default: true,
			},
		},
		computed: {
			id() {
				return this.item.id
			}
		},
		data() {
			return {
				innerHtml: '',
			};
		},
		created() {
			this.initVideoHtml();
		},
		methods: {
			isHttpOrHttps(url) {
				const regex = /^(http|https):\/\//;
				return regex.test(url);
			},
			initVideoHtml() {
				let { url } = this.item
				let bool = this.isHttpOrHttps(url)
				if(!bool) {
					url = plus.io.convertLocalFileSystemURL(url);
				}
				this.innerHtml = `<video class="swiper-video" id="Video${this.item.id}" src="${url}" width="100%" height="100%" style="object-fit: contain;" autoplay/>`;
			},
			// 通知父组件播放完成
			ended() {
				this.$emit('onEnded')
			}
		},
	};
</script>
<script module="MyVideo" lang="renderjs">
	export default {
		data() {
			return {
				id: '',
				video: null,
			}
		},
		computed: {
			videoId() {
				return 'Video' + this.id
			}
		},
		mounted() {
			this.initVideoElement()
		},
		methods: {
			initVideoElement() {
				let video = document.getElementById(this.videoId)
				this.video = video
				video.addEventListener('loadedmetadata', () => {
					this.video.play().then(res => {
						this.video.pause()
					})
				})
				video.addEventListener('ended', () => {
					this.video.pause()
					this.$ownerInstance.callMethod('ended')
				})
			},
			handelPlay(isPlay) {
				if(!this.video) return
				isPlay ? this.video.play() : this.video.pause()
			},
			updateId(id) {
				this.id = id
			},
		}
	}
</script>
<style scoped>
	.myVideo_view {
		height: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #000;
	}
</style>