HTML5权威指南笔记：34-使用多媒体
1 使用video元素
video元素可以在网页里嵌入视频内容。
| video元素 | |
|---|---|
| 元素类型 | 流/短语 |
| 允许具有的父元素 | 任何能包含流或短语元素的元素 |
| 局部属性 | autoplay 、preload 、controls 、loop 、poster 、height、width 、muted 、src |
| 内容 | source和track元素，以及短语和流内容 |
| 标签用法 | 开始和结束标签 |
| 是否为HTML5新增 | 是 |
| 在HTML5中的变化 | 无 |
| 习惯样式 | 无 |
例子：
<html>
<head>
<title>Exampletitle>
head>
<body>
<video width="360" height="240" src="timessquare.webm"
autoplay controls preload="none" muted>
video>
body>
html>video元素的属性：
- autoplay：如果存在，此属性会使浏览器尽可能立刻开始播放视频。
- preload：告诉浏览器是否要预先载人视频。详情请参见下一节。
- controls：除非此属性存在，否则浏览器不会显示播放控件。
- loop：如果存在，此屈性会让浏览器反复播放视频。
- poster：指定在视频数据载入时显示的图片。详情请参见1.2节。
- height：指定视频的高度。
- width：指定视频的宽度。
- muted：如果此属性存在，视频从一开始就会处千静音状态。
- src：指定要显示的视频。详情请参见1.3节.
1.1 预先加载视频
preload属性所允许的值：
1. none：用户开始播放之前不会载入视频。
2. metadata：用户开始播放之前只能载入视频的元数据（宽度、高度、第一帧、长度和其他此类信息）。
3. auto：请求浏览器尽快下载整个视频。浏览器可以忽略这个诮求。这是默认行为。
1.2 显示占位图像
<video width="360" height="240" src="timessquare.webm"
controls preload="none" poster="poster.png">
Video cannot be displayed
video>1.3 指定视频来源（和格式）
浏览器重点支持的视频格式：
| 格式 | 说明 | 支持 |
|---|---|---|
| WebM | 此格式由谷歌提供支持，目标是创建一个无专利约束，免版税的格式。MP4/H.264格式一方的人士已经公开寻求使用专利池来对WebM提起诉讼（或者至少让人们因为担心而不再使用它） | Opera 、Chrome 、Firefox |
| Ogg/Theora | OggTheora是一种开放、免版税和无专利约束的格式 | Opera 、Chrome 、Firefox |
| MP4/H.264 | 此格式当前可以免费使用到2015年，因为许可方已经公开放弃了常规的分发收费计划 | Internet Explorer 、Chrome 、Safari |
使用source元素来指定格式
| source元素 | |
|---|---|
| 元素类型 | 无 |
| 允许具有的父元素 | 无 |
| 局部属性 | video 、audio |
| 内容 | src 、type 、media |
| 标签用法 | 虚元素形式 |
| 是否为HTML5新增 | 是 |
| 在HTML5中的变化 | 无 |
| 习惯样式 | 无 |
例子：
<html>
<head>
<title>Exampletitle>
head>
<body>
<video controls width="360" height="240">
<source src="timessquare.webm" type="video/webm" />
<source src="timessquare.ogv" type="video/ogg" />
<source src="timessquare.mp4" type="video/mp4" />
Video cannot be displayed
video>
body>
html>
1.4 track元素
track元素提供了一套视频相关内容的实现机制。这些内容包括字幕、说明和章节标题。但目前还没有哪一种主流浏览器支持这个元素咒
| track元素 | |
|---|---|
| 元素类型 | 无 |
| 允许具有的父元素 | video 、audio |
| 局部属性 | kind 、src 、srclang 、label 、default |
| 内容 | 无 |
| 标签用法 | 虚元素形式 |
| 是否为HTML5新增 | 是 |
| 在HTML5中的变化 | 无 |
| 习惯样式 | 无 |
2 使用audio 元素
audio元素允许你在HTML文档里嵌入音频内容。
| audio元素 | |
|---|---|
| 元素类型 | 流／短语 |
| 允许具有的父元素 | 任何能包含流或短语元素的元素 |
| 局部属性 | autoplay 、preload 、controls 、loop 、muted 、src |
| 内容 | source和track元素，以及短语和流内容 |
| 标签用法 | 开始和结束标签 |
| 是否为HTML5新增 | 是 |
| 在HTML5中的变化 | 无 |
| 习惯样式 | 无 |
例子：
<html>
<head>
<title>Exampletitle>
head>
<body>
<audio controls autoplay>
<source src="mytrack.ogg" />
<source src="mytrack.mp3" />
<source src="mytrack.wav" />
Audio content cannot be played
audio>
body>
html>3 通过DOM 操作嵌入式媒体
3.1 获得媒体信息
HTMLMediaElement对象的基本成员：
| 成员 | 说明 | 返回 |
|---|---|---|
| autoplay | 获取或设置autoplay属性是否存在 | 布尔值 |
| canPlayType( |
获取浏览器能否播放特定MIME类型的提示 | 字符串 |
| currentSrc | 获取当前的来源 | 字符串 |
| controls | 获取或设置controls属性是否存在 | 布尔值 |
| defaultMuted | 获取或设置muted属性一开始是否存在 | 布尔值 |
| loop | 获取或设置loop属性是否存在 | 布尔值 |
| preload | 获取或设置preload属性的值 | 字符串 |
| src | 获取或设置src属性的值 | 字符串 |
| volume | 获取或设置音量，范围从0.0到1.0 | 数值 |
HTMLVideoElement对象定义的属性
| 成员 | 说明 | 返回 |
|---|---|---|
| height | 获取或设置height属性的值 | 数值 |
| poster | 获取或设置poster属性的值 | 字符串 |
| videoHeight | 获取视频的原始高度 | 数值 |
| videoWidth | 获取视频的原始宽度 | 数值 |
| width | 获取或设置width属性的值 | 数值 |
例子：获取媒体元素的基本信息
<html>
<head>
<title>Exampletitle>
<style>
table {border: thin solid black; border-collapse: collapse;}
th, td {padding: 3px 4px;}
body > * {float: left; margin: 2px;}
style>
head>
<body>
<video id="media" controls width="360" height="240" preload="metadata">
<source src="timessquare.webm"/>
<source src="timessquare.ogv"/>
<source src="timessquare.mp4"/>
Video cannot be displayed
video>
<table id="info" border="1">
<tr><th>Propertyth><th>Valueth>tr>
table>
<script>
var mediaElem = document.getElementById("media");
var tableElem = document.getElementById("info");
var propertyNames = ["autoplay", "currentSrc", "controls", "loop", "muted",
"preload", "src", "volume"];
for (var i = 0; i < propertyNames.length; i++) {
tableElem.innerHTML +=
"" + propertyNames[i] + " " +
mediaElem[propertyNames[i]] + " 3.2 评估回放能力
canPlayType属性所允许的值：
- ＂＂ （空字符串）：浏览器无法播放该媒体类型。
- maybe：浏览器也许可以播放该媒体类型。
- probably：浏览器有相当把握能播放该媒体类型。
例子：使用canPlayType方法判断浏览器支持的媒体类型
<html>
<head>
<title>Exampletitle>
<style>
table {border: thin solid black; border-collapse: collapse;}
th, td {padding: 3px 4px;}
body > * {float: left; margin: 2px;}
style>
head>
<body>
<video id="media" controls width="360" height="240" preload="metadata">
Video cannot be displayed
video>
<table id="info" border="1">
<tr><th>Propertyth><th>Valueth>tr>
table>
<script>
var mediaElem = document.getElementById("media");
var tableElem = document.getElementById("info");
var mediaFiles = ["timessquare.webm", "timessquare.ogv", "timessquare.mp4"];
var mediaTypes = ["video/webm", "video/ogv", "video/mp4"];
for (var i = 0; i < mediaTypes.length; i++) {
var playable = mediaElem.canPlayType(mediaTypes[i]);
if (!playable) {
playable = "no";
}
tableElem.innerHTML +=
"" + mediaTypes[i] + " " + playable + " 3.3 控制媒体回放
HTMLMediaElement对象的回放成员：
| 成员 | 说明 | 返回值 |
|---|---|---|
| currentTime | 返回媒体文件当前的回放点 | 数值 |
| duration | 返回媒体文件的总时长 | 数值 |
| ended | 如果媒体文件已经播放完毕则返回true | 布尔值 |
| pause() | 暂停媒体回放 | void |
| paused | 如果回放暂停就返回true , 否则返回false | 布尔值 |
| play() | 开始回放媒体 | void |
例子：用HTMLMediaElement属性获取媒体回放详情
<html>
<head>
<title>Exampletitle>
<style>
table {border: thin solid black; border-collapse: collapse;}
th, td {padding: 3px 4px;}
body > * {float: left; margin: 2px;}
div {clear: both;}
style>
head>
<body>
<video id="media" controls width="360" height="240" preload="metadata">
<source src="timessquare.webm"/>
<source src="timessquare.ogv"/>
<source src="timessquare.mp4"/>
Video cannot be displayed
video>
<table id="info" border="1">
<tr><th>Propertyth><th>Valueth>tr>
table>
<div>
<button id="pressme">Press Mebutton>
div>
<script>
var mediaElem = document.getElementById("media");
var tableElem = document.getElementById("info");
document.getElementById("pressme").onclick = displayValues;
displayValues();
function displayValues() {
var propertyNames = ["currentTime", "duration", "paused", "ended"];
tableElem.innerHTML = "";
for (var i = 0; i < propertyNames.length; i++) {
tableElem.innerHTML +=
"" + propertyNames[i] + " " +
mediaElem[propertyNames[i]] + "