uniapp小程序点击按钮打开图片/全屏播放视频组件

根据传入的数组list来决定打开图片还是全屏播放视频，还有横竖屏等初始预设参数

组件.vue

<template>
	<view v-if="list">
		<view class="button" @click="openMedia()">打开图片/视频</view>
		<!-- 始终竖屏播放：direction="0" -->
		<video v-show="isOpenVideo" id="myVideo" :src="list[0]" @fullscreenchange="fullscreenchange"></video>
	</view>
</template>

<script>
	const util = require(@/utils/utils.js)
	export default {
		name: "open-media",
		props: {
			list: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				isOpenVideo: false,
				videoContext: null
			};
		},
		methods: {
			openMedia() {
				if (this.list[0].indexOf(.mp4) > 0) {
					//打开视频（全屏播放）
					this.isOpenVideo = true
					this.videoContext = uni.createVideoContext(myVideo, this)
					this.videoContext.play()
					this.videoContext.requestFullScreen()
				} else {
					//打开图片
					util.previewImage(this.list)
				}
			},
			//退出全屏时停止播放
			fullscreenchange(e) {
				console.log(e)
				if (!e.detail.fullScreen) {
					this.videoContext.stop()
					this.isOpenVideo = false
				}
			}
		}
	}
</script>

<style lang="scss">
	.button {
		width: 230rpx;
		text-align: center;
		padding: 10rpx 20rpx;
		border: 1px solid #000741;
		border-radius: 50rpx;
		margin-top: 15rpx;
	}
</style>

utils.js

欢迎交流~~