前言

bindfullscreenchange 函数可以监听到视频进入和退出全屏时的事件，利用次函数，可以实现全屏预览和取消全屏预览的功能。

首先看下bindfullscreenchange回调的参数有哪些：

当全屏时：

{fullScreen: true, fullscreen: true, direction: "vertical"}

当取消全屏时：

{fullScreen: false, fullscreen: false, direction: "vertical"}

所以，我们就很容易判断出需要操作的状态，所以代码如下

index.wxml

<video id="video" show-fullscreen-btn="{{false}}" show-center-play-btn="{{false}}" autoplay="{{false}}" src="{{item.tempFilePath}}" bindfullscreenchange="bindfullscreenchange"></video>

index.js

bindfullscreenchange:function(event){if(!event.detail.fullScreen){// 退出全屏this.videoContext.exitFullScreen()}else{// 全屏this.videoContext = wx.createVideoContext('video');this.videoContext.requestFullScreen({direction: 0});}
}

效果

微信小程序全屏预览视屏、取消全屏预览相关推荐

微信小程序开发工具能正常请求后台数据，手机预览请求失败
微信小程序开发工具能正常请求后台数据,手机预览请求失败问题描述微信开发者工具调试完想用手机预览效果,结果发现凡是后台请求都失败. 原因分析可能的原因有三个: 微信开发者工具详情里的本地设置,没有 ...
智慧停车场微信小程序源码 | 智能停车系统源码 | 全开源
智慧停车场微信小程序源码 | 智能停车系统源码 | 全开源本停车场系统兼容市面上主流的多家相机,理论上兼容所有硬件,可灵活扩展,相机识别后数据自动上传到云端并记录,校验相机唯一id和硬件序列号,防止 ...
【微信小程序】图片选择、转码、压缩、预览、上传，file与base64
0 前言微信小程序中,上传图片,如标题,涉及图片选择.图片转码.图片压缩.图片预览.图片上传等 1 图片选择需要使用微信提供的wx.chooseMedia chooseImage() {var t ...
微信小程序学习记录——4.框架-视图层
文章目录 1.WXML 数据绑定简单绑定运算组合列表渲染 wx:for block wx:for wx:key 条件渲染 wx:if block wx:if wx:if vs hidden 模 ...
【微信小程序】基于Java+uniapp框架开发的全开源微信小程序商城系统
应用介绍基于Java+uniapp框架开发的全开源微信小程序商城系统,前端采用目前主流的uniapp框架开发,后端采用Java语言开发,前后端代码全部开源,减少重复造轮子,支持小程序商城秒杀.优惠券 ...
微信小程序在苹果手机上生成高像素海报失败白屏
微信小程序中需求,根据屏幕像素生成海报,安卓中正常, 大屏ios机型,比如 pro max,会出现生成的海报白屏,ios15,ios16版本都会,暂未找到解决方案,通过兼容处理,降低像素
微信小程序0基础快速入门(史上最全!!!)
产品定位及功能介绍微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册注册小程序帐号在微信公众平台官网首页(mp.weixin.qq ...
微信小程序文章怎么首行缩进或取消首行缩进
很多同学问酱茄小编,微信小程序怎么让文章首行缩进或取消文章首行缩进,代码参考了大神"武当山道士",表示感谢,以下代码大家仅供学习参考. 首行缩进 .wxss 代码如下: .str1 ...
基于微信小程序的长按录音、滑动取消发送功能实现~
在做微信小程序的过程中,总是会冒出那么些没接触过的功能,然后就开始各种踩坑,最近要做一个长按录音的功能,大致需求为长按录音,垂直滑动则取消发送. 废话不多说,直接上代码. 服务端在[基于avconv转 ...
【微信小程序】首行缩进、去掉/取消首行缩进
首行缩进 text-indent:2em; text的意思是文本,indent在计算机英语中意思是缩进,至于后面的2em意思就是2个相对单位: em这个单位的意思就是文字的高度,1em就是1个文字的高 ...

微信小程序全屏预览视屏、取消全屏预览

前言

效果

微信小程序全屏预览视屏、取消全屏预览相关推荐

最新文章

热门文章