首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

webview视频事件"onShowCustomView“在全屏上触发,但当我返回到小屏幕时没有listner工作

webview视频事件"onShowCustomView"是在网页中播放视频时触发的事件。当视频进入全屏模式时,该事件会被触发,通常用于响应并适配全屏播放界面的显示和交互。

然而,有时候在从全屏返回到小屏幕时,"onShowCustomView"事件的监听器(listener)可能会失效,导致无法正常处理相关事件。这可能是由于以下原因所致:

  1. 缺少对应的监听器:检查代码中是否正确注册并设置了"onShowCustomView"事件的监听器。确保监听器正常工作并且没有被其他代码屏蔽或覆盖。
  2. 生命周期管理:在从全屏返回小屏时,如果没有正确处理相关的生命周期事件,可能会导致监听器失效。在返回小屏时,需要及时释放相关资源并重新设置监听器,以确保其正常工作。
  3. 版本兼容性问题:某些低版本的浏览器或系统可能存在对"onShowCustomView"事件的支持不完整或存在bug的情况。在这种情况下,可能需要根据具体的浏览器或系统版本采用不同的解决方案或回退到其他兼容性更好的方案。

针对上述问题,以下是一些建议和推荐的解决方案:

  1. 确保正确设置监听器:在网页加载完成后,使用合适的方法注册"onShowCustomView"事件的监听器,并确保它能够正常接收事件。
  2. 合理管理生命周期事件:在从全屏返回小屏时,及时释放相关资源并重新设置监听器。可以通过监听网页的相关事件(如"onExitFullscreen")来捕获返回小屏的时机,并在此时进行必要的操作。
  3. 寻找兼容性方案:如果发现特定版本的浏览器或系统存在兼容性问题,可以尝试寻找其他解决方案或使用其他的全屏播放方案。例如,一些浏览器提供了不同的全屏API,可以尝试使用更稳定和兼容性更好的API来处理全屏播放。

关于腾讯云的相关产品,我这里为你提供一些可能适用的产品和链接:

  1. 腾讯云移动浏览器优化方案:https://cloud.tencent.com/product/mbopt
    • 该方案提供了优化移动浏览器体验的解决方案,可能包含对webview视频事件的支持和优化。

请注意,以上建议和推荐的产品只是示例,具体选择和适用性需要根据实际情况进行评估和决策。同时,建议在使用腾讯云产品时,参考官方文档和咨询腾讯云支持团队,以获取更详细和准确的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android使用WebView实现全屏切换播放网页视频功能

