社区
CSS
帖子详情
视频的横竖版显示问题
ABitTrouble
2020-10-14 08:59:45
我用手机作为视频源采集,通过网络发送给PC,PC端用网页显示手机拍摄的视频,我想尽量全屏显示视频,当手机横屏拍摄时,全屏显示正常;当手机竖屏拍摄时,只能显示部分图像,所以我想高度全屏,横向根据图像比例等比设置宽度,不知道CSS怎么设置,求大侠指点。
...全文
389
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;
网络
视频
的播放,
横竖
屏切换,进度、时间
显示
在Android开发中,实现“网络
视频
的播放,
横竖
屏切换,进度、时间
显示
”是一项常见的任务,这涉及到多媒体处理、用户界面设计以及设备适配等多个方面。以下将详细讲解这些功能的实现方法。 首先,
视频
播放的核心是...
Android
视频
播放器(支持
横竖
屏切换)
`SurfaceView`或`TextureView`可以用来
显示
视频
,它们可以随着布局的变化而调整大小。确保在
横竖
屏切换时正确处理`SurfaceHolder`的生命周期,重新设置
视频
的播放器对象,以保持播放的连续性。 4. **布局管理**:...
iOS
视频
全屏时锁定
横竖
在iOS平台上,为
视频
应用开发时,经常遇到一个需求,那就是如何在
视频
全屏播放时锁定屏幕方向,确保用户在观看
视频
时不会因为设备的旋转而改变
显示
模式。标题"iOS
视频
全屏时锁定
横竖
"所涉及的核心知识点是iOS应用中...
Android中WebView播放网上
视频
,
横竖
屏切换
4. **考虑全屏模式**:如果需要在横屏时全屏
显示
视频
,可以监听WebView的JavaScript事件,通过`WebChromeClient`的`onShowCustomView()`和`onHideCustomView()`方法来控制全屏和退出全屏。 以上就是如何在Android的...
支持
横竖
屏切换的
视频
播放器demo
开发者可能还考虑了错误处理,如网络
问题
导致的播放失败,以及用户操作反馈,如控制条的
显示
和隐藏。 通过学习这个"支持
横竖
屏切换的
视频
播放器demo",开发者可以深入理解如何利用苹果的系统播放器实现一个功能完善...
CSS
61,129
社区成员
60,711
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章