一、问题

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

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()})},
},

uniapp 播放视频相关推荐

uniapp播放视频截图(APP可以用，小程序勿进)
uniapp播放视频截图前言思路实现尾巴前言最近用uniapp在做一个播放视频截图的功能,第一个当然想到了video组件.可是翻遍这货竟然没有支持截图的API.一番操作下来,用uniapp ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
使用uni-app组件播放视频
目录一.简介二.前后端框架前端框架后端框架三.视频播放四.nginx部署 nginx命令五.后端打包六.代码地址一.简介想做一个简单的视频播放器,能够在局域网播放硬盘上的视频. 如 ...
uniapp使用video标签无法播放视频出现黑屏问题处理
uniapp使用video标签无法播放视频出现黑屏问题处理问题出现情况并且点击播放后出现报错解决办法问题出现的原因可能是video的视频流不兼容或者在f12下无法看见视频文件导致的,所有我们使 ...
uniapp播放本地视频，循环播放第二遍会显示加载图标
uniapp播放本地视频,循环播放第二遍会显示加载图标解决:将加载图标替换成一张纯透明的图片(我感觉这个方法有点捞,有更好的方法可以留言)本方法适用离线打包,因为替换图片要修改uniapp的依赖包 ...
uniapp小视频项目：滑动播放视频
文章目录 1.监听视频滑动 2.播放和暂停 3.增加播放.暂停视频功能 4.增加双击点赞 5.控制首个视频自动播 6.动态渲染视频信息 1.监听视频滑动给 swiper 增加 @change=&qu ...
uniapp下载视频文件到手机相册
uniapp下载视频文件到手机相册 uni.downloadFile 下载文件,uni.saveFile保存文件,uni.openDocument打开文件,下载的是图片时可以自动保存,但下载视频只能播 ...
sync-player：使用websocket实现异地同步播放视频
本文作者:星空无限原文链接:https://liyangzone.com/2020/09/20/%E5%89%8D%E7%AB%AF/sync-player/ GoEasy已获作者授权转载,GoEa ...
uniapp实现视频上下滑动功能
思路主要是用到uniapp官网的swiper组件然后再嵌套一个video组件,下面是我的实现效果: 问题当我使用官方的autoplay属性实现自动播放,会导致我切换下一个视频的时候出现声音播放还 ...

uniapp 播放视频

一、问题

二、代码实现

uniapp 播放视频相关推荐

最新文章

热门文章