HTML5视频video

博客简介

本篇博客将会介绍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

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

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>