先放代码MainActivity.java: public class MainActivity extends Activity { private FrameLayout videoview;// 全屏视频加载...* setDefaultFontSize 设置默认的字体大小 setDefaultTextEncodingName 设置解码使用的默认编码 * setFixedFontFamily 设置固定使用的字体...= null); } /** * 全屏加键执行退出全屏方法 */ public void hideCustomView() { xwebchromeclient.onHideCustomView(...extends WebChromeClient { private Bitmap xdefaltvideo; private View xprogressvideo; @Override //播放网络视频全屏会被调用的方法...使用WebView实现全屏切换播放网页视频功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,编会及时回复大家的!

2.3K10

WebView中的视频全屏的相关操作

近期工作中,基本一直在用WebView,今天就把它整理下: WebView 顾名思义,就是放一个网页,一个看起来十分简单,可是用起来不是那么简单的控件。...首先你肯定要定义,初始化一个webview,事实上网上的样例非常多,我这里就简单的把一些WebView 中可能会用到的的非常重要的属性以及支持全屏播放视频该怎么实现的代码粘出来,直接放到项目中去即可了...setBuiltInZoomControls 设置是否支持缩放 setCacheMode 设置缓冲的模式 * setDefaultFontSize 设置默认的字体大小 setDefaultTextEncodingName 设置解码使用的默认编码...全屏显示出来,那么视频就自己主动跑到FrameLayout这里面放了。...goBack()表示返回WebView一页面 webView.goBack(); //退出全屏 quitFullScreen(); } else

1.6K20
  • WebView 的一切都在这儿

    /zh-CN/docs/Web/HTTP/Cookies Cookie 是服务器发送到用户浏览器并保存在浏览器的一块数据,它会在浏览器下一次发起请求被携带并发送到服务器。...) Fullscreen API https://developer.mozilla.org/zh-CN/docs/DOM/Using_fullscreen_mode 当H5请求全屏,会回调 WebChromeClient.onShowCustomView...方法 当H5退出全屏,会回调 WebChromeClient.onHideCustomView 方法 1.manifest 自己处理屏幕尺寸方向的变化(切换屏幕方向不重建activity) WebView...播放视频需要开启硬件加速 2.页面布局 3.处理全屏回调 4.设置全屏,切换屏幕方向 12 内存泄漏 直接 new WebView 并传入 application context 代替 XML 里面声明以防止...API 全屏显示网页 http://calefy.org/2012/06/03/fullscreen-web-page-width-fullscreen-api.html WebView实现全屏播放的一种方法

    2.1K60

    H5直播避坑指南

    同时发现真实点击必须使用触发 touchend、click、doubleclick 或 keydown 事件等标准的事件才能触发,使用Zepto封装过的tap事件并不能触发播放器的播放 2....这种接管的后果是这时的我们是没有办法控制视频的播放,也没有办法在上面浮动我们的dom元素,如弹幕,礼物这些,会完全被视频盖在下面,所以我们的目标即是解决这种系统接管的问题 3)使用伪全屏(样式全屏)...样式全屏的核心是设置video标签的宽高,使其撑满整个webview,看上去像全屏一样 但是因为视频一般都是16:9的宽高比,所以竖屏情况下不能很好的做到铺满整个屏幕 ?...而一般用户进入页面基本都是竖屏,所以我们就要考虑怎么让用户竖屏点击全屏按钮,能体验到像终端app一样自动进入横屏全屏的体验,下面有两种方案 1.在用户点击全屏时候,通过css3属性旋转屏幕 通过css...注: 之前我们发现x5插入了一段js来劫持视频全屏事件 ? 满足条件的video标签全屏都会被X5接管,另外调用webkitEnterFullscreen方法,X5也会接管播放器。

    10.9K151

    一起脱去程序的外套和内衣:微信程序架构解析

    预先额外加载一个WebView 当打开指定页面,用默认数据直接渲染,请求数据回来时局部更新 返回显示历史View 退出程序,View状态不销毁 4、程序入口 扫码进入程序 搜索程序 程序发送到桌面...视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发事件通知到逻辑层进行业务处理。...它能够快速地加载,即使弱网络环境下,能够推送相关消息, 也可以像原生应用那样添加至主屏,能够有全屏浏览的体验。...离线访问 - 通过 service workers 可以离线或者网速差的环境下工作。 类原生应用 - 使用app shell model做到原生应用般的体验。...可安装 - 允许用户保留对他们有用的应用在主屏幕,不需要通过应用商店。 容易分享 - 通过 URL 可以轻松分享应用。

    10.3K64

    H5直播避坑指南

    ,这中情况下就适合直接选中video并调用video.play来播放视频 但是这种情况下也需要webview的支持,如在手Q下可以做到直接调用,微信下因为不允许视频直接播放,则必须通过用户的真实操作来触发调用...同时发现真实点击必须使用触发touchend、click、doubleclick或 keydown 事件等标准的事件才能触发,使用Zepto封装过的tap事件并不能触发播放器的播放 2....但是因为视频一般都是16:9的宽高比,所以竖屏情况下不能很好的做到铺满整个屏幕 [1498530690853_9107_1498530690371.jpg] 而一般用户进入页面基本都是竖屏,所以我们就要考虑怎么让用户竖屏点击全屏按钮...,键盘不受控制还是竖屏显示了 如果页面不涉及与原生组件的交互,那么这种方案是一种很可行且兼容性比较好的方案 2.用户点击全屏,通过js api来控制webview旋转横屏 在手Q里,我们和终端的同学合作添加了控制...] 注: 之前我们发现x5插入了一段js来劫持视频全屏事件 [1498530867483_2399_1498530867286.png] 满足条件的video标签全屏都会被X5接管,另外调用webkitEnterFullscreen

    5.4K130

    H5 直播避坑指南

    同时发现真实点击必须使用触发 touchend、click、doubleclick 或 keydown 事件等标准的事件才能触发,使用Zepto封装过的tap事件并不能触发播放器的播放 2....这种接管的后果是这时的我们是没有办法控制视频的播放,也没有办法在上面浮动我们的dom元素,如弹幕,礼物这些,会完全被视频盖在下面,所以我们的目标即是解决这种系统接管的问题 3)使用伪全屏(样式全屏)...样式全屏的核心是设置video标签的宽高,使其撑满整个webview,看上去像全屏一样 但是因为视频一般都是16:9的宽高比,所以竖屏情况下不能很好的做到铺满整个屏幕 ?...而一般用户进入页面基本都是竖屏,所以我们就要考虑怎么让用户竖屏点击全屏按钮,能体验到像终端app一样自动进入横屏全屏的体验,下面有两种方案 1.在用户点击全屏时候,通过css3属性旋转屏幕 通过css...注: 之前我们发现x5插入了一段js来劫持视频全屏事件 ? 满足条件的video标签全屏都会被X5接管,另外调用webkitEnterFullscreen方法,X5也会接管播放器。

    2.8K90

    一起脱去程序的外套 - 微信程序架构解析

    预先额外加载一个WebView 当打开指定页面,用默认数据直接渲染,请求数据回来时局部更新 返回显示历史View 退出程序,View状态不销毁 4、程序入口 扫码进入程序 搜索程序 程序发送到桌面...视图层和逻辑层通过系统层的JSBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发事件通知到逻辑层进行业务处理。...它能够快速地加载,即使弱网络环境下,能够推送相关消息, 也可以像原生应用那样添加至主屏,能够有全屏浏览的体验。...离线访问 - 通过 service workers 可以离线或者网速差的环境下工作。 类原生应用 - 使用app shell model做到原生应用般的体验。...可安装 - 允许用户保留对他们有用的应用在主屏幕,不需要通过应用商店。 容易分享 - 通过 URL 可以轻松分享应用。

    1.8K30

    程序应用中WebView中原生组件限制问题解析

    工具,原生组件是用web组件模拟的,因此很多情况并不能很好的还原真机的表现,建议开发者使用到原生组件尽量真机上进行调试。』...因为程序视图渲染层面使用了WebView,而在Video,Map这类组件,使用WebView的WebCore渲染之后体验不佳的诟病一直存在,而且标准不一。...程序因使用原生的WebView进行渲染,而不是用修改的WebView内核(至少iOS没有这么干),而无法对web原生标签扩展。...而就我们关注的移动端iOS和Andoroid,实现一个视频播放,我们可能都会有以下几点的需求: 1、全屏处理; 2、覆盖层效果; 3、自动播放; 4、播放控制; 5、隐藏播放控件; iOS如果使用WebView...如果考虑使用touchmove 这样事件你也仅仅在手指还在屏幕的时候触发,检测滚动区域内部元素的getBoundingClientRect 同样无效。

    1.9K00

    前端-video 标签沉浸式播放解决方案

    iphone6/7/8下的表现情况 看起来比较完美,因为这几款手机分辨率都是16:9的,视频维持屏幕大小完全没有问题,接下来看一下分辨率不是16:9的机型,比较典型的就是iphoneX,面向老板开发的同学可能对适配这款机型颇有怨言...too navie,你看我们正常16:9的视频iphoneX这种18:9的屏幕是有形变的,而且市面上这么多分辨率不同的设备,如果要追求不同的手机上有最接近的用户体验这么做肯定是不行的,有人可能会提到...,因为video是最上一级的,但是两种方式例外,一个是微信把你们的域名加入白名单,这种可以Android手机的video随意放置dom元素,IOS本身没有这个限制,另一种更为通用的方式是用微信x5...同层播放模式下的效果 确实是真正意义的沉浸式播放,如果你的app里面webview用的也是x5内核那么这个页面也能在app上达到同样的效果,但是这种同层播放依然有无法解决的问题,首先这个全屏模式会重新计算宽高...,触发视口大小变化,也就是说用户视觉上会有一个视口变化的过程,其次,同层播放模式虽然没有了”全屏”按钮,但是左上角的按钮用于退出沉浸式全屏,右上角的按钮点开是分享,分享的内容不可定制,固定位当前页面的title

    2.1K40

    这个月被「视频播放」坑惨了,曝光八大坑

    2.3 视频播放的网络交互 2.4 全屏横屏播放 2.5 视频播放业务处理 2.6 视频 URL 过期处理 三、八大坑 一、video 组件使用 1.1 引入组件 当我们要使用程序...这个 controls 属性的使用大家就需要注意了,虽然官方说这个组件是控制播放/暂停按钮、播放进度、时间的,实际它是控制所有(除了 show-screen-lock-button) 看得见的功能控件的...1.3 绑定事件 从上面引入 video 组件的代码可以看出,video 组件提供了一些事件,是 video 不同操作触发不同的事件,来实现更多的交互。...当开始/继续播放触发 play 事件。 当暂停播放触发 pause 事件视频出现缓冲触发 waiting 事件。 加载进度变化时触发 progress 事件。...视频进入和退出全屏触发 screenChange。

    1.8K10

    Android 和 Webview 如何相互 sayHello(一)

    本篇为第一篇:Android 和 webview 的交互 后续一篇是:IOS 和 webview 的交互 如需获得最新的内容,可以关注微信公众号:前端吉米 移动时代 Web 的开发方式逐渐从 PC...对于 a 标签来说,如果没有用户的手动行为,你是无法触发 onclick 事件的。所以,这里可以考虑使用构造 iframe 请求来实现类 shouldOverrideUrlLoading 的请求。...当请求重定向地址,并且成功返回结果,也会触发事件 onProgressChanged: 主要是用来计算页面加载的进度,会在 onPageStarted 和 onPageFinished 之间触发多次...另外,重定向加载,也会多次触发该函数。 所以,为了得到页面真正加载完毕的 flag,我们需要仔细了解一下 301/302 ,上述对应事件触发的流程。...,弊端也不是没有,主要在于它自身业务逻辑是独立于当前对应的 Web 项目,需要在项目里面额外引入一个 sw.js。对于某些新手同学来说,上手难度还是有一点,不过影响不大。

    1.8K30

    视频H5 video最佳实践

    这时候全屏是有播放控件的,无论你有没有设置control。...: 启用同层H5播放器,就是视频全屏的时候,div可以呈现在视频,也是WeChat安卓版特有的属性。...值得一提的是经测现在ios10后版本的safari和微信都不让视频自动播放了(顺带音频也不能自动播放了),微信提供了一个事件WeixinJSBridgeReady,微信嵌入webview全局的这个事件触发后...移动端有一些坑需要注意,不要轻易使用媒体元素的除ended,timeupdate以外event事件不同的机子可能有不同的情况产生,例如:ios下监听canplay和canplaythrough(...是否已缓冲了足够的数据可以流畅播放),当加载是不会触发的,即使preload="auto"也没用,但在pc的chrome调试器下和android下,是会在加载阶段就触发

    4.5K30

    直播全流程探索

    比如一段滑雪的视频,连续的帧其实大部分内容都是相同的,滑雪的同学是向前位移的,实际是雪景向后位移,P 帧通过参考帧(I 或其他 P 帧)就可以进行编码了,编码之后的大小非常,压缩比非常高。...(2)自适应全屏 由于视频大小不一,屏幕高宽度固定的情况下,让视频自适应屏幕很关键。 具体步骤: ?...判断直播状态即直播是否进行也是一个比较麻烦的事,由于android对canplay canplaythrough playing事件支持程度不一样,触发时机也不尽相同,我们可以用一些hack技术,...调用全屏 ?...pc部分 点播功能已经灰度,H5基础新增/音量控制/自定义全屏ui/清晰度切换,直播正在接入中。

    5.4K80

    解读程序最新开发能力,官方只说了部分

    理论能转换,需要做很多额外的事情,而且转换出来的内容只能做展示,没法绑定任何事件,这比自己转化成程序别的标签还更不灵活(举个例子,如果需要做到“点击图片就预览图片”,那这个组件是做不到的)。...这里好想吐槽,如果是直接用webview来放一个网页来承载富文本,把富文本处理的事情(例如样式的编辑)交给web侧去做,而不是让开发者程序内折腾,这样该多好。...vConsole 的打开关闭 新增 API setKeepScreenOn 允许程序设置屏幕保持常亮 解读: createSelectorQuery,这货有点牛逼,有点像JQ的$了,当然,并没有$.../> 支持视频拖动增加 icon 提示 更新 组件 Android 下切换成原生播放器 解读: 官方发文没有视频组件强化的描述,花叔觉得这里必须提一下,毕竟也是很有用的优化:...首先,让视频可动态切换全屏或非全屏状态,这个可以实现很多比以往要好的体验,例如点击页面某个按钮就直接全屏播放某个视频,又或者是首次进入程序时马上就全屏播放一个引导视频,等视频播放完再切换到落地页 其次

    1.4K70

    Android爬坑之旅:软键盘挡住输入框问题的终极解决方案

    ↑↑↑ OK,这只是入门,基本上地球所有的Android工程师都能搞定。 别急,看下面~ 加上WebView试试看?坑来了…… 上面的入门篇中,软键盘是由原生的EditText触发弹出的。...填坑姿势 总有些时候,是需要全屏模式跟WebView兼得的,这时候,躲坑就不行了,我们需要一个新的填坑的姿势。幸好,开发者的智慧是无穷的,这个坑出现了这么多年,还是有人找到了一些解决方案的。...来自我厂App的某个使用WebView全屏模式Activity页面,从左到右分别是:没有软键盘的样式、软键盘挡住输入框的效果、以及使用AndroidBug5497Workaround之后的最终效果。...——『软键盘弹出』,则是会触发这个事件的一个源。 (软键盘弹出会使GlobalLayout发生变化) 也就是说,现在能监听到『软键盘弹出』的事件了。...,是目前视觉效果能看到的界面高度。

    4.7K20

    网页全屏模式轻松掌握

    MDN介绍: 使用提供的API,让一个元素与其子元素,可以占据整个屏幕,并在此期间,从屏幕隐藏所有的浏览器用户界面以及其他应用。...无法进入全屏触发: document.fullscreenerror 浏览器前缀: 目前并不是所有的浏览器都实现了API的无前缀版本,所以我们需要针对不同浏览器,做一下API的兼容: 这是我demo...全屏请求必须在事件处理函数(点击事件等)中调用,否则将会被拒绝。 demo中有演示,初始化直接全屏,会触发进入全屏失败回调。 3....进入全屏/离开全屏触发事件:document.fullscreenchange 当我们进入全屏和离开全屏的时候,都会触发一个fullscreenchange事件。...比如全屏请求不是事件处理函数中调用,会在这里拦截到错误 /** * @description: 浏览器无法进入全屏触发 * @param {Function} enterErrorFn 回调

    2.9K30

    Open Measurement -Android SDK

    通常,“印象”的定义是广告呈现中使用的,因此,当您要调度事件,很可能会出现这种情况。该事件仅应调度一次,并且尝试多次触发它是一个错误。...请注意,您停止会话后,尝试重新启动它或在完成的会话触发印象是错误的。 请注意,结束OMID广告会话会将消息发送到集成提供的Web视图内运行的验证脚本。...请参阅WebView显示的这一部分。 5.开始会议 开始会话尚未触发印象-它只是为跟踪做好准备。调度任何事件之前启动会话很重要。...通常,“印象”的定义是广告呈现中使用的,因此,当您要调度事件,很可能会出现这种情况。该事件仅应调度一次,并且尝试多次触发它是一个错误。请注意,仅应在开始会话后执行此操作。...请注意,您停止会话后,尝试重新启动它或在完成的会话触发印象是错误的。 adSession.finish(); adSession = null; 本机视频  请按照以下说明正确跟踪本地视频广告。

    3.7K20

    使用Aliplayer微信中播放视频的正确姿势

    同层播放 X5浏览器为了解决覆盖DOM元素的问题,提出了一个同层播放的概念,通俗一点讲就是视频播放还是要弹出全屏的,但是视频可以不覆盖DOM元素,可以和视频同一层,虽然这方案有点别扭,总算解决了覆盖...Aliplayer也会触发全屏事件,在这里调用取消全屏方法。...注:播放器以后会实现这个逻辑 2.用户点击Controlbar全屏按钮,这个时候也会触发全屏事件,在这里可以调整视频为居中显示。...上面两种情况的处理有点不一样的 视频居中的样式 退出全屏恢复视频顶部播放 退出全屏的时候会出发事件事件里移除居中的样式 直播全屏播放 直播场景下会把视频充满整个屏幕,在上面显示评论、点赞、主播和观众信息等...弹出全屏播放的处理 点击播放按钮开始播放,微信劫持视频弹出全屏播放,这时候Aliplayer也会触发全屏事件,在这里调用取消全屏方法,并且调整评论、点赞等的布局。

    10010
    领券