谷歌 Web 开发最佳实践手册(2.2.4):正确调整视频大小

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:当关系到保持用户愉悦度时,视频大小就显得尤为重要了。

 

在本课程的内容有:

  1. 检测视频的大小
  2. 保证视频不会溢出容器

当关系到保持用户愉悦度时,视频大小就显得尤为重要了。

  • 使用大尺寸和高质量视频时注意不要超出平台的承受范围。
  • 视频应尽可能的短。
  • 过长的视频可能会引起下载和加载的中断;有的浏览器会等待视频下载完才开始播放。

 

检测视频的大小

视频真正的编码帧大小有可能与视频元素的大小不一样(就像图片不一定按照它本身的大小显示)。
要检测视频编码的大小,可以用视频元素的 videoWidth 和 videoHeight 属性。而 width 和 height 则返回视频元素的大小,这两个值可能已被 CSS 或内联 width 和 height 属性修改了。

 

保证视频不会溢出容器

当视频元素大小超过窗口时就有可能会溢出容器,此时用户将无法看到完整的内容或使用上面的控件。

Chrome-Android-portrait-video-unstyled  Chrome-Android-landscape-video-unstyled

你可以通过 JavaScript 或 CSS 控制视频大小。像 FitVids 之类的 JavaScript 库或插件可以方便地保持适当的大小和宽高比,甚至可以用在 YouTube 和其它源的 Flash 视频上。

使用 CSS 媒体查询 (CSS media queries)去指定元素的大小随窗口尺寸变化而变化。
max-width: 100% 会是你的好朋友。

记住:不要强行改变视频的宽高比。压扁或者拉伸都会很难看。

对于 iframes 中的媒体内容(像 YouTube 视频),可以采用响应式的方法(比如这个由 John Surdakowski 提出的)。

CSS:

查看完整样例

HTML:

查看完整样例

对比响应式样例非响应式样例

收藏 评论

关于作者:Mxt

Think Deep, Work Lean. 个人主页 · 我的文章 · 12

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部