另发表于Levi.Blog和oschina
HTML5支持三种视频文件格式（即编解码器）。.ogg或.ogv、.mp4或.m4v和.webm。
首先获取视频资源，然后输入<video src="my-video.ext"></video>，这里的my-video.ext是视频文件的位置，名称和扩展名。
| 属性 | 描述 |
|---|---|
| src（源） | 指定视频文件的URL |
| autoplay（自动播放） | 当视频可以播放时立即开始播放 |
| controls（控件） | 添加浏览器为视频设置的默认控件 |
| muted（静音） | 让视频静音 |
| loop（循环） | 让视频循环播放 |
| poster（海报） | 指定视频加载时要显示的图像（而不显示视频的第一帧）。接受所需图像文件的URL |
| width（宽度） | 视频的宽度（以像素为单位），通常默认为300 |
| height（高度） | 视频的高度（以像素为单位），通常默认为150 |
| PReload（预加载） | 告诉浏览器要加载的视频内容的多少。可以是以下三个值： |
none表示不加载任何视频 | |
metadata表示仅加载视频的元数据（如长度、尺寸等） | |
auto表示让浏览器决定怎样做（这是默认的设置） |
controls属性会告诉浏览器添加一套用于控制视频播放的控件。
为视频添加自动播放:
<video src="paddle-steamer.webm" autoplay controls></video> 如果浏览器不支持所使用的视频文件格式，它会显示视频的控制条，或者显示一个空的白色矩形区域（大多数情况下是这样的），或者显示海报图像（前提是通过poster属性指定了海报）。
可以将视频设为自动播放，还可以让它持续播放，直到停止。要循环播放只需要使用autoplay和loop属性。
这里没设置controls，访问者就无法停止视频。因此如果将视频指定为循环，最好包含controls。如果不设置autoplay属性，通常浏览器会在视频加载时显示视频的第一帧。这个可以通过海报图像进行指定，将其改为你设置的图像。
输入<video src="my-video.ext" controls poster="my-poster.jpg"></video>，其中，my-video.ext指向你的视频文件，my-poster.jpg是想要用做海报图像的图像。
如果认为用户看视频的可能性较低（例如该视频不是页面的主要内容），可以让浏览器不预先加载该视频，节省宽度，节省流量等。 对于设置了preload="none"的视频，在初始化视频之前，各浏览器显示视频的方式并不一样。
上面这样设置，会使页面完全加载时也不会加载这个视频，仅在用户试着播放该视频时才会加载它。
preload的默认值是auto，这样浏览器会预先加载大部分甚至整个视频。在none和auto之间有一个不错的选择，就是preload="metadata"，这样会让浏览器仅获取视频的基本信息，如尺寸、时长甚至一些关键的帧。在视频开始播放之前浏览器不会显示白色的矩形，而是视频的尺寸也会与实际尺寸一致。
source元素用于定义一个以上的媒体元素（在这个例子中为video）的来源。一个video元素中可以包含任意数量的source元素。例如下面的程序，浏览器会加载第一个它支持的source元素引用的文件格式，并忽略其他的来源。
上面提供的备用内容除了可以放置链接，还可以放置视频的截图或其他内容，例如，<p>Sorry, your browser doesn't support HTML5 video.<p>，然后再提供一个链接。
source的属性
| 名称 | 描述 |
|---|---|
| src | 视频来源的URL |
| type | 用于指定视频的类型，帮助浏览器决定它是否能够播放该视频。该属性的值反映的是视频的格式。 |
| media | 用于为视频来源指定CSS3媒体查询，从而可以为具有不同屏幕尺寸的设备指定不同的视频。 |
HTML5指定的一种新的文件格式WebVTT（Web Video Text Track，Web视频文本轨道）用于包含文本字幕、标题、描述、篇章等视频内容。其它相关信息，注意关注。
HTML5支持的音频文件格式包括.ogg、.mp3、.wav、.aac、.mp4、.opus。其中最好的两种格式是.ogg和.mp3。
首先获取音频文件，然后输入<audio src="my-audio.ext" controls></audio>，其中的my-audio.ext是音频文件的位置、名称和扩展名。
音频属性
| 名称 | 描述 |
|---|---|
| src（源） | 指定音频文件的URL |
| autoplay（自动播放） | 当音频可以播放时立即开始播放 |
| controls（控件） | 添加浏览器为音频设置的默认控件 |
| muted（静音） | 让音频静音 |
| loop（循环） | 让音频循环播放 |
| preload（预加载） | 告诉浏览器要加载的音频内容的多少。可以是以下的三个值。 |
none表示不加载任何音频 | |
metadata表示仅加载音频的元数据（如长度） | |
auto表示让浏览器决定怎样做（这是默认值） |
和视频类似。这里也是使用autoplay属性，让音频在页面加载时就自动播放。使用loop属性可以让音频文件循环播放。对preload属性使用上表中的值可以指定浏览器预加载音频文件的方式。
<audio controls>开始audio元素（含默认控件集）。输入<source src="my-audio.ogg" type="audio/ogg">，这里的my-audio.ogg是指向.ogg音频文件。输入<source src="my-audio.mp3" type="audio/mp3">，这里的my-audio.mp3是指向.mp3音频文件。可选步骤（但推荐带着对不支持HTML5的浏览器创建备用内容或音频下载链接）。输入</audio>结束audio元素。...<body> <h1>Audio with Sources and Text Link Fallback</h1> <audio controls> <source src="piano.ogg" type="audio/ogg"> <source src="piano.mp3" type="audio/mp3"> <p>Your browser doesn't support HTML5 audio, but you can <a href="piano.mp3">download the audio file</a> (MP3, 1.3 MB).</p> </audio></body></html>除了可以提供下载链接作为备用方案，还可以嵌入一个能播放MP4视频文件的Flash备用播放器。以MediaElement.js为例子进行演示。
获取MediaElement.js文件，将其包括在网站目录中并为网页添加MediaElement.js
访问MediaElement.js并下载ZIP包，解压后，只将build文件夹复制到网站文件夹（可以复制到放置音视频的文件夹中）。创建新的HTML页面或打开一个现有的页面，在head中加入下面这段代码,从而让页面加载必要的样式表和javaScript文件。将页面保存到放置build文件夹的文件夹中。<script src="build/jquery.js"></script><script src="build/mediaelement-and-player.min.js"></script><link rel="stylesheet" href="build/mediaelementplayer.min.css" />为视频添加备用Flash
获取视频资源。输入<video controls>开始video元素（含默认控件集）。如果需要，可在此处指定width、height、poster等其他属性。输入<source src="my-video.mp4" type="video/mp4">，这里的my-video.mp4是MP4视频源文件的名称。输入<source src="my-video.webm" type="video/webm">，这里的my-video.webm是WebM视频源文件的名称。如有需要，为不支持HTML5视频和Flash的浏览器提供备用信息和链接。输入</video>结束video元素。将下面第一段代码添加到页面中，从而初始化一个视频播放器。为音频添加备用Flash
获取视频资源。输入<audio controls>开始audio元素（含默认控件集）。输入<source src="my-audio.ogg" type="audio/ogg">，这里的my-audio.ogg指向.ogg音频源文件。输入<source src="my-audio.mp3" type="audio/mp3">，这里的my-audio.mp3指向.mp3音频源文件。如有需要，为不支持HTML5音频或者Flash的浏览器提供备用信息和链接。输入</audio>结束audio元素。将下面第二段代码添加到页面中，从而初始化一个音频播放器。将script放到</body>的前面，哪怕页面拥有视频以外的其他内容。<script>$('video').mediaelementplayer();</script><script>$('audio').mediaelementplayer();</script>也可以使用下面这段代码，同时包括音视频。
<script>$('audio,video').mediaelementplayer();</script> 注：如果没为视频指定preload="metadata"也没有指定海报图像，那么视频的Flash版本会显示一个黑色的矩形而不是视频的一帧。不过当视频开始播放时，黑色的矩形就会被视频本身替代。 如果在video开始标签中指定了width和height，那么视频的Flash版本就有可能显示黑边。不过如果不指定尺寸，视频会在一开始呈现一个比正常尺寸要大的区域，然后再缩小到正常大小。 一些Flash播放解决方案：Video.js、JW Player、Flowplayer等。JW Player和Flowplayer的免费版本会在媒体播放器上显示它们的标识。
当Flash不起作用时 由于Flash的安全设置，当在自己的电脑上测试Flash播放器（即所有的文件都位于自己的电脑上）时，都有可能无法播放媒体文件。有一种解决办法就是将MP3和MP4文件上传到Web服务器，并在HTML中使用绝对路径引用它们。
HTML and CSS 读书笔记
本文为本人原创，采用 知识共享 “署名-非商业性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”许可协议 进行许可。 本作品可自由复制、传播及基于本作品进行演绎创作。如有以上需要，请通过E-mail等方式告知，并在文章开头明显位置加上署名 [ 丁学文.Blog ] 、原文链接及许可协议信息，并明确指出修改（如有），不得用于商业用途。谢谢合作。 详情请点击查看许可协议及版权声明具体内容。
博主联系方式： E-mail： xuewending1995@Gmail.com [ 请注明来意 ] GitHub： Levi.GitHub
新闻热点
疑难解答
