响应式 HTML5 视频 - 在 iOS 中调整大小

Posted

技术标签:

【中文标题】响应式 HTML5 视频 - 在 iOS 中调整大小【英文标题】:Responsive HTML5 Video - Sizing in iOS 【发布时间】:2014-04-07 16:46:07 【问题描述】:

我们在显示响应式 html5 视频和调整比例时遇到问题;

在桌面浏览器上,缩放比例很好 - 视频及其海报图像完美缩放。但是在 iPhone Safari 上,视频没有填满宽度,周围留下黑色的“边框/填充”。

CSS;

.hero-video 
    /* The Container */
height: 338px;
width: 66.6%;

.hero-video video 
height: auto;
width: 100%;

HTML

<div class="hero-video">
    <video id="intro-video" controls preload="auto" poster="img/trigger-intro.png"  >
    <source src="media/intro.mp4" type='video/mp4' />
    <source src="media/intro.webm" type='video/webm' />
        Your browser does not support this video.
    </video>
</div>

【问题讨论】:

你能给出这个问题的可视化吗?是海报没有填满视频标签的整个宽度吗?顺便说一句,我认为 不是您需要以像素为单位设置的有效值(静态或 CSS/JS 动态值)。 感谢您的回复 - 由于其客户现阶段在 NDA 下工作,因此很难分享。海报没有填满视频的整个宽度。我会尝试删除 看看效果如何...... 【参考方案1】:

这对我有用。

我很确定您可以进一步更改和清理 HTML 标记和 CSS 规则,但到目前为止,这适用于 iPhone、android 和 Kindle Fire 设备。

对于我正在使用的视频 HTML 标记。

<video autoplay="autoplay" id="background" loop="loop" muted="" poster="solar.jpg" data-autoplay="" playsinline=""  >
<source src="solar5.mp4" type="video/mp4">
</video>

对于我正在使用的 CSS。

#background 
position: relative;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: -100;
-webkit-transform: translateX(0%) translateY(-20%);
transform: translateX(0%) translateY(-20%);
background: url("solar.jpg") no-repeat;
background-size: cover;
opacity: 1;

.video 
position:relative;
padding-bottom:44.25%;
padding-top:30px;
height:0;
overflow:hidden;

【讨论】:

以上是关于响应式 HTML5 视频 - 在 iOS 中调整大小的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 响应式画布:调整浏览器画布绘制的大小消失

CSS 样式表HTML5响应式网页设计视频教程

响应式 Flash 视频,调整大小仅包装 div

将 youtube 视频包装在静态图像“框架”中并保持响应式调整大小

嵌入的 YouTube 视频无法在 iPad (iOS 7) 上播放,而 HTML5 搜索输入可见

案例HTML5响应式导航菜单特效