HTML5学习，常用常记（Video，Audio，Input）

检测您的浏览器是否支持 HTML5 视频；

<video width="320" height="240" controls>
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
	您的浏览器不支持 HTML5 video 标签。
</video>

• <video> 元素提供了 播放、暂停和音量控件来控制视频。
• 同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
• <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
• <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg

• MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
• WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
• Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

<div style="text-align:center"> 
	<button onclick="playPause()">播放/暂停</button> 
	<button onclick="makeBig()">放大</button>
	<button onclick="makeSmall()">缩小</button>
	<button onclick="makeNormal()">普通</button>
	<br> 
	<video id="video1" width="420">
		<source src="mov_bbb.mp4" type="video/mp4">
		<source src="mov_bbb.ogg" type="video/ogg">
		您的浏览器不支持 HTML5 video 标签。
	</video>
</div> 

<script> 
	var myVideo=document.getElementById("video1"); 
	function playPause(){ 
		if (myVideo.paused) 
			myVideo.play(); 
		else 
			myVideo.pause(); 
	}
	function makeBig(){ 
		myVideo.width=560; 
	} 
	function makeSmall(){ 
		myVideo.width=320; 
	} 
	function makeNormal(){ 
		myVideo.width=420; 
	} 
</script> 

HTML 音频/视频 DOM 参考手册；

互联网上的音频

• 直到现在，仍然不存在一项旨在网页上播放音频的标准。
• 今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
• HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

<audio controls>
	<source src="horse.ogg" type="audio/ogg">
	<source src="horse.mp3" type="audio/mpeg">
	您的浏览器不支持 audio 元素。
</audio>

<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg；

HTML5 新的 Input 类型

• HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

<form action="demo-form.php">
  选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  <input type="submit">
</form>

<form action="demo-form.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>

<form action="demo-form.php">
  生日 (日期和时间)（UTC时间）: <input type="datetime" name="bdaytime">
  <input type="submit">
</form>

<form action="demo-form.php">
  生日 (日期和时间)（无时区）: <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>

<form action="demo-form.php">
  E-mail: <input type="email" name="usremail">
  <input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9  及更早 IE 版本不支持 type="email" 。</p>            

<form action="demo-form.php">
  生日 ( 月和年 ): <input type="month" name="bdaymonth">
  <input type="submit">
</form>

<form action="demo-form.php">
  数量(1到5之间): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
<p><b>注意:</b>Internet Explorer 9 及更早 IE 版本不支持 type="number" 。</p>

使用下面的属性来规定对数字类型的限定：

属性	描述
disabled	规定输入字段是禁用的
max	规定允许的最大值
maxlength	规定输入字段的最大字符长度
min	规定允许的最小值
pattern	规定用于验证输入字段的模式
readonly	规定输入字段的值无法修改
required	规定输入字段的值是必需的
size	规定输入字段中的可见字符数
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值

<form action="demo-form.php" method="get">
	Points: <input type="range" name="points" min="1" max="10">
	<input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9 及更早 IE 版本不支持 type="range"。</p>

请使用下面的属性来规定对数字类型的限定：

• max - 规定允许的最大值
• min - 规定允许的最小值
• step - 规定合法的数字间隔
• value - 规定默认值

<form action="demo-form.php">
  Search Google: <input type="search" name="googlesearch"><br>
  <input type="submit">
</form>

<form action="demo-form.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>

<form action="demo-form.php">
  选择时间（无时区）: <input type="time" name="usr_time">
  <input type="submit">
</form>

<form action="demo-form.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本不支持 type="url" 。</p>

<form action="demo-form.php">
  选择周（无时区）: <input type="week" name="year_week">
  <input type="submit">
</form>