高档功用,使用多媒体

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

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

HTML伍 扶助直接在浏览器中播放音频和录制文件,不供给利用Abode
Flash那样的插件。

1. 使用 video 元素

能够用video 元素在网页里停放录制内容。

澳门葡京 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>

此例突显效果如下:

澳门葡京 2

假诺浏览器不帮忙video成分大概不可能播放录制那么备用内容(开端和了结标签之内的内容)就会替代它显得。此例中,显示了壹段简单的文件信息,但常用的手艺是提供使用费HTML五技艺(例如Flash)的录像播放,以支撑旧版的浏览器。

video 成分有那1天品质,下表列出了它们:

澳门葡京 3

 

一.一 预先加载录像

preload属性告诉浏览器:当它加载完包罗video成分的网页后,是不是合宜积极地去下载录像。预先加载视频缩短了用户播放时的初始延迟,但只要用户不探望摄像则会导致互连网带宽的荒废。下表介绍了那几个性情允许设置的值。

 澳门葡京 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>

此例体现了在同贰个文书档案里选用none和metadata值,其出示效果如下,可以看出那么些值什么影响浮现给用户的预览画面。

澳门葡京 5

PS:metadata值向用户提供了不错的预览画面,但需求郑重1些。当用网络分析工具测试这一个本性,发现就算只请求了元数据,不过多少浏览器实际上会事先下载整个摄像。平心而论,浏览器能够自由选择是还是不是忽略preload属性所发挥的偏好。然则,假如须求限制带宽的成本,poster属性只怕更胜一些。

 

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(海报)。那张图像包涵了录像控件,以此唤起用户那魏子翔报代表一段摄像剪辑。那里还在此例中到场了3个img成分,以示范video成分会不加改变地展现那刘剑华报图像。

澳门葡京 6

 

一.3 设置摄像尺寸

如若省略width和height属性,浏览器就会来得三个相当小的占位成分,并在元数据可用时(也便是当用户开播,恐怕preload属性被设为metadata时)把它调整到摄像原始尺寸的大小。那说不定会发生颤动感,因为页面布局要求调动以包容录像。

1旦钦点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>

此例中安装的width属性与height属性的比例是平衡的。那里还给video元素应用了3个体制,以显示浏览器为了维持录像的长度宽度高,只会动用部分打发给该因素的半空中。

澳门葡京 7

 

1.肆 钦定录制来自(和格式)

点名录制最简易的办法是使用 src 属性,并提供所需摄像文件的U景逸SUVL。

能够看看前面包车型客车事例中,用src属性内定了文本 timessquare.webm。那是1个用WebM
格式编码的公文。最近还未有哪1种录像格式被广泛帮衬,假使想将录像推向各样种种的HTML伍用户,将要加强以多种格式编码录制的预备。

3个不佳的真情是,没有哪1种格式能够用于全数的主流浏览器。由此,必须以多样格式编码录制,直到出现一样壹种格式停止。能够利用source成分来钦定四个格式。

澳门葡京 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文书档案里停放音频内容。

澳门葡京 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属性,那样浏览器就会对用户展示默许的播报控件。它们在分裂的浏览器中外观各异,上面是在火狐浏览器中的展现效果:

澳门葡京 10

 

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

audio 和 video
成分有着非常的大的相似性,所以HTMLMediaElement对象在DOM里为它们统一定义了主导成效。audio成分在DOM里由HTML奥迪oElement对象所表示,但此目标未有定义区别于HTMLMediaElement的附加成效。video成分由HTMLVideoElement对象所代表,而它定义了壹部分附加的属性。

PS:
audio和video成分的相似度是如此之高,以至于它们唯1不一样仅仅是在荧屏上占领的半空中山高校小。audio元素不会占有一大块荧屏空间来展现摄像图像。事实上,甚至足以用audio成分来播放录像文件(当然,这么做只可以听获得配乐),也能够用video成分来播放音频文件(可是摄像展示区域会维持空白)。那看起来很想获得,但其实是实惠的。

 

叁.一 得到媒体信息

HTMLMediaElement
对象定义了许多分子,能够用它们来赢得和修改成分及其关系媒体的音信。

