第五章音频和视频应用详解（第一篇）

Posted 2020-09-02 943987243

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第五章音频和视频应用详解（第一篇）相关的知识，希望对你有一定的参考价值。

---恢复内容开始---

5.1处理音频

1.使用<video>元素标记

当前<video>标记支持如下三种格式

Ogg：带有Theora视频编码和vorbis音频的Ogg文件

MPEG4：带有H.264视频编码和Acc音频编码的MPEG4文件

WebM：带有Vp8视频编码和Vorbis音频编码的WebM文件

control：供添加播放、暂停和音量控件

<video>标记允许多个“source”元素，“source元素可以链接不同的视频文件”但是浏览器将使用第一个可识别的格式

<video controls>
<source src="ogg-19M.ogg" type="video/ogg">
<source src="cat.mp4" type="video/mp4" >

</video>

注意：internet Explorer8不支持<video>标记，在IE9中将支持使用MPEG4

<video>标记中各个属性的具体说明

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。（循环播放）
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

src属性

绝对url地址：指向另一个站点，例如：href=http://www.xxx.com/123.ogg.

相对url地址：指向网站内的文件，例如href：=“123.ogg”。

5.2处理音频

1.处理音频<audio>标记

和视频功能一样，播放音频文件或者音频流

补充：

preload有以下四个取值

load：用于规定是否预先加载音频

auto：当页面加载后只载入元数据

none：当页面加载后不载入音频

解释：

· “none”: 这个值指的是用户不需要对音频进行预先加载，这样可以减少网络流量，一个典型的情景是如果是一个具备播客功能的语音播客中，每一篇文章其实都有音频，但只有当用户确认打开这些音频收听时，才通过网络进行加载。否则，试想一下，这么多数量的音频同时进行预加载，速度是相当慢的。

· “metadata”: 这个选项的值将告诉服务端，用户依然不想马上加载音频，但需要预先获得音频的元数据信息(比如文件的大小，时长等)。如果开发者是在设计音频播放器或者需要获得音频的信息而不需要马上播放视频，则可以使用这个选项。

· “auto”:这个选项告诉服务端，用户需要马上加载音频并进行流式播放，这在比如一些游戏场景等需要实时音频的场景中会用到。
要注意的是，如果在使用audio标签时中当设置音频的src值的时候，默认采用的设置值是将preload的加载属性设置为auto的，因此如果需要另外设置加载的属性值，需要在设置src前进行设置。

5.3高级应用

poster属性：表示所选图片的url。当使用该属性时播放前显示该图片而不是默认的第一帧。

显示加载视频的状态networkState属性：返回视频文件的网络状态。

当浏览器读取视频文件时会称触发“progress”事件，获取视频文件在不同阶段的网络状态值

其中“networkState”为只读属性。

0 = NETWORK_EMPTY - 音频/视频尚未初始化
1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络
2 = NETWORK_LOADING - 浏览器正在下载数据
3 = NETWORK_NO_SOURCE - 未找到音频/视频来源

如图所示：

代码部分：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" language="javascript"
src="js8.js"></script>
</head>

<body>
<div>
<video id="vdoMain" src="ogg-19M.ogg"
width="360px" height="220px"
onProgress="Video_Progress(this)" 
controls>
当前浏览器不支持
</video>
<span id="spanStatus">获取网络状态</span>

</div>
</body>
</html>

//js部分
function $$(id){
    return document.getElementById(id);
    }
    function Video_Progress(e){
        var intState=e.networkState;
        $$("spanStatus").style.display="block";
        $$("spanStatus").innerHTML=strByName(intState);
        if(intState==1){
            alert("aaa");
            }
        }
        function strByName(n){
            switch(n){
                case 0:
                
                return "正在初始化..";
                case 1:
                return "数据加载完成!";
                case 2:
                return "正在加载中..";
                case 3:
                return "数据加载失败!";
                
                }
            }

操作流程是

1.将<video>元素的“networkState”属性值保存到变量intState中。

2.将显示状态信息<span>元素的可见样式设为“block”,表示可见 ps：此处为书上《html5 从入门到精通》中所说（我个人想法

此处将行内元素转换为块级元素起到换行的作用）；

3.调用另一个自定义的函数StrByNum(),将保存至变量“intState”中的“networkState”属性值转成相应的文字说明信息，并将赋值给显示状态信息的<span>

元素，用于实现页面中的动态显示效果。

4.当返回的“networkState”属性值为“1”时，表示加载完成，弹出一个对话框（$$("spanStatus").style.display="none"; 隐藏该元素）；

5.3.4检测浏览器是否支持这个媒体类型（有待改进）

通过 canPlayType(type)方法检测，其中参数“type”表示浏览器检测的类型与媒体文件的MIME类型一致。

返回值如下：

"probably" - 浏览器最可能支持该音频/视频类型
"maybe" - 浏览器也许支持该音频/视频类型
"" - （空字符串）浏览器不支持该音频/视频类型

type	规定要检测的音频/视频类型。常用值： video/ogg video/mp4 video/webm audio/mpeg audio/ogg audio/mp4 常用值，包括编解码器： video/ogg; codecs="theora, vorbis" video/mp4; codecs="avc1.4D401E, mp4a.40.2" video/webm; codecs="vp8.0, vorbis" audio/ogg; codecs="vorbis" audio/mp4; codecs="mp4a.40.5" 注释：如果包含编解码器，则只能返回 "probably"。

type

规定要检测的音频/视频类型。

常用值：

video/ogg
video/mp4
video/webm
audio/mpeg
audio/ogg
audio/mp4

常用值，包括编解码器：

video/ogg; codecs="theora, vorbis"
video/mp4; codecs="avc1.4D401E, mp4a.40.2"
video/webm; codecs="vp8.0, vorbis"
audio/ogg; codecs="vorbis"
audio/mp4; codecs="mp4a.40.5"

注释：如果包含编解码器，则只能返回 "probably"。

返回值

运行结果如图所示？？？？？？？

js代码部分

 1 // JavaScript Document
 2 function $$(id){
 3     return document.getElementById(id);
 4     }
 5     var i=0,j=0,k=0;
 6     function v_chkType(){
 7         var strHTML="";
 8         var arrType=new Array(\'audio/mpeg;\',\'audio/mov;\',
 9         \'audio/mp4;codecs="mp4a.40.2"\',\'audio/ogg;codecs="vorbis"\',
10         \'video/webm;ccodecs="vp8,vorbis"\',\'audio/wav;codecs="1"\');
11         for(intI=0;intI<arrType.length;intI++){
12             switch ($$("vdoMain").canPlayType(arrType[intI])){
13                 case "":
14                 i=i+1;
15                 break;
16                 case "maybe":
17                 j=j+1;
18                 break;
19                 case "probably":
20                 k=k+1;
21                 break;
22                 }
23             }
24             strHTML+="空字符:"+i+"<br>"
25             strHTML+="maybe:"+j+"<br>"
26             strHTML+="prbably:"+k;
27             $$("spnResult").style.display="block";
28             $$("spnResult").innerHTML=strHTML;
29             
30         }

html5 代码部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>检测浏览器支持媒体类型</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="jscript" src="js10.js"></script>

</head>

<body>
<div>
<video id="vdoMain" src="ogg-19M.ogg" width="360px" height="260px"

poster="z2.jpg"></video>
<p id="pTool">
<span onClick=" v_chkType();">检测</span>
</p>
<span id="spnResult"></span>
</div>
</body>
</html>