front-end/hdApp/src/admin/notice/warning.vue

<template>
	<view>
		<view class="warning-page">
			<view class="video-wrap">
				<video
					id="myVideo"
					show-mute-btn="true"
					:src="videoUrl"
					object-fit="contain"
					class="warning-video"
				></video>
			</view>
			<view class="btn-wrap">
				<button class="admin-button-com big blue back-btn" @click="goBack">返回</button>
			</view>
		</view>
	</view>
</template>
<script>
/**
 * 花店端警示说明视频页；续费成功等场景跳转播放平台通知视频。
 */
import { APIHOST } from '@/config'

export default {
	name: 'noticeWarning',
	data() {
		return {
			videoUrl: ''
		}
	},
	methods: {
		// globalMixins onLoad 会调用 init，此处加载并自动播放警示视频
		init() {
			this.videoUrl = APIHOST + '/jc/warning.mp4'
			this.videoContext = uni.createVideoContext('myVideo', this)
			this.videoContext.play()
		},
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>
<style lang="scss" scoped>
.warning-page {
	padding: 40upx 20upx;
	width: 95vw;
	font-size: 36upx;
}

.video-wrap {
	margin-top: 20upx;
}

.warning-video {
	width: 700upx;
	height: 1100upx;
}

.btn-wrap {
	margin-top: 40upx;
	text-align: center;
}

.back-btn {
	width: 200upx;
}
</style>