h5 video在微信中 全屏播放 退出后的坑

最新推荐文章于 2022-04-15 11:06:12 发布
最新推荐文章于 2022-04-15 11:06:12 发布
阅读量2.7k 收藏
点赞数
文章标签： h5 video 微信播放 全屏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43139068/article/details/90755735
版权

第一次做移动端的视频播放，遇到了很多bug。
1、video标签中的object-fit: 的属性设置不能为cover。否则会出现以下问题：
播放前：在这里插入图片描述
点击播放 > 全屏 > 退出全屏后，整个视频页面浮动了起来，左侧能看出明显的问题：
在这里插入图片描述
代码如下：
在这里插入图片描述
在这里插入图片描述

webview 加载h5页面video全屏后退出滚动状态被修改的问题
lengwoshang2602的博客
01-02 1988
webview中，我有加载了个h5,h5页面加载了一个DIV，这个DIV里面的内容是可以滚动的，我放了一系列的video标签，当我下拉到某个VIDEO，然后点击全频播放，在退出全屏播放的时候，我之前的滚动自动回到顶端了，请问这个问题怎么处理？谢谢 经过测试，是在点击全屏后，SCROLL就变到顶端了， 布局样式：              android:id="@+id/videofram
微信H5视频/VIDEO/全屏/不全屏/自动播放等相关问题
不懂小彬的博客
12-28 3万+
做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步，自动全屏，不能全屏，不能自动播放，Android，IOS，巴拉巴拉……多到令人发指！今天整理了一下相关的解决办法，以上并不是全部解决了，但是起码能打个60分…… 第一步:设置 x5­video­player­type 启用Ｈ5同层播放器通过video属性“x5­video­player­type”声明启用同层H5播放器 x5­v
h5微信浏览器里退出视频全屏模式
qq_37942845的博客
01-28 2777
手里有个项目，微信端，有需要视频播放。 退出全屏视频： var myVideo = document.getElementById('video'); myVideo.addEventListener('ended', function () { this.webkitExitFullScreen(); }); 亲测有效，完美解决。...
H5视频退出全屏事件
zhangqiang
11-23 2019
移动端视频默认全屏播放，用户可点击视频自带退出全屏按钮来退出全屏。当我们想在用户点击退出全屏时，顺便关闭视频，这时就要用到监听视频退出全屏事件。 实例： <div id="ctn" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 10;"> &...
视频H5のVideo标签在微信里的坑和技巧
测试
01-11 520
随着 4G 的普遍以及 WiFi 的广泛使用，手机上的网速已经足够稳定和高速，以视频为主的 HTML5 也越来越普遍了，相比帧动画，视频的表现更加丰富，前段时间开发了一个以视频为主的移动端 HTML5，在这里介绍一些实践经验。统一播放效果我们希望视频播放时可以全屏播放，没有进度条、播放按钮等与系统相关的元素，可以在视频上方增加自定义的元素（比如一个跳过按钮），类型下面的效果：在不同的操作系统（主要...
vue版本的h5页面悬浮按钮，微信小程序跳转到h5页面显示一个可来回拖动的悬浮按钮，点击h5页面的悬浮按钮返回微信小程序
04-26 1750
pc端演示没有悬浮按钮： 小程序端演示有悬浮按钮： 微信小程序跳转 H5 页面之后，如果你在 H5 页面内部跳来跳去，顶部返回按钮也只是一步步返回你 H5 访问历史记录，没有什么方式能一步返回小程序的，所以这边添加了一个悬浮按钮，只在小程序环境下显示，为的就是不管你在 H5 页面操作了多少步，都能一步返回你的小程序 <div class="hover-div" :clas...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
11-21
然而，在实际开发过程中，尤其在移动设备上，尤其是在微信内置浏览器中，可能会遇到一些特定的问题，如自动全屏播放、横竖屏切换导致的样式错乱等。 在微信环境中，由于它使用了不同的渲染引擎（如腾讯自家的 X5 ...
微信网页全屏播放自动播放问题
Rings_G的博客
02-02 5262
video视屏播放在微信网页中的全屏自动播放一直是个很头疼的问提 1.自动播放问题 Android中是无法自动播放了，只能做用户引导页喽，微信app内核webkit版本低不支持 IOS中 加autoplay并且在onload事件之后调用一次play() id="Movies" src="./cdnfile/in.mp4" x5-playsinline="" x5-video-playe
微信小程序video全屏适配
最新发布
12-29
### 微信小程序 `video` 组件全屏适配解决方案 #### 设置视图容器尺寸 对于微信小程序中的 `<video>` 组件，直接设置其父级 `view` 容器的宽度和高度可能不会对其产生预期效果。为了使视频能够正确响应这些样式...
H5视频播放踩坑记录
端着木鱼敲代码的专栏
02-19 835
场景 某H5页面，页面由图片组成，其中某张图片点击后将全屏播放视频(其中视频定位到非可视区域)。视频播放组件采用的第三方库video-react 问题 app webview下安卓视频无法播放、ios需要点击两次才播放，微信环境下全屏播放问题 1.居然是样式 首先测试的时候pc浏览器以及手机浏览器环境下测试都是ok，所以初步判断问题出在webview上，通过debug，打印点击事件以及相关视频的信...
HTML5 video进入全屏和退出全屏的实现方法
11-19
当我们使用video标签的时候，有时候因为更多的需要，我们要自己自定义控制栏，而进入和退出全屏也是其中的一部分 不同的浏览器有不同的实现方法 // Webkit element.webkitRequestFullScreen();//进入全屏 document.webkitCancelFullScreen();//退出全屏 // Firefox element.mozRequestFullScreen(); document.mozCancelFullScreen(); // W3C element.requestFullscreen(); document.exitFullscreen()
android webview: 视频全屏播放按返回页面被放大的问题
天使
08-02 4136
视频全屏播放按返回页面被放大（部分手机出现），放大原因没有找到，只能寻求补救措施， 重载 WebViewClient 的 onScaleChanged 方法，比如： @Override public void onScaleChanged(WebView view, float oldScale, float newScale) { if (DebugLog.isDebug)
微信小程序 video 横屏全屏播放完成 改变 小程序 方向
xjh的博客
04-15 4478
列表页面是竖屏，点击列表跳转的视频播放页面，播放完成时回退的列表页，发现小程序的方向变成了横屏，再次进入小程序又变成了竖屏。 此问题只在安卓手机上发现，iOS为发现 解决方法 在 onShow 方法中使用 wx.setPageOrientation({ orientation: 'portrait' }); 给当前页面在设置一次屏幕方向，发现还有一部分手机有问题。 增加了100毫秒的延时就可以了 orientation 可以取值以下 portrait 竖向 landscape 横向 auto
H5 video播放视频，微信内小窗播放
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
09-23 2162
腾讯对微信尤其是安卓版本的内置浏览器内核做了一点点小处理，在X5内核下，播放会强制全屏，如果需要进行边视频边互动下则无法实现。 无论使用百度或者是科学上网google都没有解决办法，就连腾讯开发者论坛内相关帖子也都做了删除处理。 后面发现，如果要实现小窗播放，只需要把video转化为html5模式，转化方法如下。 <videostyle="object-fit:fill"preloa...
video标签点击播放时直接全屏显示，播放完成后变成之前的样子
sdaulee的博客
10-27 6063
video的两个事件play 和 ended 全屏显示，参考了 版权声明：本文为CSDN博主「CurryChou777」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/m0_37727560/article/details/106024057 最后实现就是： template模板中： <video src="http://haier-dev
html5退出全屏触发的方法_微信H5 video Android 全屏 坑
weixin_39516865的博客
11-22 716
最近 做了个H5 微信传播 初看到项目功能文档时 感觉没什么问题 简单！ 谁知 居然是个大坑！ 这个坑就是 点击播放视频时 视频全屏 。 全屏就全屏吧！ 这个问题也不大。 可是 再点击播放按钮页面 点击播放时 当前页面 会被 拉伸成全屏 然后间隔大概 几百毫秒 之后 视屏播放。 这第一类问题就来：1、当前播放按钮页面 被拉伸 导致 当前页面的 内容变形 圈变成 椭圆。2、点...
解决移动端中video点击视频播放会自动全屏
热门推荐
weixin_40974504的博客
03-21 3万+
video标签中加几条属性x5-playsinline="" playsinline="" webkit-playsinline=""可以解决移动端video点击播放自动全屏问题
总结移动端video视频播放的坑
weixin_33962923的博客
04-17 1万+
1、x5同层播放器 移动端浏览器中的video元素是比较特别的，早期无论是在iOS还是Android的浏览器中，它都位于页面的最顶层，无法被遮盖。后来这个问题在iOS下得到了解决，但是Android的浏览器则问题依旧。X5是腾讯基于Webkit开发的渲染引擎，它提供了一种名叫「同层播放器」的特殊video元素以解决遮盖问题。 只要给普通的video元素加上X5的自定义属性x5-video-pla...
网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）
weixin_44626952的博客
10-24 3616
最近公司官网需要使用视频当做banner背景且自动播放，并且因为是官网需要做到PC端和移动端都可以适配兼容，这些问题很是头疼； 　　兵来将挡，水来土掩，进过查阅相关技术资料，现已完美兼容PC端和移动端。下面就为大家详细讲解： PC端： 　　PC端相应简单些，浏览器对<video>标签的兼容还是很好的，但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现； ...
如何在H5的微信小程序中，点击视频让video标签全屏播放
07-12
在H5的微信小程序中，实现点击视频后让video标签全屏播放，可以按照以下步骤进行操作： 1. 在HTML文件中，使用video标签来嵌入视频，设置相关属性，如src、controls等。 ```html <video id="myVideo" src="{{videoUrl}}" controls></video> ``` 2. 在JavaScript文件中，监听视频的点击事件，通过调用video标签的requestFullscreen方法实现全屏播放。 ```javascript document.getElementById('myVideo').addEventListener('click', function() { var video = document.getElementById('myVideo'); if (video.requestFullscreen) { video.requestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); } else if (video.msRequestFullscreen) { video.msRequestFullscreen(); } }); ``` 3. 在CSS文件中，设置video标签全屏样式。 ```css video:-webkit-full-screen { width: 100%; height: 100%; } video:-moz-full-screen { width: 100%; height: 100%; } video:-ms-fullscreen { width: 100%; height: 100%; } video:fullscreen { width: 100%; height: 100%; } ``` 通过以上步骤，点击视频时会触发click事件，然后调用requestFullscreen方法进入全屏播放模式。注意，不同浏览器的全屏方法略有不同，需要逐个判断并调用对应的方法。同时，在CSS文件中通过设置全屏样式，使得video标签能够占据整个屏幕。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值