视频

正确调整视频大小

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

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

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

检测视频的大小

视频真正的编码帧大小有可能与视频元素的大小不一样(就像图片不一定按照它本身的大小显示)。

要检测视频编码的大小,可以用视频元素的 videoWidth 和 videoHeight 属性。而 width 和 height 则返回视频元素的大小,这两个值可能已被 CSS 或内联 width 和 height 属性修改了。

保证视频不会溢出容器

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

Android Chrome screenshot, portrait: unstyled video element overflows viewport Android Chrome screenshot, landscape: unstyled video element overflows viewport

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

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

谨记

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

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

CSS:

    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
查看完整示例

HTML:

    <div class="video-container">
      <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
              frameborder="0" width="560" height="315">
      </iframe>
    </div>
    
查看完整示例

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部