《五》HTML5 多媒体技术

花铛

已于 2022-07-04 15:58:39 修改

阅读量1k

点赞数 1

分类专栏： HTML5 文章标签： HTML5

于 2020-01-09 10:50:47 首次发布

本文链接：https://blog.csdn.net/wsln_123456/article/details/103903774

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

多媒体：是指多种媒体的综合。一般包括文本，声音，图像等多种形式。

之前想要播放互联网上的音视频，必须先安装一些插件。现在HTML5多媒体技术使得开发人员不必使用插件就能播放音视频。

音视频文件：都是容器文件，也就是在文件里面存放很多数据，包含音视频轨道，其他元数据（音视频封面，标题，子标题，字幕等相关信息）。

编解码器：就是对应的一个编码器，一个解码器。音视频的编解码器就是一组算法，用来对一段特定音视频流进行编码或解码，以便音视频能正常播放。编码器的作用就是对原始文件进行有损压缩，只有这样才能得到更小的文件大小和更高的压缩比。解码器能够读懂特定的容器格式并且对其中的音视频轨道进行解码，然后实现播放。音频与视频原始数据都比较大，往往通过编解码器对原始音频与视频文件进行有损压缩，便于在互联网上进行传输或播放。

常用的音频编解码器：

AAC：高级音频编码。相对于mp3，AAC的音质更佳，文件更小。苹果，诺基亚等公司的设备支持AAC格式。
mp3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3，主要是在美国和日本。
Ogg Vorbis：是一种文件格式，开源且免专利使用费。

常用的视频编解码器：

AVC：是MPEG-4标准所定义的最新格式，同时也是技术含量最高，代表最新技术水平的视频编码格式之一。目前是主流。
VP8：Google公司的产品。是一个免版权费用可自由使用的技术，任何使用都不限版权限制，使用的比较少。
Ogg Theora：是Xiph.Org是第一个公开开发的视频编解码器，在Ogg项目和Ogg流媒体服务器中使用。

HTML5音频播放：

根据音乐名搜索在线音频地址：https://music.liuzhijin.cn/

<audio src=”horse.mp3” controls>
      您的浏览器不支持audio元素 // 如果浏览器不支持，就会显示 audio 开始与结束间的字符串
</audio>

<audio width=” “  height=” “ controls>
    <source src=”horse.ogg ” type=”audio/ogg”>//浏览器会自动识别能播放的第一个         
    <source src=”hrose.mp3 ” type=”audio/mpeg”>
    您的浏览器不支持audio元素
</audio>

type：音频文件的格式

HTML5视频播放：

在线视频地址：https://media.w3.org/2010/05/sintel/trailer.mp4
各格式视频下载地址：https://www.sample-videos.com/index.php#sample-mp4-video

<video src=”movie.ogg” controls=”controls”>
       您的浏览器不支持video元素
</video>

<video width=” ” height=” ” controls=”controls”>
    <source src=”movie.mp4” type=”video/mp4”>
    <source src=”movie.ogg” type=”video/ogg”>
    您的浏览器不支持video元素
</video>

音视频的属性：

width、height
src：指定媒体资源的url地址。
controls：为媒体文件提供用于播放的控制条。包含播放，暂停，定位，时间显示，音量控制，全屏切换等常用控件。
buffered：确认浏览器已经缓存媒体文件，返回一个TimeRanges对象，TimeRanges对象有两个方法start()和end()，获取缓存范围。
```
function getFirstBuffRange(){
   alert(“strat:”+myVid.buffered.start(0)+”end:”+myVid.buffered.end0));//获取第一个缓存范围
}
```
autoplay：是否页面加载音视频一旦就绪就开始自动播放。

有些浏览器为了不打扰用户，可能会不允许自动播放，必须让用户手动点击之后才能播放。
playbackRate：设置或返回音视频的当前播放速度。
defaultPlaybackRate：设置或返回音视频的默认播放速度，默认为1。

loop：设置或返回音视频在结束时是否重新播放，属性值为ture或false。

function getFirstBuffRange(){
    myVid.loop=ture;
    myVid.load();//让它重新加载一下
}

currentSrc：返回当前音视频的URL。如果没有指定地址，则返回一个空串。

currentTime：获取或设置当前的播放位置。返回值为时间，单位为秒。

function getCurrrentTime(){
     alert(myVid.currentTime);//获取当前的播放位置
}
function setCurrrentTime(){
     myVid.currentTime=5;//设置当前播放的时间点。也就是之前的时间没有了，从5秒开始播放
}

muted：设置或返回音视频是否被静音（关闭声音）。返回值为布尔值类型。
networkState：返回音视频的当前网络状态。0代表元素尚未初始化；1代表加载完成，网络目前是空闲的；2代表媒体数据正在加载到媒体播放器当中；3代表因为不存在这个技术的编码格式，加载失败。
paused：检查音视频是否已暂停，返回值是布尔值。
duration：获取当前音视频的总时间。
played：返回TimeRanges对象，表示用户已经播放或看到的音视频范围。通过TimeRanges的lines属性可以获取已经播放部分的时间段，通过TimeRanges的start/end方法用于返回已经播放时间段的开始/结束时间。
preload：设置或返回是否在页面加载后立即加载音视频。

属性值：
1.none：页面制作人员认为用户不希望看到此音视频或减少HTTP请求，表示不播放此视频；
2.metedata：页面制作人员认为用户不希望加载此视频，但提供给用户一些元数据，包括视频的第一帧，歌曲的曲目、列表、总的播放时间等;
3.auto:全部加载；
readyState：返回音视频的当前就绪状态。0代表当前位置没有有效的媒体资源，也就是没有连接到服务器端，获取不到媒体资源；1代表媒体资源正在加载当中，已经连接到服务器端准备下载，但当前位置还没有加载到有效的媒体数据进行播放；2代表已经获取到当前的播放数据，数据已经开始下载到本地，但还没有足够的数据进行播放；3代表在当前位置已经获取到后续要播放的媒体的数据，可以进行播放；4代表媒体数据已经可以进行播放，且浏览器正在按照一定的播放速度进行加载，且后续有足够的数据让前面按正常的速度播放，而不会使浏览器的播放速度赶不上最后加载进来的数据的末端。
seekable：返回timeRanges对象，表示音视频中用户可拖动缓存播放的位置。返回的对象有start和end两个方法。

当网络下载音视频资源时，是按段来下载的。
seeking：返回用户目前是否正在音视频中请求数据。
volume：设置或返回音视频的当前音量，必须是介于0.0和1.0之间的数字。

音视频的方法：

canPlayType()：检测浏览器是否能播放指定的音视频类型。
属性值:
1. probably：浏览器最可能支持该音视频类型
2. maby：浏览器也许支持该音视频类型
3. “”：浏览器不支持该音视频类型
```
<button onclick=”supportType(‘video/ogg’,’theora,vorbis’) type=”button”>test</button>
function supportType(vidType,codType){//参数分别为视频资源类型和编码类型
    myVid=document.creatElement(“video”);
    isSupp=myVid.canPlayType(vidType+’;codecs=”’+codtype+’”’);
    if(isSupp==””){
        isSupp=”no”;
    }
   alert(isSupp);
}   
```
参数的常用值：
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”
load()：重新加载音视频元素。用于在更改来源或其他设置后对音视频元素进行更新。
pause()：暂停当前播放的音视频。
play()：开始播放当前的音视频。所有主流浏览器都支持play()方法。