【方法】公众号上传的视频不能横屏播放，如何解决？

最新推荐文章于 2024-11-02 15:29:16 发布
最新推荐文章于 2024-11-02 15:29:16 发布
阅读量3.5k 收藏 1
点赞数 1
分类专栏： IoT产品设计 Base基础原理和工具 文章标签： 工具 产品经理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liwei16611/article/details/131725662
版权
当在微信里观看公众号文章中的视频时，如果遇到只能横屏播放且无法全屏的问题，可以按照以下步骤解决：首先，在微信设置的通用选项中开启横屏模式；然后，打开手机的自动旋转功能。这样，在观看视频时点击全屏并横置手机，即可实现清晰的全屏播放体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

说明

解决步骤

步骤一：开启微信横屏模式

步骤二：打开手机自动旋转功能

说明

直接用手机打开公众号文章上内嵌的视频，发现只能横屏播放，无法全屏查看。

这个时候学习，尤其是看视频课程的时候无法看清楚全图。

怎么解决呢？

解决步骤

步骤一：开启微信横屏模式

打开微信设置->通用设置->开启横屏模式

步骤二：打开手机自动旋转功能

完成上述设置之后，点击视频全屏，然后再把手机横放即可实现全屏播放。

Vue3 - 详细实现调用浏览器摄像头拍照并生成图片预览，支持将抓拍的图像保存到用户本地或上传到服务器、调取前置摄像头和后置摄像头，开启摄像头并进行拍照，vue实现调用摄像头，电脑或手机调用摄像头拍照
王二红
10-03 7706
vue3，nuxt3，摄像头，vue3网站打开摄像头拍照，vue3项目调用摄像头实现拍照功能，拍照后怎么保存，照相后上传到后端服务器，开启摄像头黑屏，如何默认后置摄像头，网页开启电脑摄像头并照相，前置拍照，vue3如何调用手机摄像头进行拍摄，拒绝权限后不再弹出了，微信公众号网页，摄像头报错，拍照左右镜像反了，浏览器不兼容怎么办，vue3调用电脑端摄像头实时拍照，解决调用摄像头权限无法弹出，打不开摄像头，Vue3如何调用手机的摄像头，调用本地摄像头实现拍照，浏览器不弹摄像头权限了，如何不使用https运行测试
Vue2 - 详细实现调用浏览器摄像头拍照并生成图片预览，开启摄像头并进行拍照，支持将抓拍的图像保存到用户本地或上传到服务器、调取前置摄像头和后置摄像头，vue实现调用摄像头，电脑或手机调用摄像头拍照
王二红
10-03 9527
vue2，nuxt2，摄像头，vue网站打开摄像头拍照，vue项目调用摄像头实现拍照功能，vue调用电脑端摄像头实时拍照，解决调用摄像头权限无法弹出，打不开摄像头，vue如何调用手机的摄像头，调用本地摄像头实现拍照，浏览器不弹摄像头权限了，如何不使用https运行测试，拍照后怎么保存，照相后上传到后端服务器，开启摄像头黑屏，如何默认后置摄像头，网页开启电脑摄像头并照相，前置拍照，vue2如何调用手机摄像头进行拍摄，拒绝权限后不再弹出了，微信公众号网页，摄像头报错，拍照左右镜像反了，浏览器不兼容怎么办，前置摄
H5（html5 video）视频播放禁止拖动进度条，不能快进，不能后退；微信公众号视频播放；Java视频流播放
01-16
H5（html5 video）视频播放禁止拖动进度条，不能快进，不能后退；微信公众号视频播放，视频播放后才能操作其他内容。 内含Java视频流播放，本人并不建议直接将视频路径放到src中，而是使用视频流方式获取
设置网页打开默认全屏_微信公众号里的视频不能进行全屏播放的解决方法
weixin_39726044的博客
12-06 6460
我们手机版的微信视频，发现视频播放只能竖屏播放，点击右下角对放大按钮也是如此，网页版也是小窗口播放，而视频这样显示特别影响我们的观看感受， 下面说下微信公众号里的视频不能进行全屏播放的解决方法。 1.打开手机微信，点击设置选项打开； 2.点击设置里面的通用选项打开，点击开启横排模式即可，之后再次播放手机微信里的视频就能横着播放视频了；3.网页微信公众号视频放大屏幕播放设置，这里以搜狗浏览器为例...
uni-app 微信公众号H5开发 里面的video 组件点击全屏后不会自动横屏播放
学习路上的小刘
09-17 2863
文章目录前言一、不能自动横屏的原因？二、在里就奉上代码总结 前言 video 组件 视频播放，在微信浏览器中点击全屏的时候不会自动横屏。客户说别人的为什么能自动横屏你的为什么不能，爆肝了两天，百度了一篇又一篇，什么x5属性往上加，pi用没有，然后看见一个内置旋转的方案，莫得办法，就用这个解决一下，好像做了又好像没做 一、不能自动横屏的原因？ 1.微信内置的设置横屏模式没开启 解决方案，让用户去开启微信的横屏模式，但是甲方不愿意，弃用 2.微信浏览器用的是X5核心 解决方案，让用户去微信聊天窗口发送 de
移动端强制横竖屏问题
06-22 326
项目要求: 微信公众号网页强制横屏(不管用户是否开启竖排方向锁定) 拖了几个月还没将这篇写完....都快忘光了.... 竖屏（portrait）横屏（landscape） <!--判断是否是横屏状态还是竖屏状态--> <script language="javascript" type="text/javascript"> //屏幕方向标识，0横...
h5 视频全屏-横屏实现，遇到问题以及解决方案
ringlot的博客
10-14 7452
最近需要实现h5 视频全屏也就是横屏，横屏后需要将相关视频展现在侧边栏。考虑到h5是不能让手机强制横屏的，只能考虑用css 样式上横屏显示video
APP内嵌HTML5实现视频横屏播放
成长是一辈子的事
05-08 2万+
需求：    页面是嵌套在app中的H5页面，点击首页的封面图加载播放视频页面，播放页只有一个video标签，所以如果如图就会很难看，并且播放按钮会很小，就像下图：    需要做到打开页面的时候自动播放并且横屏。    于是我就找资料啊找资料，发现了很多种做法，并且逐一实验，没有找到合适的。┭┮﹏┭┮    最后找到一个插件，从中获得了启发，虽然H5不能使手机横过来，但是换个思路，可以把视频转90...
移动端如何让页面强制横屏
weixin_41190571的博客
06-22 1万+
     最近开发微信公众号的时候遇到一个需求，就是在手机页面上有许多ECharts图形展示。为了更好的用户体验，当用户竖屏打开时我们需要将手机页面的内容横过来，效果如下所示：      好了，现在我的项目中html结构如下：&lt;body&gt;       &lt;div id="main"&gt;&lt;/div&gt;     //这是我的画布&lt;/body&gt;我们利用trans...
