HTML5<video>

     最近做项目时用到了HTML5的<video>标签，遇到了一些问题，下面了解一下这个HTML5及<video>标签。

     【知识点】

     1、什么是 HTML5？

     HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

     HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

     HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

     2、为 HTML5 建立的一些规则：

     新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

     减少对外部插件的需求（比如 Flash）

     更优秀的错误处理

    更多取代脚本的标记

    HTML5 应该独立于设备

    开发进程应对公众透明

    3、新特性

     HTML5 中的一些有趣的新特性：

     用于绘画的 canvas 元素

     用于媒介回放的 video 和 audio 元素

     对本地离线存储的更好的支持

     新的特殊内容元素，比如 article、footer、header、nav、section

     新的表单控件，比如 calendar、date、time、email、url、search

     4、<video>应用

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

     当前，video 元素支持三种视频格式：

     


     Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

     MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

     WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

     


      我在项目中用这个标签遇到的问题就是，都是MP4格式的视频有的有声音和画面，有的只有声音没有画面，其实就是视频格式不符合HTML视频格式规范导致，MP4的视频编码格式也分很多种，<video>适应的MP4是 带有 H.264 视频编码和 AAC 音频编码的视频文件，用格式工厂的话设置如下：



     视频效果如下：



      【小结】

        <video>、<object>、<embed>都可以用于播放视频，而且属性非常容易设置，但是各有局限，<object>只适应IE，<video>对视频格式要求比较多，把各个标签的优点组合一下就好了。