HTML5-Video标签代码的一些收集

今天制作一个页面需要用到视频，以前视频基本使用的都是嵌套视频网站的iframe代码，或者直接到视频文件，本次需要实现页面里的视频播放，就做了以下笔记。

我们最常用的代码

<video width="100%" height="auto" controls="controls" id="video" preload="auto"  >
<source src="images/shipin.mp4"   type="video/mp4">
您的浏览器不支持当前播放</video>

video可选属性

autoplay： 自动播放。值是autoplay

controls： 控制/控件。值是controls

height： 视频播放器的高度。值是pixels

width ：宽度。值是pixels

loop：环、圈、循环播放的意思。值是loop

muted：视频的音频输出为静音。值是muted

poster：贴画、海报，表示点击播放前的图片。值是URL

preload：预加载，视频在页面加载时加载，并预备播放。使用 "autoplay"，忽略该属性。值auto/metadata/none

src：视频的 URL。值是URL

如果考虑到兼容性，就使用以下代码吧！

h5的video标签根据不同的浏览器兼容情况只支持三种编码的视频格式：

<video> 元素支持三种视频格式：MP4、WebM、Ogg。

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

三种视频格式对应的 MIME 类型

MP4是：video/mp4

WebM是：video/webm

Ogg是：video/ogg

   <video controls="controls">
        <source src="images/shipin.webm" type="video/webm">
        <source src="images/shipin.ogg" type="video/ogg">
        <source src="images/shipin.mp4" type="video/mp4">
    </video>

Webm：由Google发布的一个开放、免费的媒体文件格式，其视频文件扩展名为webm。由于webm格式的视频质量和mpeg4较为接近，并且没有专利限制等问题，webm已经被越来越多的人所使用。

ogg:一种开源的视频封装容器，其视频文件扩展名为ogg，里面可以封装vobris音频编码或者 theora视频编码，同时ogg文件也能将音频编码和视频编码进行混合封装。

mpeg4：目前最流行的视频格式，其视频文件扩展名为mp4。同等条件下，mpeg4格式的视频质量较好，但它的专利被MPEG-LA公司控制，任何支持播放mpeg4视频的设备，都必须有一张MPEG-LA颁发的许可证。目前MPEG-LA规定，只要是互联网上免费播放的视频，均可以无偿获得使用许可证。

到这里顺便做下html5的一些笔记

HTML 5的页面结构

一个典型的Web页面有页眉（header），页脚（footer），导航（navigation），正文（central area）和侧栏（side bar）。现在如果是在HTML 4中，HTML部分中的上述这些专用名词需要使用DIV标签来描述。但是，如果是在HTML 5，可以专门为这些区域创建特定的元素名，让HTML更具可读性。以下是形成页面结构的HTML 5元素的更多细节。<header>：表现HTML的标题数据。

<footer>：页面的页脚部分。

<nav>：页面中的导航元素。

<article>：正文内容。

<section>：用在正文中定义section或区段内容。

<aside>：表现页面侧边栏内容。

尾语

如果想更方便，可以使用flv.js，bilbili其开源的H5 flv播放器(https://github.com/bilibili/flv.js）和移动端播放器（https://github.com/bilibili/ijkplayer）还是很不错的。