》HTML5 在浏览器中播放视频
HTML5出现之前，我们想要在浏览器中进行视频的播放是很麻烦的，需要使用到浏览器中的插件，其中以flash插件为主，但是在HTML5中规定了浏览器可以播放视频的标准：使用video标签可以控制播放给定格式的视频，因为HTML是标记语言，它所有的功能实现都是以标签为主，所以播放视频当然也使用了标签语法
HTML5 支持的视频格式
HTML5 规定了可以通过 video 标签来包含要播放的视频的标准方法。但遗憾的是在这个标准中只是规定了几种视频格式标准，并不是支持所有主流的视频格式，video标签目前只支持三种视频格式：
格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
Ogg | 不支持 | 3.5 | 10.5 | 5.0 | 不支持 |
MPEG | 9.0 | 不支持 | 不支持 | 5.0 | 3.0 |
WebM | 不支持 | 4.0 | 10.6 | 6.0 | 不支持 |
三种视频格式说明：
格式 | MIME-type | 说明 |
|---|---|---|
MPEG | video/mp4 | 使用 H.264 视频编码 和 AAC 音频编码的 MPEG 4 视频文件 |
Ogg | video/ogg | 使用 Theora 视频编码 和 Vorbis 音频编码 的 Ogg 视频文件 |
WebM | video/webm | 使用 VP8 视频编码 和 Vorbis 音频编码的 WebM 视频文件 |
HTML5 视频播放实例
我们在学习任何新东西的时候，直接从实例入手，先亲自动手操作他的整个运作过程，这样对于我们对新事物的认识和理解是非常深刻的，对于HTML5 播放视频，我们先看他如何编写，如下代码：
一、使用简单格式的video标签播放视频
代码语言：javascript复制<video src="movie.ogg"></video> <!-- src 属性表示视频文件的URL路径 -->二、使用带有播放控件的video标签播放视频
代码语言：javascript复制<video src="movie.ogg" controls="controls"></video> <!-- controls 属性供添加播放、暂停和音量控件 -->
<video src="movie.ogg" width="320" height="240" controls="controls"></video> <!-- 带有自定义长宽的视频播放窗口 -->如果没有设置长宽属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
三、使用video标签的浏览器兼容提示功能
代码语言：javascript复制<video src="movie.ogg" width="320" height="240" controls="controls">
您的浏览器不支持video标签
</video>在<video> 与 </video> 之间插入的内容可以在不支持 video 元素的浏览器中直接显示出来，但是不建议这样使用，建议开发者使用JS提前判断浏览器的兼容性。
四，使用video标签和source标签来提高浏览器播放视频的兼容性
代码语言：javascript复制<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
</video>在上面其他的例子中我们使用了一个 Ogg 的视频文件，它只适用于在Firefox、Opera 以及 Chrome 浏览器中进行播放。要想在 Safari 浏览器中进行播放，需要使用到MPEG4 类型 的视频文件 ；video 标签允许包含多个 source 标签。source 标签可以链接不同的视频文件。浏览器将会在这些source 标签引入的视频文件中 使用第一个可识别的视频格式进行播放。
》HTML5 video标签的属性
属性名 | 属性值 | 描述 |
|---|---|---|
autoplay | autoplay | 如果在video标签中使用该属性，则视频在加载完成后马上播放 |
controls | controls | 如果使用该属性，则向用户显示控件，比如播放按钮、播放进度等 |
height | pixels | 设置视频播放器的高度 |
loop | loop | 如果使用该属性，则当视频文件完成播放后会再次开始重复播放 |
preload | preload | 如果使用该属性，则视频在页面加载时就开始进行加载，并预先准备好播放，如果使用 "autoplay"，则忽略该属性 |
src | url | 要播放的视频的 URL地址 |
width | pixels | 设置视频播放器的宽度 |
》HTML5 使用DOM控制Video标签
在HTML中，它其中包含的所有标签元素，从DOM角度来看他们都有三大要素：属性、方法、事件；HTML5 <video> 标签和其他HTML标签一样也同样拥有方法、属性和事件。
video 标签中的方法用于控制视频的播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被我们动态的读取和设置。其中的 DOM 事件能够在视频开始播放、视频已暂停播放、视频已停止播放等状态时通知我们，我们利用事件回调函数进行相应的业务处理。
使用DOM控制Video简单实例：读取并设置他的属性、调用方法、监听开始播放事件
代码语言：javascript复制<!DOCTYPE html>
<html>
<body>
<div style="text-align:center;">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeNormal()">中</button>
<button onclick="makeSmall()">小</button>
<br />
<video id="video" width="420" style="margin-top:15px;">
<source src="/upload/video/video_example.mp4" type="video/mp4" />
<source src="/upload/video/video_example.ogg" type="video/ogg" />
您的浏览器不支持Video标签
</video>
</div>
<script type="text/javascript">
var demoVideo=document.getElementById("video"); //使用DOM获取video对象
function playPause() {
if (demoVideo.paused) //读取video播放状态属性
demoVideo.play(); //调用video的方法，开始播放
else
demoVideo.pause(); //调用video的方法，暂停播放
}
function makeBig() {
demoVideo.width=560; //设置video宽度属性
}
function makeSmall() {
demoVideo.width=320;
}
function makeNormal() {
demoVideo.width=420;
}
</script>
</body>
</html>》Video标签中的方法、属性以及事件列表
列表中列出了当今主流浏览器支持的video标签的方法、属性和事件，在下列列表的属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。其他属性在视频的元数据已加载后才可使用；对于每个属性、方法和事件的使用示例请参考《HTML 参考手册》
属性 | 方法 | 事件 |
|---|---|---|
currentSrc | play() | play |
currentTime | pause() | pause |
videoWidth | load() | progress |
videoHeight | error | |
duration | timeupdate | |
ended | ended | |
error | abort | |
paused | empty | |
muted | emptied | |
seeking | waiting | |
volume | loadedmetadata | |
height | ||
width |
