uniapp 播放视频

最新推荐文章于 2025-11-14 10:17:33 发布

原创最新推荐文章于 2025-11-14 10:17:33 发布 · 1w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #微信小程序

小程序专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在uView中实现视频封面点击后全屏播放视频，涉及到自定义全局弹窗、视频高度动态调整，以及视频组件与弹窗交互的设计。作者分享了代码实现，包括`show-modal`组件和`playVideo`方法，重点在于解决视频播放控制的问题。

一、问题

想要实现：视频封面点击全屏播放视频

1. 使用uView中的弹窗只能覆盖组件部分，不能全屏，所以重新封装了个挂载到全局的弹窗
2. 视频播放时，把视频高度设置为100%，根据弹窗的高度而变化
原本想着把视频封装在弹出组件中，但发现如果这样，创建视频实例，控制播放暂停不好使，所以无奈将视频通过插槽放入弹出组件中

在这里插入图片描述

二、代码实现

<!-- 视频弹窗 -->
<!-- 视频双击可暂停, 支持循环播放, 显示中间的播放暂停按钮 -->
<show-modal>
	<video 
		id="myVideo" 
		:src="videoSrc" 
		:poster="poster" 
		:show-center-play-btn="true" 
		:enable-play-gesture="true" 
		controls 
		loop 
		class="p-video">
	</video>
</show-modal>

mounted(){
	this.videoContext = uni.createVideoContext('myVideo', this)
},
methods:{
	playVideo(e){
		this.videoSrc = e.video;
		this.poster = e.covers;
		this.$showModal({
		  	success:(res)=>{
		  		if (res.cancel) {  // 点击关闭
				  this.videoContext.pause()
		  		}			
		  	}
		})
		this.$nextTick(()=>{
			this.videoContext.play()
		})
	},
},