您的位置：首页 > Web前端 > HTML5

HTML5权威指南笔记：34-使用多媒体

2017-11-02 17:39 435 查看

1 使用video元素

video元素可以在网页里嵌入视频内容。

video元素
元素类型流/短语
允许具有的父元素任何能包含流或短语元素的元素
局部属性autoplay 、preload 、controls 、loop 、poster 、height、width 、muted 、src
内容source和track元素，以及短语和流内容
标签用法开始和结束标签
是否为HTML5新增是
在HTML5中的变化无
习惯样式无
例子：

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm"
autoplay controls preload="none" muted>
<!--这里写浏览器不支持video时的处理 -->
</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：请求浏
4000
览器尽快下载整个视频。浏览器可以忽略这个诮求。这是默认行为。

1.2 显示占位图像

<!--poster属性指定占位图像-->
<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/TheoraOggTheora是一种开放、免版税和无专利约束的格式Opera 、Chrome 、Firefox
MP4/H.264此格式当前可以免费使用到2015年，因为许可方已经公开放弃了常规的分发收费计划Internet Explorer 、Chrome 、Safari
使用source元素来指定格式

source元素
元素类型无
允许具有的父元素无
局部属性video 、audio
内容src 、type 、media
标签用法虚元素形式
是否为HTML5新增是
在HTML5中的变化无
习惯样式无
例子：

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</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中的变化无
习惯样式无
例子：

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</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(<type>)获取浏览器能否播放特定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属性的值数值
例子：获取媒体元素的基本信息

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<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>Property</th><th>Value</th></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 +=
"<tr><td>" + propertyNames[i] + "</td><td>" +
mediaElem[propertyNames[i]] + "</td></tr>";
}
</script>
</body>
</html>


3.2 评估回放能力

canPlayType属性所允许的值：

＂＂ （空字符串）：浏览器无法播放该媒体类型。

maybe：浏览器也许可以播放该媒体类型。

probably：浏览器有相当把握能播放该媒体类型。

例子：使用canPlayType方法判断浏览器支持的媒体类型

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<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>Property</th><th>Value</th></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 +=
"<tr><td>" + mediaTypes[i] + "</td><td>" + playable + "</td></tr>";

if (playable == "probably") {
mediaElem.src = mediaFiles[i];
}
}
</script>
</body>
</html>


3.3 控制媒体回放

HTMLMediaElement对象的回放成员：

成员说明返回值
currentTime返回媒体文件当前的回放点数值
duration返回媒体文件的总时长数值
ended如果媒体文件已经播放完毕则返回true布尔值
pause()暂停媒体回放void
paused如果回放暂停就返回true , 否则返回false布尔值
play()开始回放媒体void
例子：用HTMLMediaElement属性获取媒体回放详情

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<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>Property</th><th>Value</th></tr>
</table>
<div>
<button id="pressme">Press Me</button>
</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 +=
"<tr><td>" + propertyNames[i] + "</td><td>" +
mediaElem[propertyNames[i]] + "</td></tr>";
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航