已解决 微信小程序uniapp使用video的时候全屏方法@fullscreenchange会执行两次

这篇具有很好参考价值的文章主要介绍了已解决 微信小程序uniapp使用video的时候全屏方法@fullscreenchange会执行两次。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

原因:fullscreenchange事件会在进入全屏和退出全屏时各触发一次。所以全屏切换期间会触发两次该事件。

解决方案:

 

js

Copy code文章来源地址https://www.toymoban.com/news/detail-724450.html

  1. 在监听fullscreenchange事件时,使用变量进行防抖处理。比如设置一个变量来记录上一次的全屏状态,只有当状态真正发生改变时才执行处理逻辑。
    		fullScreen(e) {
    				let lastFullscreen = false;
    				const isFullscreen = e.detail.fullScreen
    				console.log('lastFullscreen:', lastFullscreen, isFullscreen)
    				if (isFullscreen !== lastFullscreen && lastFullscreen == true) {
    					// 状态改变,执行处理逻辑
    					if (!isFullscreen) {
    						lastFullscreen = false;
    						console.log('lastFullscreen:', lastFullscreen, isFullscreen)
    						this.videoContext.requestFullScreen();
    					} else {
    						lastFullscreen = true;
    						console.log('lastFullscreen:', lastFullscreen, isFullscreen)
    						this.videoContext.exitFullScreen();
    					}
    
    				}
    			},
  2. 使用setTimeout及清除定时器的方式防抖,只在fullscreen状态稳定后的一次事件中处理。
  3. 在微任务队列中处理事件回调,这样可以合并连续的fullscreenchange事件。
  4. 根据全屏切换的场景,通过代码直接控制只监听必要的全屏事件。比如只在视频全屏时才监听。

到了这里,关于已解决 微信小程序uniapp使用video的时候全屏方法@fullscreenchange会执行两次的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 原生微信小程序/uniapp使用空格占位符无效解决方法

    最近碰到一个需求,在一个 text 文本中的前后添加 空格占位符 ,总所周知,我并不会前端,于是我查看了原生微信小程序以及uniapp官方文档,得到了以下答案: 原生微信小程序官方文档 uniapp官方文档 从文档可以知道我们可以用 nbsp; , ensp; , emsp; 等等作为占位符实现空格效果

    2024年02月03日
    浏览(62)
  • 微信小程序导入js使用时候报错

    我是引入weapp库时候,导入js会报错。 需要在小程序开发工具里面配置   就可以了。   推广一下自己开发的微信小程序,有兴趣的朋友可以玩一玩

    2024年02月06日
    浏览(30)
  • 解决微信小程序 自定义tabBar 首次切换时候闪烁问题(实测)

    按照官方自定义tabBar: 配置信息 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。 我的示例: 添加 tabBar 代码文件 在代码根目录下添加入口文件 custom-tab-bar :必须与pages在同

    2024年02月14日
    浏览(27)
  • 微信小程序、uniapp使用touchstart和touchmove左右滑动删除。以及解决上下抖动问题。

    展示效果图直接上代码 如果要修改里面内容直接从content这个类修改就行。 直接复制粘贴就行。拿上直接用。 如果遇到滑动会导致上下抖动用这个解决。给最外层得一个view标签加一个样式。 这样的话滑动会有阴影,但不会抖动,可以尝试一下看看,如果哪位能人能解决,就

    2024年02月11日
    浏览(104)
  • uniapp微信小程序 页面返回使用navigateBack,返回后页面不刷新问题解决方案

    尝试了众多方法,比如vuex,本地缓存,都不行 1,如果是页面之间的跳转 可以使用onShow生命周期请求数据 2,组件之间的跳转,使用redirectTo,通过关闭当前页面,跳转到指定页面再加载,这种适合二级页面到三级页面数据不更新问题 3,当一级页面使用了某个组件,组件内跳转

    2024年02月15日
    浏览(40)
  • h5使用video标签解决自动全屏问题

    问题描述: h5页面内使用video标签播放视频,会自动全屏;且不能自动播放的问题 两种情况: 一、普通浏览器内 1 解决全屏播放的问题方案: 标签内添加属性:     webkit-playsinline=\\\"true\\\"      x-webkit-airplay=\\\"true\\\"     playsInline={true}     x5-playsinline=\\\"true\\\"     x5-video-orientation=

    2024年02月06日
    浏览(33)
  • 微信小程序使用editor富文本编辑器 以及回显 全屏弹窗的模式

      以上是富文本的值返回接收的地方 下面是富文本的html 记录一下使用方法 也可以参考一下怎么使用

    2024年02月12日
    浏览(44)
  • uniapp/微信小程序解决echarts层次问题

    1.由于原生的canvas组件高于其他组件 2.这样设置z-index没有用 3.大部门解决办法是将echarts转化成图片 看了微信小程序官方文档,官方提供了一种cover-view标签来覆盖canvas、video等层级过高问题   所以本次使用cover-view来解决层级问题一下 以下是代码实现: cover-view class=\\\"customerb

    2024年02月09日
    浏览(24)
  • uniapp打包微信小程序,包过大解决

    微信小程序每个分包的大小是2M,总体积一共不能超过20M。 字节小程序每个分包的大小是2M,总体积一共不能超过16M(字节小程序基础库 1.88.0 及以上版本开始支持,字节小程序开发者工具请使用大于等于 2.0.6 且小于 3.0.0 的版本)。 在对应平台的配置下添加 \\\"optimization\\\":{\\\"su

    2024年02月08日
    浏览(47)
  • 微信小程序uniapp出现白屏怎么解决(总集)

    我本人遇到这种问题一般都很快解决了,所以没有怎么留意,没有凡尔赛自夸,不是自己厉害,只是比较细心。最近有小伙伴反馈白屏,突然想到这种情况有很多种,想做个集合,有朋友遇到解决不了的,请留言,我尽可能解决并留在此处。 最重要的!!! 如果你的电脑配

    2024年01月19日
    浏览(38)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包