【4858美高梅】尖端功效多媒体,使用多媒体

By admin in 4858美高梅 on 2019年4月17日

HTML伍 帮忙直接在浏览器中播放音频和录像文件,不须求采纳Abode
Flash这样的插件。

【高端作用】使用多媒体,高端成效多媒体

HTML伍 协助直接在浏览器中播放音频和录制文件,不要求运用Abode
Flash那样的插件。

【4858美高梅】尖端功效多媒体,使用多媒体。1. 使用 video 元素

可以用video 成分在网页里停放录像内容。

4858美高梅 1

其主干用法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用video元素</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" autoplay controls preload="none" muted>
    Video cannot be displayed
</video>
</body>
</html>

此例展现效果如下:

4858美高梅 2

假定浏览器不援救video成分或然不能播放录制那么备用内容(早先和终结标签之内的始末)就会代替它显得。此例中,显示了一段轻易的文书音讯,但常用的本事是提供使用费HTML5技巧(例如Flash)的摄像播放,以支撑旧版的浏览器。

video 成分有那3本性质,下表列出了它们:

4858美高梅 3

 

壹.一 预先加载录像

preload属性告诉浏览器:当它加载完包涵video成分的网页后,是或不是相应主动地去下载摄像。预先加载摄像裁减了用户播放时的起来延迟,但如果用户不观看摄像则会招致互联网带宽的浪费。下表介绍了这本性格允许设置的值。

 4858美高梅 4

在调控是不是预先加载摄像时,应当权衡用户想要观望摄像的或然性与机关载入录制内容所需求的带宽。自动载入录制会带来更平整的用户体验,但它也许会大大提高经营资金,借使用户并未有见到录制就离开网页,那么那个开销就浪费了。

那本个性的metadata值能够被用来在none和auto值之间建立起适度的平衡。none值的标题在于录制内容会在荧屏上出示为一片空白区域。metadata值会让浏览器获取丰富的消息来向用户呈现录制的首先帧,而无需下载全部内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将none和metadata值用于preload属性</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" controls preload="none" muted>
    Video cannot be displayed
</video>
<video width="360" height="240" src="timessquare.webm" controls preload="metadata" muted>
    Video cannot be displayed
</video>
</body>
</html>

此例显示了在同3个文书档案里使用none和metadata值,其出示效果如下,能够见见那几个值怎么影响体现给用户的预览画面。

4858美高梅 5

PS:metadata值向用户提供了优秀的预览画面,但要求郑重1些。当用互连网分析工具测试那些性情,发现固然只请求了元数据,可是有个别浏览器实际上会先行下载整个摄像。平心而论,浏览器能够自由选取是不是忽略preload属性所发表的偏好。然而,借使急需限制带宽的消耗,poster属性也许更胜1些。

 

一.二 突显占位图像

能够用poster属性向用户显示一张占位图像。那张图像会突显在录像的职位,直至用户开播。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用poster属性来指定占位图像</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" controls preload="none" poster="poster.png">
    Video cannot be displayed
</video>
<img src="poster.png" />
</body>
</html>

那边为摄像文件的首先帧做了一张荧屏截图,然后在它上边叠加了单词
Poster(海报)。那张图像包蕴了摄像控件,以此唤起用户那刘志江报代表1段录制剪辑。那里还在此例中投入了贰个img成分,以示范video成分会不加更改地展现那孙东海报图像。

4858美高梅 6

 

一.叁 设置录像尺寸

假如省略width和height属性,浏览器就会显得2个不大的占位成分,并在元数据可用时(相当于当用户早先广播,或然preload属性被设为metadata时)把它调节到录像原始尺寸的尺寸。这大概会发生颤动感,因为页面布局须求调动以包容摄像。

设若钦定width和height属性,浏览器会维持摄像的长宽比(不必忧虑录制会向任壹方向拉伸)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用width和height属性</title>
    <style>
        video {background-color: gray;border: medium double green;}
    </style>
</head>
<body>
<video width="600" height="240" src="timessquare.webm" controls preload="auto">
    Video cannot be displayed
</video>
</body>
</html>

此例中装置的width属性与height属性的百分比是平衡的。那里还给video成分应用了多少个样式,以彰显浏览器为了保障录制的长度宽度高,只会动用部分派遣给该因素的半空中。

4858美高梅 7

 

①.四 内定摄像来自(和格式)

钦命录制最轻便易行的法子是应用 src 属性,并提供所需录制文件的UENCOREL。

能够见到近日的例证中,用src属性钦点了文本 timessquare.webm。这是1个用WebM
格式编码的文本。方今还向来不哪1种录像格式被广泛协助,要是想将录像推向各个种种的HTML伍用户,将要抓实以二种格式编码录像的预备。

三个倒霉的事实是,未有哪壹种格式能够用于全体的主流浏览器。因而,必须以多种格式编码摄像,直到出现同样一种格式甘休。能够利用source成分来钦定三个格式。

4858美高梅 8

上面例子展现了何等运用 source成分来向浏览器提供备选录像格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用source元素</title>
</head>
<body>
<video width="360" height="240" controls preload="auto">
    <source src="timessquare.webm" />
    <source src="timessquare.ogv" />
    <source src="timessquare.mp4" />
    Video cannot be displayed
</video>
</body>
</html>

