博客简介
本篇博客将会介绍HTML5中视频< video >的用法：
- 视频简介以及格式
- < video > 标签的属性
- 基本用法举例
- < video >的DOM方法
视频简介以及格式
Web 上的视频
直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。
video 元素支持三种视频格式：
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
- MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
不同浏览器的支持
格式 | IE | Firefox | Opera | Chrome | Safari |
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
< video > 标签的属性
HTML5通过< video >标签插入视频标记,< video >标签的属性有：
属性 | 值 | 描述 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
height | pixels | 设置视频播放器的高度。 |
controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
基本用法举例
使用方法
<video src="E:\GIFMaker\Workplace\刚体小球.mp4" controls="controls">
Your browser does not support the video tag.
</video>
兼容
不同的浏览器对视频格式的支持不同，为了兼容不同的浏览器，video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
<video controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie." type="video/WebM">
Your browser does not support the video tag.
</video>< video >的DOM方法
HTML5 - 方法、属性以及事件
HTML5 < video > 元素同样拥有方法、属性和事件。其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，< video > 元素开始播放、已暂停，已停止，等等。
方法 | 属性 | 事件 |
play() | currentSrc | play |
pause() | currentTime | pause |
load() | videoWidth | progress |
canPlayType | videoHeight | error |
| duration | timeupdate |
| ended | ended |
| error | abort |
| paused | empty |
| muted | emptied |
| seeking | waiting |
| volume | loadedmetadata |
| height | |
| width | |
video-DOM方法举例
为视频创建简单的播放/暂停以及调整尺寸控件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video </title>
</head>
<body>
<video id="video" src="E:\GIFMaker\Workplace\刚体小球.mp4" width=400 height=300 style="display: block;">
Your browser does not support the video tag.
</video>
<button onclick="playPause()">播放/暂停</button>
<button onclick="bigger()">放大</button>
<button onclick="normal()">正常</button>
<button onclick="smaller()">缩小</button>
<script type="text/javascript">
var video;
window.onload=function()
{
video=document.getElementById("video");
alert(video);
}
function playPause()//暂停或播放
{
if(video.paused)//现在是播放的
{
video.play();//暂停
}
else video.pause();//播放
}
function bigger()
{
video.width=1000;
}
function normal()
{
video.width=400;
}
function smaller()
{
video.width=200;
}
</script>
</body>
</html>
