uniapp或H5页面中，video标签在微信内置浏览器遇到的坑

最新推荐文章于 2024-08-06 18:05:25 发布
最新推荐文章于 2024-08-06 18:05:25 发布
阅读量2.1k 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010613970/article/details/113315377
版权

1、在微信内置浏览里视频被自动全屏，可在video标签上加入以下属性，uniapp或H5通用

playsinline="true"
webkit-playsinline="true"
x5-playsinline="true"

2、目前自动播放的问题还没找到解决的方法，求路过的大神指点一下

diCommon
关注
专栏目录
uni-app小白【h5，vue，小程序的区别】
beichenxiansen的博客
03-30 3826
uni-app 传统的h5只有一端，就是浏览器。但是uni-app可以横跨7端，虽然它还是前端，但与传统的h5有明显的区别。 网络模型的变化 以前的网络大多都是b/s，服务端代码混合在页面里。现在是C/S前后端分离，通过js、api（类似ajax的uni.request）获取json数据，把数据绑定到界面上渲染。 文件类型的变化 之前是.html文件，现在是.vue文件。 文件内代码架构的变化 ...
react+ts使用video实现视频录制不兼容微信浏览器——loadedmetadata
qq_30351747的博客
07-10 440
react+ts使用video实现视频录制不兼容微信浏览器——loadedmetadata
video标签在微信浏览器下问题解决
船长灬普朗克的博客
07-10 1854
  最近在做h5的移动端程序，需要在页面上点击按钮后播放视频，在pc、ios都正常，Android的其他浏览器也正常，唯独在使用Android微信浏览的时候，视频无法控制层级、播放。   看网上有这个问题的人很多，大部分说的都是加上x5-video-player-type以及x5­-video­-player-­fullscreen等属性的解决方法，但经尝试后都不能解决。   由于微信及QQ浏览器使用的是x5浏览器内核，Android客户端上，播放视频的时候是将视频生成了一个Native控件来播放视频的，所
