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

最新推荐文章于 2023-09-15 17:18:55 发布

馋雪山丘

最新推荐文章于 2023-09-15 17:18:55 发布

阅读量819

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/u011069189/article/details/78427416

版权

HTML5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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：请求浏览器尽快下载整个视频。浏览器可以忽略这个诮求。这是默认行为。

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/Theora	OggTheora是一种开放、免版税和无专利约束的格式	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>