澳门葡京 11

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

澳门葡京 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属性来博取媒体成分的骨干新闻。

 澳门葡京 13

 

三.二 评估回看本领

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

澳门葡京 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属性值。通过那种办法,此例在一张表格里记录了两种媒体类型的作答。

用那种办法选拔媒体时供给多加小心,因为浏览器评估自己格式播放本领的格局各分化。

澳门葡京 15

很难评论浏览器在答复中所表现出的不一致性。有太多因素使它们不可能提交显明的答案,但它们在评估帮衬时选用分裂方法这点意味相应百倍谨慎的选择canPlayType方法。

 

三.叁 调节媒体重放

HTMLMediaElement
对象定义了诸多成员,它们能够决定重放和得到回看新闻。那些属性和章程如下表所示:

澳门葡京 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 属性的脚下值。

澳门葡京 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方法来运营和甘休媒体重播。

澳门葡京 18

 

HTML五帮衬直接在浏览器中播放音频和录制文件,不须求动用Abode Flash那样的插件。

  1. 使用 vide…

【HTML5】使用多媒体,html伍多媒体

HTML5 帮助间接在浏览器中播放音频和录制文件,不需求选择Abode
Flash那样的插件。

1. 使用 video 元素

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

澳门葡京 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>

此例突显效果如下:

澳门葡京 20

万1浏览器不帮衬video成分只怕不能够播放录像那么备用内容(开端和停止标签之内的内容)就会顶替它显得。此例中,显示了一段轻便的公文音信,但常用的技巧是提供使用费HTML五本事(例如Flash)的录制播放,以支撑旧版的浏览器。

video 元素有成都百货上千特性,下表列出了它们:

澳门葡京 21

 

1.一 预先加载摄像

preload属性告诉浏览器:当它加载完包蕴video成分的网页后,是或不是应该积极地去下载录像。预先加载录制收缩了用户播放时的起来延迟,但壹旦用户不见到录制则会产生互连网带宽的荒废。下表介绍了这脾性子允许设置的值。

 澳门葡京 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>

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

澳门葡京 23

PS:metadata值向用户提供了美好的预览画面,但须求郑重壹些。当用网络分析工具测试那脾天性,发现固然只请求了元数据,但是多少浏览器实际上会先行下载整个录制。平心而论,浏览器能够自由选取是还是不是忽略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段录制剪辑。那里还在此例中加入了3个img元素,以示范video成分会不加改造地呈现那吴昊报图像。

澳门葡京 24

 

一.叁 设置摄像尺寸

