社区
CSS
帖子详情
视频的横竖版显示问题
ABitTrouble
2020-10-14 08:59:45
我用手机作为视频源采集,通过网络发送给PC,PC端用网页显示手机拍摄的视频,我想尽量全屏显示视频,当手机横屏拍摄时,全屏显示正常;当手机竖屏拍摄时,只能显示部分图像,所以我想高度全屏,横向根据图像比例等比设置宽度,不知道CSS怎么设置,求大侠指点。
...全文
387
3
打赏
收藏
视频的横竖版显示问题
我用手机作为视频源采集,通过网络发送给PC,PC端用网页显示手机拍摄的视频,我想尽量全屏显示视频,当手机横屏拍摄时,全屏显示正常;当手机竖屏拍摄时,只能显示部分图像,所以我想高度全屏,横向根据图像比例等比设置宽度,不知道CSS怎么设置,求大侠指点。
复制链接
扫一扫
分享
转发到动态
举报
AI
作业
写回复
配置赞助广告
用AI写文章
3 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
ABitTrouble
2020-10-14
打赏
举报
回复
谢谢回复。这个属性我已经配置过了,高度和Viewport的高度一致,width我不设置,想让宽度随视频分辨率等比变化,初始时是正常的,当我手机的横竖屏切换几次后,宽度越来越窄。具体设置如下:
[data-component='Peers'] {
min-height: 100%;
width: 100%;
+desktop() {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;//row
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
+mobile() {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
> .peer-container {
overflow: hidden;
AppearFadeIn(100000ms);
+desktop() {
flex: 0 0 auto;//0 0 auto
height: 100vh;
initial-scale: 1;
margin: 6px;
border: 1px solid rgba(#fff, 0.15);
box-shadow: 0px 5px 12px 2px rgba(#111, 0.5);
transition-property: border-color;
transition-duration: 0.35s;
&.active-speaker {
border-color: #fff;
}
}
+mobile() {
flex: 100 100 auto;
order: 2;
min-height: 25vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&.active-speaker {
order: 1;
}
}
}
}
初心不变时过迁
2020-10-14
打赏
举报
回复
css 除了 PX 像素以外 还要 vh 这个屏幕宽度这个东西 楼主可以搜搜看 楼上也是正解
weixin_50944805
2020-10-14
打赏
举报
回复
height: 100vh;
网络
视频
的播放,
横竖
屏切换,进度、时间
显示
实现的功能: 1、边缓冲边播放(没有做
视频
的本地缓存),缓冲时会有longding的状态提示 2、可以
横竖
屏切换,自动全屏 3、时间同步
显示
4、进度条同步更新
Android
视频
播放器(支持
横竖
屏切换)
Android
视频
播放器(支持
横竖
屏切换)
iOS
视频
全屏时锁定
横竖
iOS
视频
全屏时锁定
横竖
, iOS 9.3测试有效.
Android中WebView播放网上
视频
,
横竖
屏切换
最近写了一个webview播放网络
视频
的代码,发现有个
横竖
屏切换,在哪里卡住了这是我在网上找的例子,传上来供大家下载。
支持
横竖
屏切换的
视频
播放器demo
支持
横竖
屏切换的调用苹果系统播放器播放
视频
的简易
版
demo
CSS
61,129
社区成员
60,711
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章