抖音，快手，腾讯，三大龙头短视频直播有什么区别差异化
公众号：国仁猫哥
07-27 2139
抖音直播、快手直播、腾讯直播！可谓是风云争霸！每个平台都是实力雄厚！ 过去的2019年可谓是最疯狂的一年！很多人短视频还没搞明白怎么回事？直播带货又风风火火的来了，可谓是迅速的崛起！各大巨头为了抢占直播市场，纷纷投巨资布局！那么到底谁能成为霸主还得拭目以待！ 面对三大直播平台很多人都蒙了，到底该做哪个平台的直播好呢？一时半会没有思路！ 抖音定义为“公寓流量”那么从公寓就是一个公开的流量渠道上说，抖音是全网直播流量获取的最佳渠道，性价比最高，速度也最快， 快手定义为“半公寓半私域”为什么这么说呢，是因为快手
vue3 - 实现移动端H5网页调用手机相册选取图片或打开摄像头相机拍照上传，H5调用本地相册/相机上传图片详细教程，如何在h5网站浏览器中打开本机相册或相机选择相片（附图片压缩功能及上传服务器示例）
最新发布
高级前端工程师
11-02 1万+
vue3手机H5网页，调起安卓苹果ios手机相册和相机，H5实现调用手机摄像头相册实现图片压缩预览删除，vue3项目调用摄像头和相册，H5调用手机摄像头，vue3 H5拍照上传，手机网站浏览器移动端调取相机或相册，实现拍照上传功能，解决苹果ios手机无法打开相册相机问题，无法唤起摄像头怎么办，调取本机系统的相册，vue3 h5网页调用相机拍照和相册，实现多张图片上传功能，实时拍照上传，VUE3如何唤起手机摄像头拍照上传，H5调起手机端的摄像头，html5调用手机摄像头，实现H5调起手机相机和相册，图片压缩，
java开源商城系统|代码哥如何用java小程序直播商城搭建直播带货平台技术解决方案
代码哥daimage6的博客
04-06 1971
java开源商城系统|找物如何用java小程序直播商城搭建直播带货平台技术解决方案(图文系统) java开源商城系统不仅高速稳定，而且在技术上安全稳定。目前市面各类商城技术方案很多，真正符合程序员代码规划稳定的开源版本，少之又少。 5G即将来临，笔者代码哥（DaiMaGe6）预计，下一阶段的电子商务，即将以短视频和直播最为热门的形式。那么对于商家的你，如何为自己的公司，为自己的店面用上小程序直播的...
做微信公众号点播，直播视频时，视频自动全屏播放的问题，现在mark一下。希望对后面经历X5内核浏览器的视频开发者有帮助
u011183419的博客
09-12 1554
最近，在做一视频频直播，点播的系统，公众号是其中的一端，在对接视频后，发现视频播放时自动进入全屏模式，退出又暂停了。 各种文档，方法网上一堆。 什么微信白名单，什么x5-video-player-type=“h5” x5-video-player-fullscreen=“false” 等一堆方案说可以解决（见：https://segmentfault.com/q/1010000007993183）...
微信H5视频/VIDEO/全屏/不全屏/自动播放等相关问题
热门推荐
不懂小彬的博客
12-28 3万+
做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步，自动全屏，不能全屏，不能自动播放，Android，IOS，巴拉巴拉……多到令人发指！今天整理了一下相关的解决办法，以上并不是全部解决了，但是起码能打个60分…… 第一步:设置 x5­video­player­type 启用Ｈ5同层播放器通过video属性“x5­video­player­type”声明启用同层H5播放器 x5­v
微信H5开发，怎样禁止手机横屏
前端kk的博客
05-04 2万+
最近开发微信H5时遇到一个非常蛋疼的问题，就是手机横屏显示时，排版出问题了，严重变形。就像下面这样。页面一团糟在网上找了很多方法，下面网友的建议方法：网上的一些方法后来我就把各个大神做的H5都拿出来看看，发现基本上有问题。也就是说横屏的体验是很差的，毕竟微信H5是二次开发，没有权限获取相关接口。折腾了一天了，没有太好的解决方法。所以在开发的时候，就是基于手机竖屏了，也就是让所有的图片，标签都旋转9...
blob写法的浏览器兼容性
阿酷tony
07-12 1449
blob写法的浏览器兼容性： 我的视频应用类原创文章 酷播云免费视频二维码的完整使用教程（适合小企业做微信视频宣传） 视频二维码的适用场景 微信公众号直播有哪些不一样的玩法？ 微信视频直播如何做收费直播（如何做付费的微信直播）图文教程 说说视频编码格式、视频码率、视频帧率、分辨率的概念 原创教程：带ppt课件和讲师画面的教学视频录制完整教程 如何做电视节目的视频直播（电视台节目直播） 做视频直播时如何测试本地网络的上行带宽(网速测试) usb摄像头做教学直播实现pc和手机都可以..
怎么把横版视频剪成竖版？两种方法快速搞定！画面满屏，没有黑边
Skr520的博客
11-12 2万+
现在很多手机社交媒体上，都比较流行竖版视频。那么横版视频如何变成竖版？今天教大家两种方法快速搞定！横版改成竖屏，并且做到画面满屏，无黑边。顺便还会分享现在抖音、朋友圈、影视圈最流行的竖版视频排版方式的制作技巧。 方法1：利用爱剪辑将横版视频剪成竖版，效果酷炫让你立马拿到超多赞 第一步：打开爱剪辑，在新建框设置分辨率，将视频设置为竖版的尺寸 打开软件后，在弹出的新建框中，把视频大小处的下拉框选择为“...
微信视频全屏问题解决方案
Lucky Star的博客
02-21 6427
1、微信浏览器下解决默认video全屏问题 iOS:给video加一下属性  [html] view plain copy webkit-playsinline="true"  playsinline="true"   android：给video加一下属性 [html] view plain copy
微信公众号h5开发如何横屏签名
05-10
微信公众号 H5 开发中，如果需要进行横屏签名，需要按照以下步骤进行： 1. 在页面头部添加 meta 标签，设置 viewport 的宽度和高度，以及 initial-scale、maximum-scale 和 minimum-scale 等属性，例如： ```html <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"> ``` 2. 在 CSS 样式表中设置 body 元素的样式，例如： ```css body { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); transform-origin: left top 0; width: 100vh; height: 100vw; overflow-x: hidden; position: absolute; top: 100%; left: 0; } ``` 其中，-webkit-transform、-moz-transform、-ms-transform 和 -o-transform 是为了兼容不同的浏览器内核，transform-origin 是设置旋转的中心点，width 和 height 分别设置页面的宽度和高度，overflow-x:hidden 是为了隐藏横向滚动条，position:absolute、top:100% 和 left:0 是为了把页面移动到底部位置。 3. 在 JavaScript 中监听窗口大小变化事件，重新计算页面样式，例如： ```js window.addEventListener('resize', function() { var width = window.innerWidth; var height = window.innerHeight; if (width < height) { document.body.classList.add('portrait'); document.body.classList.remove('landscape'); } else { document.body.classList.add('landscape'); document.body.classList.remove('portrait'); } }); ``` 其中，如果窗口宽度小于高度，则添加 portrait 类，否则添加 landscape 类，然后在 CSS 样式表中设置不同的样式，以适应不同的屏幕方向。 以上就是微信公众号 H5 开发中如何进行横屏签名的步骤，希望能对你有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

产品人卫朋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值