万一省略width和height属性,浏览器就会来得1个异常的小的占位成分,并在元数据可用时(也等于当用户开始播放,恐怕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成分应用了叁个体裁,以突显浏览器为了维持摄像的长度宽度高,只会动用部分打发给该因素的半空中。

澳门葡京 25

 

一.四 钦赐录制出自(和格式)

点名摄像最简易的措施是使用 src 属性,并提供所需摄像文件的UPRADOL。

能够看看前方的例子中,用src属性钦点了文本 timessquare.webm。那是1个用WebM
格式编码的公文。近年来还未有哪一种摄像格式被普遍支持,假若想将摄像推向各个各个的HTML伍用户,就要加强以二种格式编码录像的备选。

一个不幸的真情是,未有哪个种类格式能够用于全数的主流浏览器。因此,必须以几种格式编码摄像,直到出现同样一种格式截止。能够选拔source成分来钦定三个格式。

澳门葡京 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文书档案里放置音频内容。

澳门葡京 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属性,那样浏览器就会对用户显示暗许的播报控件。它们在差别的浏览器中外观各异,下边是在火狐浏览器中的彰显效果:

澳门葡京 28

 

3. 由此 DOM 操作嵌入式媒体

audio 和 video
成分有着异常的大的相似性,所以HTMLMediaElement对象在DOM里为它们统一定义了着力职能。audio成分在DOM里由HTML奥迪oElement对象所表示,但此指标未有概念不一致于HTMLMediaElement的附加成效。video成分由HTMLVideoElement对象所表示,而它定义了壹部分附加的质量。

PS:
audio和video成分的相似度是那样之高,以至于它们唯1分裂仅仅是在荧屏上私吞的上台湾空中大学小。audio元素不会占用一大块显示屏空间来彰显摄像图像。事实上,甚至足以用audio成分来播放录像文件(当然,这么做只可以听得到配乐),也足以用video元从来播放音频文件(可是录像呈现区域会维持空白)。那看起来很离奇,但事实上是行得通的。

 

三.1 得到媒体音讯

HTMLMediaElement
对象定义了众多分子,能够用它们来获取和修改成分及其关联媒体的音信。

澳门葡京 29

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

澳门葡京 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属性来得到媒体成分的为主消息。

 澳门葡京 31

 

三.贰 评估重放本事

canPlayType
方法用来询问浏览器是还是不是能够播放特定的媒体格式。这一个方法会再次回到下表里列出的当中二个值:

澳门葡京 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属性值。通过这种方法,此例在一张表格里记录了三种媒体类型的回复。

用那种方法选取媒体时索要多加小心,因为浏览器评估本人格式播放技能的艺术各不同。

澳门葡京 33

很难评论浏览器在回复中所表现出的不壹致性。有太多成分使它们不可能提交明显的答案,但它们在评估支持时选择区别方法那或多或少意味相应充足谨慎的施用canPlayType方法。

 

三.叁 调控媒体回看

HTMLMediaElement
对象定义了很多分子,它们能够调整重播和收获回看消息。这几个属性和办法如下表所示:

澳门葡京 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>

此例包涵2个button成分,当它被按下后会使表格显示出current提姆e、duration、paused
和 ended 属性的当下值。

澳门葡京 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方法来运行和结束媒体重播。

澳门葡京 36

 

来源:《HTML五权威指南》(《The Definitive Guide to HTML5》)

HTML五补助直接在浏览器中播放音频和录像文件,不须求使用Abode Flash那样的插件。

  1. 使用 video 元素 可以用…

HTML五 帮忙直接在浏览器中播放音频和录制文件,不需求选拔Abode
Flash那样的插件。

1. 使用
video 元素

1. 使用
video 元素

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

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

澳门葡京 37

澳门葡京 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>

此例展现效果如下:

此例突显效果如下:

澳门葡京 39

澳门葡京 40

壹经浏览器不援救video成分或许不或许播放摄像那么备用内容(初阶和终止标签之内的始末)就会代表它显示。此例中,呈现了一段轻易的公文新闻,但常用的技能是提供使用费HTML伍技巧(例如Flash)的录像播放,以支撑旧版的浏览器。

假若浏览器不支持video成分可能无法播放录像那么备用内容(起先和终止标签之内的剧情)就会替代它突显。此例中,突显了一段简单的公文消息,但常用的本领是提供使用费HTML5本领(例如Flash)的视频播放,以帮忙旧版的浏览器。

video 成分有这个性质,下表列出了它们:

video 元素有许多品质,下表列出了它们:

澳门葡京 41

澳门葡京 42

 

 

一.1 预先加载录制

1.一 预先加载录像

preload属性告诉浏览器:当它加载完包蕴video成分的网页后,是不是应该积极地去下载录像。预先加载摄像收缩了用户播放时的启幕延迟,但万一用户不见到摄像则会促成网络带宽的浪费。下表介绍了这脾天性允许设置的值。

preload属性告诉浏览器:当它加载完蕴涵video成分的网页后,是或不是应当主动地去下载摄像。预先加载摄像缩小了用户播放时的启幕延迟,但1旦用户不来看录像则会导致网络带宽的浪费。下表介绍了那么些性情允许设置的值。

 澳门葡京 43

 澳门葡京 44

在调节是还是不是预先加载录像时,应当权衡用户想要阅览录像的可能与机关载入录像内容所供给的带宽。自动载入摄像会带来更平整的用户体验,但它恐怕会大大升高经营资金财产,假设用户并未有看到摄像就相差网页,那么这么些费用就浪费了。

在调整是或不是预先加载录像时,应当权衡用户想要观望摄像的或许与机动载入录像内容所要求的带宽。自动载入录像会带动更平整的用户体验,但它可能会大大晋级经营资金财产,借使用户未有观察录像就相差网页,那么这一个资金就浪费了。

其一性格的metadata值能够被用来在none和auto值之间创立起适度的平衡。none值的难题在于录像内容会在显示器上出示为一片空白区域。metadata值会让浏览器获取足够的新闻来向用户显示录制的第2帧,而不必下载全部内容。

以此天性的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值,其出示效果如下,能够看看那一个值什么影响展现给用户的预览画面。

此例展现了在同二个文书档案里使用none和metadata值,其出示效果如下,可以看看这几个值怎么影响显示给用户的预览画面。

澳门葡京 45

澳门葡京 46

PS:metadata值向用户提供了完美的预览画面,但供给郑重一些。当用网络分析工具测试这么些天性,发现就算只请求了元数据,可是多少浏览器实际上会事先下载整个摄像。平心而论,浏览器能够自由接纳是不是忽略preload属性所发挥的偏好。可是,假使需求限制带宽的消耗,poster属性只怕更胜一些。

PS:metadata值向用户提供了特出的预览画面,但须求慎重壹些。当用互连网分析工具测试那性格格,发现就算只请求了元数据,然而有个别浏览器实际上会优先下载整个录制。平心而论,浏览器能够自由选拔是还是不是忽略preload属性所表明的偏好。可是,若是急需限制带宽的损耗,poster属性或然更胜壹些。

 

 

一.② 展现占位图像

一.二 展现占位图像

能够用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(海报)。那张图像包罗了摄像控件,以此唤起用户那陈冬冬报代表壹段录像剪辑。那里还在此例中投入了多个img成分,以示范video成分会不加退换地显示那李明阳报图像。

此地为摄像文件的首先帧做了一张显示器截图,然后在它上边叠加了单词
Poster(海报)。那张图像包罗了录像控件,以此唤起用户那许建超报代表一段摄像剪辑。那里还在此例中进入了二个img成分,以示范video成分会不加改变地呈现那李明华报图像。

澳门葡京 47

澳门葡京 48

 

 

一.三 设置录制尺寸

1.三 设置录制尺寸

要是省略width和height属性,浏览器就会显得三个不大的占位元素,并在元数据可用时(也正是当用户开播,恐怕preload属性被设为metadata时)把它调整到录制原始尺寸的分寸。那可能会产生颤动感,因为页面布局必要调动以包容录制。

虽然省略width和height属性,浏览器就会展现贰个相当的小的占位成分,并在元数据可用时(也正是当用户开首广播,或然preload属性被设为metadata时)把它调控到摄像原始尺寸的轻重。那可能会爆发颤动感,因为页面布局供给调动以包容摄像。

要是钦定width和height属性,浏览器会保持录制的长宽比(不必担心摄像会向任一方向拉伸)。

假使内定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>
<!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元素应用了1个体制,以展现浏览器为了保持摄像的长度宽度高,只会动用一些选派给该因素的半空中。

此例中设置的width属性与height属性的比重是平衡的。那里还给video成分应用了一个样式,以展现浏览器为了保证录像的长度宽度高,只会利用部分派遣给该因素的上空。

澳门葡京 49

澳门葡京 50

 

 

1.四 钦赐视频来源(和格式)

1.四 钦赐摄像出自(和格式)

点名录像最简便的不二秘技是使用 src 属性,并提供所需摄像文件的U昂CoraL。

点名录像最简易的办法是运用 src 属性,并提供所需录制文件的U大切诺基L。

可以看出眼下的例证中,用src属性钦赐了文本 timessquare.webm。那是贰个用WebM
格式编码的公文。近年来还没有哪一种录像格式被大规模支持,假诺想将录像推向种种各个的HTML伍用户,将在盘活以二种格式编码录制的准备。

能够看看后边的事例中,用src属性钦定了文本 timessquare.webm。那是多个用WebM
格式编码的文书。近年来还不曾哪1种录像格式被普及帮忙,假若想将录像推向各样种种的HTML5用户,将要盘活以二种格式编码录像的预备。

贰个不好的真情是,未有哪一种格式能够用于全数的主流浏览器。因而,必须以三种格式编码摄像,直到出现雷同1种格式停止。能够行使source成分来钦定两个格式。

一个不祥的实际意况是,未有哪一种格式能够用于全体的主流浏览器。因而,必须以多样格式编码录制,直到出现同等一种格式甘休。能够行使source元一向钦赐多少个格式。

澳门葡京 51

澳门葡京 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类型。

浏览器会沿着列表顺序搜索它亦可播放的摄像文件。那大概会掀起多个服务器请求以博得每种文件的附加新闻。浏览器判断它是还是不是能播放某些录制的依据之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>
<!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文档里放置音频内容。

澳门葡京 53

澳门葡京 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属性,这样浏览器就会对用户体现私下认可的播音控件。它们在不相同的浏览器中外观各异,上面是在火狐浏览器中的突显效果:

澳门葡京 55

澳门葡京 56

 

 

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

三. 通过 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对象所表示,而它定义了1部分附加的质量。

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

PS:
audio和video成分的相似度是那般之高,以至于它们唯一不同仅仅是在荧屏上占领的上空尺寸。audio元素不会占领一大块荧屏空间来展现摄像图像。事实上,甚至能够用audio成分来播音录像文件(当然,这么做只好听获得配乐),也得以用video成分来播放音频文件(可是摄像展现区域会保持空白)。那看起来很意外,但实则是实惠的。

 

 

三.一 获得媒体消息

三.壹 获得媒体消息

HTMLMediaElement
对象定义了过多成员,能够用它们来获得和改变成分及其关联媒体的消息。

HTMLMediaElement
对象定义了广大分子,能够用它们来获取和修改成分及其涉及媒体的音讯。

澳门葡京 57

澳门葡京 58

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

目的定义了下表中浮现的额外属性:

澳门葡京 59

澳门葡京 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属性来赢得媒体成分的中坚新闻。

 澳门葡京 61

 澳门葡京 62

 

 

三.二 评估重放技艺

三.二 评估重播技巧

canPlayType
方法用来了然浏览器是或不是能够播放特定的媒体格式。那个方法会重返下表里列出的当中1个值:

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

澳门葡京 63

澳门葡京 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 方法评估了1组媒体类型。要是接到二个probably
答复,就会设置video元素的src属性值。通过那种措施,此例在一张表格里记录了三种媒体类型的答应。

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

用那种方法选取媒体时须要多加小心,因为浏览器评估自个儿格式播放能力的不二秘诀各不一致。

用那种方法采用媒体时索要多加小心,因为浏览器评估自己格式播放本事的点子各不一样样。

澳门葡京 65

澳门葡京 66

很难评论浏览器在答疑中所表现出的不壹致性。有太多成分使它们不能够提交显著的答案,但它们在评估帮衬时行使差别措施那或多或少意味着相应丰硕如临深渊的施用canPlayType方法。

很难评论浏览器在回答中所表现出的不一致性。有太多成分使它们不能够提交鲜明的答案,但它们在评估扶助时选择不一样方法那或多或少象征相应丰裕小心翼翼的施用canPlayType方法。

 

 

叁.三 调节媒体回看

3.叁 调控媒体回看

HTMLMediaElement
对象定义了诸多分子,它们能够支配重播和获得重播消息。这么些属性和办法如下表所示:

HTMLMediaElement
对象定义了许多成员,它们能够调整重播和得到重放新闻。这个属性和方法如下表所示:

澳门葡京 67

澳门葡京 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 属性的近年来值。

此例包括2个button元素,当它被按下后会使表格突显出currentTime、duration、paused
和 ended 属性的此时此刻值。

澳门葡京 69

澳门葡京 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方法来运行和平息媒体重放。

澳门葡京 71

澳门葡京 72

澳门葡京 , 

 

来源:《HTML5独尊指南》(《The Definitive Guide to
HTML五》)

来源:《HTML伍逾越指南》(《The Definitive Guide to
HTML伍》)

相关文章

发表评论

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

*
*
Website