b站pc端竖屏视频旋转成横屏

已于 2024-11-24 11:03:07 修改
阅读量3.7k 收藏 4
点赞数 6
文章标签： css
于 2024-04-22 11:56:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51323052/article/details/138069850
版权

本人使用google浏览器

在这里插入图片描述

①首先先按F12定位标签

在这里插入图片描述

②小指针点击一下这个div,然后拉开这个底部控制台

在这里插入图片描述

③找到.bpx-player-video-wrap video

在这里插入图片描述

④直接点击一下有光标,就可以插入粘贴了,不用整别的!!

在这里插入图片描述

⑤加一个属性 transform: rotate(90deg)

在这里插入图片描述

⑥插入代码后直接关闭这控制台就行

在这里插入图片描述

⑦最终效果

在这里插入图片描述
在这里插入图片描述

猫野Yoyo
关注
HarmonyOS 开发实践——基于原生能力的横竖屏旋转适配
liuhaojiabin的博客
11-05 512
视频播放的过程中，用户可能在竖屏状态下，通过点击最大化按钮将视频变为横屏播放。视频播放的过程中，用户可能在竖屏状态下，通过点击最大化按钮将视频变为横屏播放。调用窗口的Orientation设置方向即可，具体的设置窗口的显示方向，属性设置参考下表；在一个应用内，不同的页面有不同的旋转策略；Q1：如何感知系统的自动旋转开关：如果是开的，app页面内适配？本文的旋转策略是：旋转策略是指当前页面支持的设备旋转方向。第三步：结合全局埋点的能力，实现不同页面的旋转适配。页面方向是：页面方向是手机的页面当前的显示方向。
鸿蒙原生APP开发之横竖屏开发实践
CTrup的博客
10-30 1142
横竖屏切换功能即实现应用内既支持竖屏显示也支持横屏显示的效果。对于应用内不同页面显示方向不同的情况，需要在应用逻辑中，动态修改窗口方向，来实现该效果，例如包含视频播放功能的应用，首页内容是采用竖屏方式，而视频详情页则采用横屏方式展示。窗口旋转策略的选择常用应用类型的横竖屏开发常见的横竖屏开发问题。
b站观看视频旋转90°（控制台）
bug_caicai的博客
06-11 499
打开f12，控制台粘贴下面代码。
【娱乐小技巧】网页旋转90° 3步搞定
hcoolabc的博客
12-29 9034
一、按F12,打开控制台；小结，角度值可以自选；
网页视频旋转(B站)
ZSJ27的博客
10-25 4332
F12打开浏览器console 粘贴 box = document.getElementsByClassName(‘player’)[0] box.style.transform = ‘rotate(90deg)’; 回车 其中90是顺时针旋转的度数,可以改成180,270等
B站网页端视频旋转JS代码
qq_33843237的博客
11-08 2193
有时b站up主上传的视频不是横屏的，电脑端看起来费脖子，可以用如下代码解决。
css3 监控横屏，内容旋转90度
ASP.NET
05-16 952
@media screen and (orientation : landscape) { html { width: 100vh; height: 100vm; transform: rotate(90deg); transform-origin: 50vw 50vw; } }
一个浏览器关于视频B站倍数播放的油候脚本
monk96的博客
12-03 998
油候脚本可谓是超级大杀器 今天刷视频发现，2倍数也太慢了，有些东西，其实可以快速浏览的 突然想到了油候脚本加速播放也就是获取页面上的倍数标签， 直接审查元素添加到页面中 效果 开心刷起来
B站看视频如何自定义倍速
lookingforqingyu的博客
05-11 1226
注意：代码敲完回车后，倍速并没有改变，这是因为倍速列表中的标签元素还未再次选中（事件未再次触发），你只需要在页面中再次手动选择一次你自定义的倍速即可。以上是3倍速，你可以修改其中三处的数值，来自定义倍速。（第一处的值data-value才是真实值，后面两处的值只是为了显示）此种方式在列表观看视频时，倍速不会恢复默认，会一直保持。
关于B站（bilibili）对未登录用户视频观看进行暂停和弹窗的分析与简单解决方案
热门推荐
西界的博客
03-20 4万+
简单解决B站（bilibili）因用户未登录而自动暂停视频并弹出登录窗口的问题
android 摄像头、视频录制demo (竖屏)
07-08
综上所述，这个示例项目提供了在竖屏模式下正确显示和处理摄像头预览、拍照和视频录制的解决方案，同时确保在PC端查看时保持预期的方向。开发者可以通过分析解压后的“zdyCamera”文件，学习和理解上述各个步骤的...
javascript检测移动设备横竖屏.doc
最新发布
12-08
window.orientation属性能够识别设备的朝向，它有三个主要的值：0代表竖屏模式（portrait），90代表向左旋转后进入横屏模式（landscape），-90代表向右旋转后进入横屏模式。当设备上下互换时，window.orientation的...
Unity竖屏打包，动态切换为横屏
08-19 3504
由于我们主应用是竖屏应用，打包的旋转方式只能是Portrait；而某些功能模块需要横屏展示，这个时候就需要动态切换为横屏，退出该模块之后在切回竖屏；其实旋转相机可以做到，但适配UI时候会很头疼，不推荐。
如何优雅地让谷歌浏览器中的网页旋转90度？掌握这个技巧，让你的网页与众不同！
蜗牛的博客
03-16 1万+
网页旋转是一种视觉效果，可以让网页内容在不同的方向上展示，例如将横向的内容旋转为纵向展示，或将竖向的内容旋转为横向展示。这样可以使网页更加灵活多变，适应不同的场景需求。
my学习博客介绍
wang_book的博客
07-31 61
介绍 我将在这里记录一些技术的学习过程 之前在stackEdit记录，由于图片量过大 无法使用 转移到csdn
油猴脚本用于BILIBILI合集进度显示
zhklsaj的博客
11-10 835
在B站学习过程中，我发现官方并没有提供合集观看进度的显示功能。对于学习长篇内容的用户来说，无法轻松查看整体进度，影响了学习的安排。因此，我写了一个油猴脚本，用于实时显示B站合集的观看进度，帮助用户掌握当前的学习进展，更好地规划学习时间。代码在底下！！！！
流媒体播放器
jia12216的专栏
05-07 522
显示下载进度条，支持边下载边播放。想支持边下边播放需要把视频文件放到指定类型的服务器上，服务器不支持流媒体类型无法支持该功能。 支持整屏播放和缩小屏幕播放。
工具 | bilibili播放屏幕旋转代码
"You are worthy! You can do it!"
12-28 775
右键 -> "开发者工具" -> console。 然后添加如下代码 document.querySelector(".bilibili-player-video").style.transform = "rotate(90deg)";
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值