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

这篇具有很好参考价值的文章主要介绍了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

/**
 * 预览图片
 * @param {Array} filePath
 */
function previewImage(filePath) {
	uni.previewImage({
		urls: filePath,
		longPressActions: {
			itemList: ['发送给朋友', '保存图片', '收藏'],
			success: res => {
				console.log('选中了第' + (res.tapIndex + 1) + '个按钮,第' + (res.index + 1) +
					'张图片')
			},
			fail: err => {
				console.log(err.errMsg)
			}
		}
	})
}

module.exports = {
	previewImage,
};

欢迎交流~~文章来源地址https://www.toymoban.com/news/detail-533841.html

到了这里,关于uniapp小程序点击按钮打开图片/全屏播放视频组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包