浏览器会沿着列表顺序搜索它亦可播放的录像文件。那或然会吸引多少个服务器请求以博得各个文件的附加音信。浏览器判定它是或不是能播放有个别摄像的根据之壹是服务器重回的MIME类型。能够透过给source成分应用type属性来提醒用户,方法是在内部钦定文件的MIME类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在source元素上应用type属性</title>
</head>
<body>
<video width="360" height="240" controls preload="auto">
    <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>

PS:media属性向浏览器指明该摄像最适合在那种设备上播报。

 

2. 使用 audio 元素

audio 成分允许在HTML文书档案里停放音频内容。

4858美高梅 9

能够看到audio和video成分有点不清共同点。上面的例证呈现了audio成分的用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用audio元素</title>
</head>
<body>
<audio controls src="P!NK - Just Give Me a Reason.mp3" autoplay>
    Audio content cannot be played
</audio>
</body>
</html>

也得以应用source元平素提供三种格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用audio元素</title>
</head>
<body>
<audio controls autoplay>
    <source src="P!NK - Just Give Me a Reason.ogg" />
    <source src="P!NK - Just Give Me a Reason.mp3" />
    <source src="P!NK - Just Give Me a Reason.wav" />
    Audio content cannot be played
</audio>
</body>
</html>

那三个例证都选拔了controls属性,那样浏览器就会对用户显示暗中认可的播放控件。它们在差异的浏览器中外观各异,下边是在火狐浏览器中的展现效果:

4858美高梅 10

 

3. 透过 DOM 操作嵌入式媒体

audio 和 video
成分有着异常的大的相似性,所以HTMLMediaElement对象在DOM里为它们统一定义了基本功用。audio元素在DOM里由HTML奥迪(Audi)oElement对象所代表,但此目的未有概念分歧于HTMLMediaElement的额外作用。video元素由HTMLVideoElement对象所代表,而它定义了一些外加的质量。

PS:
audio和video成分的相似度是如此之高,以至于它们唯1差别仅仅是在荧屏上占有的长空尺寸。audio成分不会攻陷一大块显示器空间来彰显摄像图像。事实上,甚至足以用audio元向来播音录制文件(当然,这么做只可以听获得配乐),也得以用video成分来播放音频文件(但是录制展现区域会保持空白)。那看起来很意外,但实则是实惠的。

 

3.一 得到媒体消息

HTMLMediaElement
对象定义了多数成员,能够用它们来获取和更动成分及其关系媒体的消息。

4858美高梅 11

对象定义了下表中展示的额外属性:

4858美高梅 12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取媒体元素的基本信息</title>
    <style>
        table {border: thin solid orange;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    <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>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<script type="application/javascript">
    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>

此例的剧本在一张表格中显得了累累脾气的值,地点就在video成分的边沿,显示了什么样使用部分HTMLMediaElement属性来获得媒体成分的主题消息。

 4858美高梅 13

 

3.2 评估回看能力

canPlayType
方法用来打探浏览器是不是能够播放特定的媒体格式。那一个方法会重回下表里列出的里边1个值:

4858美高梅 14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用canPlayType方法</title>
    <style>
        table {border: thin solid orange;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    Video cannot be displayed
</video>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<script type="application/javascript">
    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;
        }
    }
</script>
</body>
</html>

此例的脚本中,用canPlayType 方法评估了一组媒体类型。如若接收多个probably
答复,就会安装video成分的src属性值。通过那种方法,此例在一张表格里记录了二种媒体类型的答问。

用那种方法选拔媒体时须求多加小心,因为浏览器评估本身格式播放手艺的办法各区别样。

4858美高梅 15

很难评论浏览器在应对中所表现出的分化性。有太多因素使它们不能够提交分明的答案,但它们在评估帮忙时行使不一致方法那一点意味着相应丰裕坐卧不安的选取canPlayType方法。

 

三.三 调节媒体重播

HTMLMediaElement
对象定义了广大分子,它们能够调节回看和获得重放新闻。这几个属性和措施如下表所示:

4858美高梅 16

