html5 视频

版本：HTML5

HTML5 提供了播放视频文件的标准，即使用 <video> 元素，在一个支持HTML5的浏览器中，不需要安装任何插件就能播放视频，原生的支持视频。

HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。原生的支持音频和视频，为HTML5注入了巨大的发展潜力。

html实现音频嵌入(传统方式)：这种方式虽然可以实现，但是要浏览器支持Flash而且并不能实现控制，所以要实现起来很麻烦。

<object height="200" width="200" data="2_1.swf"></object>
<embed src="2_1.mp4" type="">

在HTML5中使用<video>和<video>播放视频

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<video>

• <video>标签可以插入视频，用来设置视频内容。
• controls属性，则向用户显示控件，提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。。
• autoplay属性规定一旦视频就绪马上开始播放，如果设置了该属性，视频将自动播放。且所有主流浏览器都支持 autoplay 属性。
• loop属性，则当媒介文件完成播放后再次开始播放。。
• poster属性，如果出现该属性，则向用户显示视频封面图片。
• width宽度和height高度属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
• 与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<source>

• <source>标签用于设置音频的资源。video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）
• src属性，要播放的视频的 URL。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video

效果

• HTML5的视频: ogg (ogv), H.264 (mp4)
• 需要留意一下 Google 的 VP8 视频解码，这个将被作为一个开源格式来结束（格式选择的）纷争。
• 对于 低于IE9 和旧浏览器，你将需要一个折衷的解决方案。
• 当你第一次尝试 HTML5 的音频/视频，你的服务器必须支持你打算提供的音频/视频的 MIME 格式。你将需要检查一下其在本地服务器上是否被支持。
• 如果你使用 Safari 来检测 HTML5 的音频/视频支持，需要安装 QuickTime Player，没有QuickTime Player 的 Safari 什么都不能播放。

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillStyle 属性。
注意：Internet Explorer 9之前的版本不支持<audio>标签。

存在的问题：您必须把视频转换为很多不同的格式。<video> 元素在老式浏览器中无效。

视频格式

• ogg[oga]。ogv影片格式需要由ogg容器格式说起，Ogg是一个自由且开放标准的容器格式，由Xiph Org 基金会所维护。Ogg格式并不受到软体专利的限制，并设计用 於有效率地串流媒体和处理高品质的数位多媒体。「Ogg」意指一种档案格式，可以纳入各式各样自由和开放原始码的编解码器，包含音效、视讯、文字（像字幕）与後设资料的处理。在Ogg的多媒体框架下，Theora提供有损的影像层面，而通常用音乐导向的Vorbis编解码器作为音效层面。人类演说的压缩编解码器Speex、无损的音 效压缩编解码器FLAC和OggPCM也可能作为音效层面使用。「Ogg」这个词汇通常意指Ogg Vorbis此一音讯档案格式，也就是将Vorbis编码的音效包含在Ogg的容器中所成的格式。在以往，.ogg此一副档名曾经 被用在任何Ogg支援格式下的内容，但在2007年，Xiph Org基金会为了向後相容的考量，提出请求，将.ogg只留给Vorbis格式来使用。 Xiph Org基金会 决定创造一些新的副档名和媒体格式来描述不同类型的内容，像是只包含音效所用的.oga，包含或不含声音的影片（涵盖Theora）所用的.ogv和程式所用 的.ogx。Xiph Org基金会对Ogg的参照实装，目前最新的版本是2005年11月27日释出的libogg 1.1.3。[2]另一个版本libogg2也可以在Xiph Org基金会的SVN 套件库中找到。这两个函式库都是在新BSD许可证下释出的自由软体。因为其格式自由，和其参照实装并非Copyleft形式，无论自由或专有、商业或非商业的媒体播放器，甚至部分制造商的可携式媒体播放器和全球定位系 统接收器都采用了Ogg下的各种编解码器。
• H.264[mp4]。H.264，同时也是MPEG-4第十部分，是由ITU-T视频编码专家组（VCEG）和ISO/IEC动态图像专家组（MPEG）联合组成的联合视频组（JVT，Joint Video Team）提出的高度压缩数字视频编解码器标准。H.264是ITU-T以H.26x系列为名称命名的标准之一，同时AVC是ISO/IEC MPEG一方的称呼。这个标准通常 被称之为H.264/AVC（或者AVC/H.264或者H.264/MPEG-4 AVC或MPEG-4/H.264 AVC）而明确的说明它两方面的开发者。该标准最早来自于ITU-T的称之 为H.26L的项目的开发。H.26L这个名称虽然不太常见，但是一直被使用着。该标准第一版的最终草案于2003年5月完成。MP4，全称MPEG-4 Part 14，是一种使用MPEG-4的多媒体电脑档案格式，副档名为.mp4，以储存数码音讯及数码视讯为主。另外，MP4又可理解为MP4 播放器，MP4播放器是一种集音频、视频、图片浏览、电子书、收音机等于一体的多功能播放器。

在HTML4中播放视频

HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的。插件的功能是扩展 HTML 浏览器的功能。辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用<object>标签来加载的。

• 不同的浏览器对音频格式的支持也不同。
• 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
• 如果用户的计算机未安装插件，无法播放音频。
• 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。插件可以通过<object>标签或者<embed>标签添加在页面中。大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

<object>

所有主流浏览器都支持<object>标签。<object>元素定义了在 HTML 文档中嵌入的对象。该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。

下面的 HTML 片段显示嵌入网页的一段 Flash 视频：

<object data="intro.swf" height="200" width="200"></object>

存在的问题

• 如果浏览器不支持 Flash，将无法播放视频。
• iPad 和 iPhone 不能显示 Flash 视频。
• 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

<embed>

<embed>标签的作用是在 HTML 页面中嵌入多媒体元素。下面的 HTML 代码显示嵌入网页的 Flash 视频：

<embed src="intro.swf" height="200" width="200"> 

存在的问题

• HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
• 如果浏览器不支持 Flash，那么视频将无法播放
• iPad 和 iPhone 不能显示 Flash 视频。
• 如果您将视频转换为其他格式，那么它仍然不能在所有浏览器中播放。

HTML播放视频兼容方案

以下实例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

 <video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.webm" type="video/webm">
   <object data="movie.mp4" width="320" height="240">
     <embed src="movie.swf" width="320" height="240">
   </object> 
 </video>