uniapp video播放视频 悬浮在屏幕无法滑动
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-06 1311
uniapp编译成App后，video标签在App上被编译为原生组件，原生组件层级高于前端组件，类似于flash层级高于div。所以不会随着页面滚动而滚动。解决思路：解决video标签在App上的层级过高问题。封装一个iframe嵌套。即可随着页面滚动而滚动。
video 标签在微信浏览器的问题解决方法
Jana Jing的分享
12-16 1466
在ios和安卓手机上播放时，遇到不少问题： 在微信浏览器内播放时，视频会自动全屏 如果每个视频都有一张自定义的图片作为封面，在显示视频的同时，如果没有给这个视频设置高度，视频的容器在安卓手机上会被视频的封面撑大到变形 解决办法： <video class="video-source" width="100%" 　　　height="240px" /*如果有封面，请设置高度*/ controls /*这个属性规定浏览器为该视频提供播放控件*/ style="
android webview m3u8,M3U8视频，在系统自带浏览器可以播放，但是在uni-app打开同样的网页就无法播放...
weixin_28309723的博客
05-26 1476
代码如下使用腾讯的TcPlayer的播放CCTV1的直播流1、用系统自带浏览器打开，正常播放；在uni-app使用webview打开页面，提示不支持播放此类型视频2、换成chimee也是一样的问题，在uni-app的webview中无法播放视频src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"char...
uniapp中运行至微信浏览器（客户端）视频自动播放
m0_51534164的博客
08-12 2335
使用uniapp开发的公众号，运行至微信浏览器，实现视频的自动播放功能
微信中点击按钮弹出在外部浏览器打开的提示代码
05-25
在微信环境中，通常为了安全和用户体验，用户不能直接在微信内置浏览器中打开外部链接，而是需要引导用户通过外部浏览器来访问。本知识点主要探讨如何在微信中实现点击按钮后提示用户在外部浏览器打开链接的代码实践...
HTML5页面音视频在微信和app下自动播放的实现方法
09-28
随着移动互联网的快速发展，H5页面的使用场景越来越多，然而在移动设备上，音视频自动播放的实现较之桌面浏览器更为复杂。这主要受到移动浏览器对自动播放功能的限制，以及节约数据流量和提升用户体验的考量。 在...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如微信内置浏览器，遇到一些挑战。 首先，问题的症结在于微信在安卓和iOS设备上使用了不同的内核。在iOS设备上，通常...
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 877
微信小程序和uni-app面试高频知识点
uni-app开发h5，用微信浏览器打开，视频自动播放
qq_43628847的博客
10-14 2402
https://blog.csdn.net/qq591840685/article/details/109032295?utm_medium=distribute.wap_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4.wap_blog_relevant_pic&depth_1-utm_source=distribute.wap_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefa
video网页能播放.mp4视频，微信不能播放的问题
tom_8899的博客
05-16 4315
在本地调试网页能播放.mp4视频，放到服务器上，在手机上测试，却不能播放.mp4视频。
uniapp 解决开发h5在微信浏览器打开video无法自动播放问题
weixin_47517731的博客
11-09 5941
1：将video自动播放置为false。3：在onReady中创建一个视频对象。当然了，得加上nextTick。4：在接口返回成功后调用。2：在data中定义。
uniapp，video视频播放不了，页面显示不完整
weixin_46715876的博客
10-12 5297
video播放不了，为界面全黑，此时切换为浏览器运行即可播放 视频播放时显示不完整，在App.vue中添加以下代码可解决 html,body{ height: 100%; width: 100%; } page { height: 100%; } 是uni-page-body没有设置height:100% ...
关于uniapp在各个端播放流视频的问题
weixin_43387188的博客
07-14 6340
uniapp在各个端播放流视频的问题H5新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 H5 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇
uniapp 中video在手机无法播放，其他地方视频可以播放
李苗苗的博客
11-17 4573
问题：详情页视频底部往下拉最底部视频无法播放，但是其他页面可以播放，代码相同 原因：是因为详情在第二页了，放在最顶部可以播放，我给页面超出滚动了 解决方式：去掉overflow:auto，不能使用overflow:auto 之后就可以播放了，踩坑 ...
uniapp，H5下，安卓手机视频播放自动全屏问题
weixin_43841757的博客
07-28 1891
禁止安卓手机播放自动全屏 1，需要给video标签添加禁止参数 t7-video-player-type="inline" webkit-playsinline="true" playsinline="true" x-webkit-airplay="true" x5-playsinline="showLine" 2，华为手机测试OK
uni-app中使用video无法播放腾讯视频链接
weixin_46918045的博客
01-31 1451
3，添加后，点击详情查看文档，并获取插件的appid跟版本号，点击开发文档，查看如何引入和使用该插件。4，回到hbuilder，添加player，对应的版本号和provider。，使用小程序的微信管理员账号扫码登录，在左侧菜单栏最底下，找到设置。5，pages.json找到要使用的页面，添加配置。2，点添加，搜索腾讯视频并且添加。6，最后，就可以在当前页面使用。
如何在第三方app的内嵌H5页面中直接调起微信内置浏览器
06-06
您可以通过在H5页面中使用微信JS-SDK的`wx.miniProgram.navigateTo`方法来调起微信内置浏览器。 具体步骤如下： 1. 在H5页面中引入微信JS-SDK库文件。 2. 通过微信开放平台申请获得appId和appSecret，并在H5页面中配置相关参数。 3. 在H5页面中调用`wx.miniProgram.navigateTo`方法，并传入需要打开的链接。 示例代码如下： ```javascript // 引入微信JS-SDK库文件 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> // 配置微信JS-SDK参数 wx.config({ appId: 'yourAppId', timestamp: new Date().getTime(), nonceStr: 'yourNonceStr', signature: 'yourSignature', jsApiList: ['miniProgram.navigateTo'] }); // 调用wx.miniProgram.navigateTo方法 wx.miniProgram.navigateTo({ url: 'yourUrl' }); ``` 需要注意的是，使用该方法需要确保用户已经登录了微信，并且当前H5页面是在微信内置浏览器中打开的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值