上面包车型地铁事例显示了怎么样使用表格中的属性来博取重放音信:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用HTMLMediaElement属性获取媒体回放详情</title>
    <style>
        table {border: thin solid black;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
        div {clear: both;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    <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>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<div>
    <button id="pressme">Press Me</button>
</div>
<script type="application/javascript">
    var mediaElem = document.getElementById("media");
    var tableElem = document.getElementById("info");

    document.getElementById("pressme").onclick = function(){
        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>

此例包罗三个button成分,当它被按下后会使表格呈现出currentTime、duration、paused
和 ended 属性的此时此刻值。

4858美高梅 17

可以利用回看方法代替私下认可的媒体空间,演示例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换默认的媒体控件</title>
</head>
<body>
<video id="media" width="360" height="240" preload="metadata">
    <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>
<div>
    <button>Play</button>
    <button>Pause</button>
</div>
<script type="application/javascript">
    var mediaElem = document.getElementById("media");
    var buttons = document.getElementsByTagName("button");
    for (var i=0;i<buttons.length;i++){
        buttons[i].onclick = handleButtonPress;
    }
    function handleButtonPress(e){
        switch(e.target.innerHTML){
            case 'Play':
                mediaElem.play();
                break;
            case 'Pause':
                mediaElem.pause();
        }
    }
</script>
</body>
</html>

此例中,省略了video成分的controls属性,并用点击button成分触发的play和pause方法来运维和终止媒体重播。

4858美高梅 18

 

HTML5帮助间接在浏览器中播放音频和摄像文件,不须要选用Abode Flash那样的插件。

  1. 使用 vide…

【HTML伍】使用多媒体,html5多媒体

HTML伍 援助直接在浏览器中播放音频和录制文件,不须求动用Abode
Flash这样的插件。

1. 使用 video 元素

能够用video 成分在网页里停放录制内容。

4858美高梅 19

其宗旨用法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用video元素</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" autoplay controls preload="none" muted>
    Video cannot be displayed
</video>
</body>
</html>

此例呈现效果如下:

4858美高梅 20

比方浏览器不帮忙video成分恐怕不能播放录像那么备用内容(起始和终结标签之内的始末)就会代替它显得。此例中,展现了一段简单的公文新闻,但常用的才能是提供使用费HTML伍手艺(例如Flash)的录像播放,以匡助旧版的浏览器。

video 成分有成都百货上千品质,下表列出了它们:

4858美高梅 21

 

一.壹 预先加载录像

preload属性告诉浏览器:当它加载完包含video成分的网页后,是不是相应主动地去下载摄像。预先加载录像减弱了用户播放时的开头延迟,但假如用户不见到录像则会促成互连网带宽的荒废。下表介绍了这一个性情允许设置的值。

 4858美高梅 22

在支配是或不是预先加载摄像时,应当权衡用户想要阅览摄像的恐怕性与活动载入录制内容所供给的带宽。自动载入录像会带来更平整的用户体验,但它大概会大大进步经营资金财产,要是用户并没有看到摄像就离开网页,那么这个资金就浪费了。

那个天性的metadata值可以被用来在none和auto值之间建立起适度的平衡。none值的标题在于摄像内容会在显示器上展现为一片空白区域。metadata值会让浏览器获取丰富的新闻来向用户体现摄像的首先帧,而无需下载全部内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将none和metadata值用于preload属性</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" controls preload="none" muted>
    Video cannot be displayed
</video>
<video width="360" height="240" src="timessquare.webm" controls preload="metadata" muted>
    Video cannot be displayed
</video>
</body>
</html>

此例展示了在同3个文书档案里应用none和metadata值,其出示效果如下,能够看来这个值什么影响突显给用户的预览画面。

4858美高梅 23

PS:metadata值向用户提供了了不起的预览画面,但须要慎重一些。当用互连网分析工具测试那性情情,发现固然只请求了元数据,但是多少浏览器实际上会先行下载整个录像。平心而论,浏览器能够自由选择是还是不是忽略preload属性所表明的偏好。不过,借使急需限制带宽的消耗,poster属性可能更胜1些。

 

1.2 显示占位图像

能够用poster属性向用户显示一张占位图像。那张图像会展现在录制的地点,直至用户开首播报。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用poster属性来指定占位图像</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" controls preload="none" poster="poster.png">
    Video cannot be displayed
</video>
<img src="poster.png" />
</body>
</html>

此地为录像文件的率先帧做了一张显示器截图,然后在它上边叠加了单词
Poster(海报)。那张图像包含了录制控件,以此唤起用户那刘锋报代表1段录制剪辑。那里还在此例中出席了1个img成分,以示范video成分会不加更动地出示那王冰报图像。

4858美高梅 24

 

一.3 设置摄像尺寸

倘若省略width和height属性,浏览器就会展现一个极小的占位成分,并在元数据可用时(也正是当用户起始播报,或然preload属性被设为metadata时)把它调控到录制原始尺寸的大大小小。那大概会生出颤动感,因为页面布局需求调控以包容摄像。

若是钦命width和height属性,浏览器会保持录制的长度宽度比(不必顾忌录制会向任壹方向拉伸)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用width和height属性</title>
    <style>
        video {background-color: gray;border: medium double green;}
    </style>
</head>
<body>
<video width="600" height="240" src="timessquare.webm" controls preload="auto">
    Video cannot be displayed
</video>
</body>
</html>

此例中装置的width属性与height属性的百分比是失衡的。那里还给video成分应用了八个体制,以显示浏览器为了维持录像的长度宽度高,只会采用一些打发给该因素的空中。

4858美高梅 25

 

一.肆 钦赐录制来自(和格式)

点名录像最简便易行的措施是采纳 src 属性,并提供所需摄像文件的U君越L。

能够看看眼下的例证中,用src属性钦定了文件 timessquare.webm。那是三个用WebM
格式编码的公文。近来还没有哪一类录像格式被周围帮助,假诺想将摄像推向种种各种的HTML5用户,将要做好以多样格式编码摄像的准备。

一个不幸的真实景况是,未有哪一种格式能够用于全体的主流浏览器。因而,必须以多样格式编码录像,直到出现同样一种格式结束。能够行使source成分来内定多少个格式。

4858美高梅 26

下边例子展现了什么样利用 source元从来向浏览器提供备选视频格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用source元素</title>
</head>
<body>
<video width="360" height="240" controls preload="auto">
    <source src="timessquare.webm" />
    <source src="timessquare.ogv" />
    <source src="timessquare.mp4" />
    Video cannot be displayed
</video>
</body>
</html>

浏览器会沿着列表顺序寻觅它可以播放的视频文件。那只怕会掀起多个服务器请求以取得每一种文件的额外新闻。浏览器判别它是还是不是能播放有个别录制的基于之1是服务器重临的MIME类型。能够透过给source成分应用type属性来提醒用户,方法是在里边内定文件的MIME类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在source元素上应用type属性</title>
</head>
<body>
<video width="360" height="240" controls preload="auto">
    <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>

PS:media属性向浏览器指明该录像最适合在那种设备上播报。

 

2. 使用 audio 元素

audio 成分允许在HTML文书档案里放置音频内容。

4858美高梅 27

能够看看audio和video成分有无数共同点。下边的例证展示了audio成分的用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用audio元素</title>
</head>
<body>
<audio controls src="P!NK - Just Give Me a Reason.mp3" autoplay>
    Audio content cannot be played
</audio>
</body>
</html>

也能够选择source成分来提供各个格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用audio元素</title>
</head>
<body>
<audio controls autoplay>
    <source src="P!NK - Just Give Me a Reason.ogg" />
    <source src="P!NK - Just Give Me a Reason.mp3" />
    <source src="P!NK - Just Give Me a Reason.wav" />
    Audio content cannot be played
</audio>
</body>
</html>

那五个例子都利用了controls属性,那样浏览器就会对用户呈现暗中认可的播音控件。它们在分裂的浏览器中外观各异,上面是在火狐浏览器中的呈现效果:

4858美高梅 28

 

叁. 因而 DOM 操作嵌入式媒体

audio 和 video
元素有着一点都不小的相似性,所以HTMLMediaElement对象在DOM里为它们统一定义了基本功效。audio成分在DOM里由HTML奥迪oElement对象所代表,但此目的没有定义分化于HTMLMediaElement的额外功用。video成分由HTMLVideoElement对象所代表,而它定义了有些相当的习性。

PS:
audio和video成分的相似度是那样之高,以至于它们唯壹差别仅仅是在荧屏上攻克的长空尺寸。audio成分不会占用一大块荧屏空间来显示录像图像。事实上,甚至能够用audio成分来播放摄像文件(当然,这么做只好听获得配乐),也能够用video成分来播放音频文件(但是摄像展示区域会保持空白)。那看起来很想获得,但实质上是可行的。

 

三.一 获得媒体新闻

HTMLMediaElement
对象定义了累累分子,可以用它们来博取和修改成分及其关联媒体的消息。

4858美高梅 29

对象定义了下表中显得的额外属性:

4858美高梅 30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取媒体元素的基本信息</title>
    <style>
        table {border: thin solid orange;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    <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>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<script type="application/javascript">
    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>

此例的脚本在一张表格中展现了广大性质的值,地方就在video成分的边沿,体现了何等使用部分HTMLMediaElement属性来赢得媒体成分的大旨新闻。

 4858美高梅 31

 

3.贰 评估重放技艺

canPlayType
方法用来打探浏览器是或不是能够播放特定的媒体格式。那个方法会重返下表里列出的内部一个值:

4858美高梅 32

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用canPlayType方法</title>
    <style>
        table {border: thin solid orange;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    Video cannot be displayed
</video>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<script type="application/javascript">
    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;
        }
    }
</script>
</body>
</html>

此例的本子中,用canPlayType 方法评估了一组媒体类型。如若接受三个probably
答复,就会设置video成分的src属性值。通过那种措施,此例在一张表格里记录了两种媒体类型的答复。

用那种措施选用媒体时须求多加小心,因为浏览器评估自己格式播放技术的主意各分歧样。

4858美高梅 33

很难评论浏览器在答复中所表现出的不1致性。有太多成分使它们十分的小概提交显然的答案,但它们在评估协助时选取不一致措施那或多或少代表相应百倍小心翼翼的利用canPlayType方法。

 

3.3 调节媒体重播

HTMLMediaElement
对象定义了累累分子,它们能够支配重播和获得重放消息。那么些属性和艺术如下表所示:

4858美高梅 34

上面包车型客车例证展示了哪些使用表格中的属性来收获重播音讯:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用HTMLMediaElement属性获取媒体回放详情</title>
    <style>
        table {border: thin solid black;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
        div {clear: both;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    <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>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<div>
    <button id="pressme">Press Me</button>
</div>
<script type="application/javascript">
    var mediaElem = document.getElementById("media");
    var tableElem = document.getElementById("info");

    document.getElementById("pressme").onclick = function(){
        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>

此例包蕴五个button成分,当它被按下后会使表格突显出currentTime、duration、paused
和 ended 属性的当下值。

4858美高梅 35

能够使用回看方法替代暗中同意的媒体空间,演示例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换默认的媒体控件</title>
</head>
<body>
<video id="media" width="360" height="240" preload="metadata">
    <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>
<div>
    <button>Play</button>
    <button>Pause</button>
</div>
<script type="application/javascript">
    var mediaElem = document.getElementById("media");
    var buttons = document.getElementsByTagName("button");
    for (var i=0;i<buttons.length;i++){
        buttons[i].onclick = handleButtonPress;
    }
    function handleButtonPress(e){
        switch(e.target.innerHTML){
            case 'Play':
                mediaElem.play();
                break;
            case 'Pause':
                mediaElem.pause();
        }
    }
</script>
</body>
</html>

此例中,省略了video元素的controls属性,并用点击button成分触发的play和pause方法来运营和截止媒体重放。

4858美高梅 36

 

来源:《HTML5不可赶过指南》(《The Definitive Guide to HTML5》)

HTML5协助直接在浏览器中播放音频和摄像文件,不需求动用Abode Flash这样的插件。

  1. 使用 video 元素 可以用…

4858美高梅,HTML五 帮助直接在浏览器中播放音频和摄像文件,不须求运用Abode
Flash那样的插件。

1. 使用
video 元素

1. 使用
video 元素

能够用video 成分在网页里停放录制内容。

能够用video 成分在网页里放置录像内容。

4858美高梅 37

4858美高梅 38

个中央用法如下:

其主干用法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用video元素</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" autoplay controls preload="none" muted>
    Video cannot be displayed
</video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用video元素</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" autoplay controls preload="none" muted>
    Video cannot be displayed
</video>
</body>
</html>

此例显示效果如下:

此例显示效果如下:

4858美高梅 39

4858美高梅 40

如若浏览器不协理video成分只怕不能播放录像那么备用内容(初叶和甘休标签之内的内容)就会顶替它显得。此例中,显示了一段容易的文件音信,但常用的本事是提供使用费HTML伍手艺(例如Flash)的录像播放,以支撑旧版的浏览器。

设若浏览器不辅助video成分可能不能播放录制那么备用内容(开端和得了标签之内的始末)就会替代它呈现。此例中,彰显了一段轻巧的文书音信,但常用的技术是提供使用费HTML5技艺(例如Flash)的录制播放,以支撑旧版的浏览器。

video 成分有多数质量,下表列出了它们:

video 成分有成都百货上千属性,下表列出了它们:

4858美高梅 41

4858美高梅 42

 

 

一.1 预先加载摄像

壹.一 预先加载录制

preload属性告诉浏览器:当它加载完包蕴video元素的网页后,是或不是相应主动地去下载摄像。预先加载录制收缩了用户播放时的起始延迟,但假使用户不观察录制则会促成互连网带宽的浪费。下表介绍了这天性格允许设置的值。

preload属性告诉浏览器:当它加载完包蕴video成分的网页后,是或不是合宜主动地去下载录制。预先加载录制收缩了用户播放时的起来延迟,但如若用户不探望录像则会招致网络带宽的荒废。下表介绍了那特天性允许设置的值。

 4858美高梅 43

 4858美高梅 44

在决定是或不是预先加载摄像时,应当权衡用户想要观察录像的或然与机动载入视频内容所须求的带宽。自动载入摄像会带来更平整的用户体验,但它恐怕会大大进步经营资金财产,若是用户并未有见到录制就相差网页,那么那个资金就浪费了。

在调节是或不是预先加载录制时,应当权衡用户想要阅览录像的或然性与机关载入录制内容所急需的带宽。自动载入录制会推动更平整的用户体验,但它只怕会大大晋级经营资金,固然用户未有阅览录像就相差网页,那么这个花费就浪费了。

其一天性的metadata值能够被用来在none和auto值之间建立起适度的平衡。none值的标题在于录制内容会在荧屏上展现为一片空白区域。metadata值会让浏览器获取丰富的音讯来向用户呈现录制的率先帧,而不用下载全体内容。

其一本性的metadata值能够被用来在none和auto值之间建立起适度的平衡。none值的题目在于摄像内容会在显示器上显得为一片空白区域。metadata值会让浏览器获取丰硕的消息来向用户突显录像的首先帧,而不用下载全体内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将none和metadata值用于preload属性</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" controls preload="none" muted>
    Video cannot be displayed
</video>
<video width="360" height="240" src="timessquare.webm" controls preload="metadata" muted>
    Video cannot be displayed
</video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将none和metadata值用于preload属性</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" controls preload="none" muted>
    Video cannot be displayed
</video>
<video width="360" height="240" src="timessquare.webm" controls preload="metadata" muted>
    Video cannot be displayed
</video>
</body>
</html>

此例突显了在同一个文档里选拔none和metadata值,其出示效果如下,能够见到那些值什么影响呈现给用户的预览画面。

此例浮现了在同1个文书档案里应用none和metadata值,其出示效果如下,能够看出这一个值什么影响体现给用户的预览画面。

4858美高梅 45

4858美高梅 46

PS:metadata值向用户提供了大好的预览画面,但需求郑重一些。当用互连网分析工具测试这几个天性,发现固然只请求了元数据,可是有个别浏览器实际上会预先下载整个摄像。平心而论,浏览器能够自由接纳是还是不是忽略preload属性所公布的偏好。不过,假使必要限制带宽的消耗,poster属性大概更胜一些。

PS:metadata值向用户提供了能够的预览画面,但要求慎重1些。当用互连网分析工具测试这么些特性,发现即便只请求了元数据,可是多少浏览器实际上会优先下载整个录制。平心而论,浏览器能够自由选拔是还是不是忽略preload属性所抒发的偏好。可是,要是急需限制带宽的消耗,poster属性大概更胜一些。

 

 

1.二 展现占位图像

1.二 展现占位图像

能够用poster属性向用户显示一张占位图像。那张图像会展现在录制的任务,直至用户初叶广播。

可以用poster属性向用户突显一张占位图像。这张图像会显示在摄像的地点,直至用户开首广播。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用poster属性来指定占位图像</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" controls preload="none" poster="poster.png">
    Video cannot be displayed
</video>
<img src="poster.png" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用poster属性来指定占位图像</title>
</head>
<body>
<video width="360" height="240" src="timessquare.webm" controls preload="none" poster="poster.png">
    Video cannot be displayed
</video>
<img src="poster.png" />
</body>
</html>

此地为摄像文件的首先帧做了一张显示器截图,然后在它下面叠加了单词
Poster(海报)。那张图像包含了录制控件,以此唤起用户那黄澜报代表1段摄像剪辑。那里还在此例中参预了三个img成分,以示范video成分会不加改换地出示那任伟报图像。

那边为录制文件的率先帧做了一张显示器截图,然后在它下面叠加了单词
Poster(海报)。那张图像包含了录像控件,以此唤起用户那刘凯报代表一段录制剪辑。这里还在此例中到场了2个img成分,以示范video成分会不加改换地彰显这陈少雄报图像。

4858美高梅 47

4858美高梅 48

 

 

1.3 设置摄像尺寸

一.三 设置录制尺寸

假诺省略width和height属性,浏览器就会来得三个相当的小的占位成分,并在元数据可用时(也正是当用户发轫播报,或然preload属性被设为metadata时)把它调节到录制原始尺寸的深浅。那大概会发出颤动感,因为页面布局须要调节以包容录制。

只要省略width和height属性,浏览器就会来得一个相当小的占位成分,并在元数据可用时(也正是当用户早先播报,也许preload属性被设为metadata时)把它调控到摄像原始尺寸的轻重缓急。那或许会时有发生颤动感,因为页面布局须要调整以包容录像。

倘诺钦命width和height属性,浏览器会维持摄像的长度宽度比(不必挂念录像会向任壹方向拉伸)。

只要钦命width和height属性,浏览器会维持摄像的长度宽度比(不必顾忌录像会向任1方向拉伸)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用width和height属性</title>
    <style>
        video {background-color: gray;border: medium double green;}
    </style>
</head>
<body>
<video width="600" height="240" src="timessquare.webm" controls preload="auto">
    Video cannot be displayed
</video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用width和height属性</title>
    <style>
        video {background-color: gray;border: medium double green;}
    </style>
</head>
<body>
<video width="600" height="240" src="timessquare.webm" controls preload="auto">
    Video cannot be displayed
</video>
</body>
</html>

此例中装置的width属性与height属性的百分比是失衡的。那里还给video成分应用了一个体裁,以突显浏览器为了保证录制的长度宽度高,只会利用部分派遣给该因素的上空。

此例中设置的width属性与height属性的百分比是失衡的。那里还给video成分应用了2个样式,以展现浏览器为了保持录像的长度宽度高,只会使用1些选派给该因素的空间。

4858美高梅 49

4858美高梅 50

 

 

一.4 内定录制来自(和格式)

一.四 钦点录制来自(和格式)

点名摄像最简易的不2秘籍是选用 src 属性,并提供所需录像文件的U途达L。

内定录像最简便的章程是利用 src 属性,并提供所需摄像文件的U奇骏L。

能够看出前方的例子中,用src属性钦赐了文件 timessquare.webm。那是3个用WebM
格式编码的公文。近日还从未哪一种录像格式被大规模协理,要是想将录制推向各类各类的HTML伍用户,将要盘活以三种格式编码录像的准备。

能够观看前方的例子中,用src属性钦命了文件 timessquare.webm。那是三个用WebM
格式编码的公文。近期还一贯不哪一种录制格式被大规模帮助,假如想将录制推向各类种种的HTML5用户,就要办好以八种格式编码录像的准备。

2个不好的事实是,未有哪1种格式能够用于全部的主流浏览器。由此,必须以三种格式编码录像,直到出现同样一种格式结束。能够运用source成分来内定多少个格式。

二个不幸的真情是,没有哪壹种格式能够用于全部的主流浏览器。由此,必须以多种格式编码录像,直到出现雷同1种格式截止。能够动用source成分来钦命多少个格式。

4858美高梅 51

4858美高梅 52

上边例子呈现了什么运用 source元一直向浏览器提供备选摄像格式。

上边例子体现了怎么样利用 source成分来向浏览器提供备选录制格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用source元素</title>
</head>
<body>
<video width="360" height="240" controls preload="auto">
    <source src="timessquare.webm" />
    <source src="timessquare.ogv" />
    <source src="timessquare.mp4" />
    Video cannot be displayed
</video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用source元素</title>
</head>
<body>
<video width="360" height="240" controls preload="auto">
    <source src="timessquare.webm" />
    <source src="timessquare.ogv" />
    <source src="timessquare.mp4" />
    Video cannot be displayed
</video>
</body>
</html>

浏览器会沿着列表顺序寻觅它能够播放的录制文件。那也许会引发八个服务器请求以获得每一种文件的附加音信。浏览器决断它是不是能播放有些摄像的依据之一是服务器再次来到的MIME类型。能够因此给source成分应用type属性来提醒用户,方法是在里面指定文件的MIME类型。

浏览器会沿着列表顺序寻觅它亦可播放的录制文件。这大概会吸引三个服务器请求以获得各个文件的附加音讯。浏览器剖断它是还是不是能播放某些录制的基于之壹是服务器再次回到的MIME类型。能够由此给source成分应用type属性来唤醒用户,方法是在里边钦赐文件的MIME类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在source元素上应用type属性</title>
</head>
<body>
<video width="360" height="240" controls preload="auto">
    <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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在source元素上应用type属性</title>
</head>
<body>
<video width="360" height="240" controls preload="auto">
    <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>

PS:media属性向浏览器指明该录像最符合在那种设备上播放。

PS:media属性向浏览器指明该录制最契合在那种设备上播报。

 

 

2. 使用
audio 元素

2. 使用
audio 元素

audio 成分允许在HTML文书档案里放置音频内容。

audio 成分允许在HTML文书档案里停放音频内容。

4858美高梅 53

4858美高梅 54

能够看出audio和video成分有成都百货上千共同点。上面包车型客车例子体现了audio成分的用法。

能够见到audio和video成分有无数共同点。上边包车型大巴事例体现了audio成分的用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用audio元素</title>
</head>
<body>
<audio controls src="P!NK - Just Give Me a Reason.mp3" autoplay>
    Audio content cannot be played
</audio>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用audio元素</title>
</head>
<body>
<audio controls src="P!NK - Just Give Me a Reason.mp3" autoplay>
    Audio content cannot be played
</audio>
</body>
</html>

也能够动用source成分来提供八种格式。

也能够应用source元一直提供种种格式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用audio元素</title>
</head>
<body>
<audio controls autoplay>
    <source src="P!NK - Just Give Me a Reason.ogg" />
    <source src="P!NK - Just Give Me a Reason.mp3" />
    <source src="P!NK - Just Give Me a Reason.wav" />
    Audio content cannot be played
</audio>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用audio元素</title>
</head>
<body>
<audio controls autoplay>
    <source src="P!NK - Just Give Me a Reason.ogg" />
    <source src="P!NK - Just Give Me a Reason.mp3" />
    <source src="P!NK - Just Give Me a Reason.wav" />
    Audio content cannot be played
</audio>
</body>
</html>

那五个例证都利用了controls属性,那样浏览器就会对用户体现私下认可的播报控件。它们在差别的浏览器中外观各异,上面是在火狐浏览器中的呈现效果:

这八个例子都施用了controls属性,那样浏览器就会对用户体现私下认可的播报控件。它们在分歧的浏览器中外观各异,下边是在火狐浏览器中的呈现效果:

4858美高梅 55

4858美高梅 56

 

 

三. 通过 DOM
操作嵌入式媒体

3. 因而 DOM
操作嵌入式媒体

audio 和 video
成分有着异常的大的相似性,所以HTMLMediaElement对象在DOM里为它们统一定义了主导职能。audio成分在DOM里由HTML奥迪(Audi)oElement对象所表示,但此目的未有概念差别于HTMLMediaElement的额外功效。video成分由HTMLVideoElement对象所表示,而它定义了部分卓殊的性质。

audio 和 video
元素有着十分大的相似性,所以HTMLMediaElement对象在DOM里为它们统一定义了核心职能。audio成分在DOM里由HTML奥迪(Audi)oElement对象所代表,但此指标未有概念不相同于HTMLMediaElement的额外功效。video元素由HTMLVideoElement对象所表示,而它定义了有的额外的天性。

PS:
audio和video成分的相似度是这么之高,以至于它们唯一区别仅仅是在显示屏上侵占的上台湾空中大学小。audio成分不会吞没一大块荧屏空间来展现录制图像。事实上,甚至足以用audio成分来播放摄像文件(当然,这么做只可以听获得配乐),也得以用video成分来播放音频文件(不过录制显示区域会保持空白)。那看起来很意外,但实质上是可行的。

PS:
audio和video成分的相似度是如此之高,以至于它们唯一分歧仅仅是在显示器上占领的半空中尺寸。audio成分不会据有一大块显示屏空间来体现录像图像。事实上,甚至能够用audio成分来播音录像文件(当然,这么做只可以听获得配乐),也可以用video成分来播音音频文件(可是录像呈现区域会维持空白)。那看起来很想获得,但骨子里是卓有作用的。

 

 

三.1 获得媒体新闻

三.一 得到媒体音信

HTMLMediaElement
对象定义了许多成员,能够用它们来收获和改变成分及其涉及媒体的音讯。

HTMLMediaElement
对象定义了多数成员,能够用它们来博取和改动成分及其涉及媒体的新闻。

4858美高梅 57

4858美高梅 58

指标定义了下表中显得的额外属性:

对象定义了下表中显得的额外属性:

4858美高梅 59

4858美高梅 60

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取媒体元素的基本信息</title>
    <style>
        table {border: thin solid orange;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    <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>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<script type="application/javascript">
    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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取媒体元素的基本信息</title>
    <style>
        table {border: thin solid orange;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    <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>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<script type="application/javascript">
    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>

此例的剧本在一张表格中展现了大多天性的值,地点就在video成分的两旁,体现了哪些行使一些HTMLMediaElement属性来收获媒体成分的基本消息。

此例的台本在一张表格中彰显了过多属性的值,地方就在video成分的两旁,呈现了如何利用部分HTMLMediaElement属性来获得媒体成分的骨干新闻。

 4858美高梅 61

 4858美高梅 62

 

 

三.2 评估重放技巧

3.二 评估重甩手艺

canPlayType
方法用来询问浏览器是还是不是能够播放特定的媒体格式。那些方法会重临下表里列出的个中3个值:

canPlayType
方法用来打听浏览器是不是能够播放特定的媒体格式。这几个方法会再次来到下表里列出的里边2个值:

4858美高梅 63

4858美高梅 64

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用canPlayType方法</title>
    <style>
        table {border: thin solid orange;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    Video cannot be displayed
</video>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<script type="application/javascript">
    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;
        }
    }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用canPlayType方法</title>
    <style>
        table {border: thin solid orange;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    Video cannot be displayed
</video>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<script type="application/javascript">
    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;
        }
    }
</script>
</body>
</html>

此例的本子中,用canPlayType 方法评估了一组媒体类型。假若接收几个probably
答复,就会设置video成分的src属性值。通过那种艺术,此例在一张表格里记录了几种媒体类型的答疑。

此例的台本中,用canPlayType 方法评估了壹组媒体类型。借使收到二个probably
答复,就会设置video成分的src属性值。通过那种艺术,此例在一张表格里记录了三种媒体类型的答疑。

用那种格局选择媒体时须求多加小心,因为浏览器评估本人格式播放技能的不贰秘诀各分化。

用那种方法选拔媒体时索要多加小心,因为浏览器评估自个儿格式播放手艺的主意各差异。

4858美高梅 65

4858美高梅 66

很难评论浏览器在答应中所表现出的不一致性。有太多成分使它们不可能提交明显的答案,但它们在评估补助时选取分化方法那或多或少意味相应万分谨慎的施用canPlayType方法。

很难评论浏览器在应对中所表现出的不壹致性。有太多元素使它们不能够提交显然的答案,但它们在评估扶助时行使分歧方法那或多或少意味着相应越发胆战心惊的运用canPlayType方法。

 

 

三.三 调控媒体重放

三.三 调控媒体重播

HTMLMediaElement
对象定义了成都百货上千成员,它们能够调控回看和收获重放音信。那一个属性和方法如下表所示:

HTMLMediaElement
对象定义了累累成员,它们能够调控回看和获得回看消息。这个属性和方法如下表所示:

4858美高梅 67

4858美高梅 68

下边包车型地铁事例显示了什么样使用表格中的属性来获得重放消息:

上边包车型大巴例子展示了怎么样选用表格中的属性来获取回看音信:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用HTMLMediaElement属性获取媒体回放详情</title>
    <style>
        table {border: thin solid black;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
        div {clear: both;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    <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>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<div>
    <button id="pressme">Press Me</button>
</div>
<script type="application/javascript">
    var mediaElem = document.getElementById("media");
    var tableElem = document.getElementById("info");

    document.getElementById("pressme").onclick = function(){
        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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用HTMLMediaElement属性获取媒体回放详情</title>
    <style>
        table {border: thin solid black;border-collapse: collapse;}
        th,td {padding: 2px 4px;}
        body > * {float: left;margin: 2px;}
        div {clear: both;}
    </style>
</head>
<body>
<video id="media" width="360" height="240" controls preload="metadata">
    <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>
<table id="info" border="1">
    <tr><th>Property</th><th>Value</th></tr>
</table>
<div>
    <button id="pressme">Press Me</button>
</div>
<script type="application/javascript">
    var mediaElem = document.getElementById("media");
    var tableElem = document.getElementById("info");

    document.getElementById("pressme").onclick = function(){
        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>

此例包涵贰个button成分,当它被按下后会使表格突显出currentTime、duration、paused
和 ended 属性的当前值。

此例包括一个button成分,当它被按下后会使表格呈现出currentTime、duration、paused
和 ended 属性的日前值。

4858美高梅 69

4858美高梅 70

能够运用重播方法代替暗中认可的传播媒介空间,演示例子如下:

能够使用重放方法替代默许的传播媒介空间,演示例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换默认的媒体控件</title>
</head>
<body>
<video id="media" width="360" height="240" preload="metadata">
    <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>
<div>
    <button>Play</button>
    <button>Pause</button>
</div>
<script type="application/javascript">
    var mediaElem = document.getElementById("media");
    var buttons = document.getElementsByTagName("button");
    for (var i=0;i<buttons.length;i++){
        buttons[i].onclick = handleButtonPress;
    }
    function handleButtonPress(e){
        switch(e.target.innerHTML){
            case 'Play':
                mediaElem.play();
                break;
            case 'Pause':
                mediaElem.pause();
        }
    }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>替换默认的媒体控件</title>
</head>
<body>
<video id="media" width="360" height="240" preload="metadata">
    <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>
<div>
    <button>Play</button>
    <button>Pause</button>
</div>
<script type="application/javascript">
    var mediaElem = document.getElementById("media");
    var buttons = document.getElementsByTagName("button");
    for (var i=0;i<buttons.length;i++){
        buttons[i].onclick = handleButtonPress;
    }
    function handleButtonPress(e){
        switch(e.target.innerHTML){
            case 'Play':
                mediaElem.play();
                break;
            case 'Pause':
                mediaElem.pause();
        }
    }
</script>
</body>
</html>

此例中,省略了video成分的controls属性,并用点击button成分触发的play和pause方法来运转和终止媒体重放。

此例中,省略了video成分的controls属性,并用点击button成分触发的play和pause方法来运行和结束媒体重放。

4858美高梅 71

4858美高梅 72

 

 

来源:《HTML伍高于指南》(《The Definitive Guide to
HTML伍》)

来源:《HTML5名贵指南》(《The Definitive Guide to
HTML5》)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有