HTML5学习笔记-HTML视频

Web 上的视频

直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式

当前,video 元素支持三种视频格式:


image.png

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

如何工作

如需在 HTML5 中显示视频,您所有需要的是:

<video src="movie.ogg" controls="controls">
</video>

controls 属性供添加播放、暂停和音量控件。
包含宽度和高度属性也是不错的主意。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的:
实例

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
实例

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Internet Explorer

Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。

<video> 标签的属性

image.png

参考手册: HTML 5 <video> 标签

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 接上 关于HTML/HTML5(一)http://www.jianshu.com/p/33fc7840c079 学...
    Amyyy_阅读 4,247评论 0 4
  • 学习HTML的最佳网站没有之一http://www.w3school.com.cn/html/ 关于HTML/HT...
    Amyyy_阅读 6,607评论 0 16
  • 视频编码格式全面解析 我们在详解各种主流的视频格式之前,先抛开各种视频格式的定义,来讨论这样一件事情:你觉得目前的...
    latthias阅读 21,598评论 2 30
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,830评论 0 0
  • 人生就像迷宫,我们用上半生找寻入口,用下半生找寻出口。 01. 你可能在一个人面前一文不值,却在另一个人面前是无价...
    朱谷粒有点甜阅读 1,891评论 0 2