《五》HTML5 多媒体技术

花铛

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

阅读量930

点赞数 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()方法。

音视频的事件：

canplay：当浏览器能够开始播放指定的音视频时，会发生canplay事件。
canplaythrough：当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音视频时，会发生canplaythrough事件。
loadeddata：当当前帧的数据已加载，但没有足够的数据来播放指定音视频的下一帧时，会发生loadeddata事件。
loadedmetadata：当指定的音视频的元数据已加载时，会发生此事件。

元数据包括时长，尺寸(仅视频)以及文本轨道
stalled：在浏览器尝试获取媒体数据，但数据不可用时触发。
loadstart：当浏览器开始寻找指定的音视频时，会发生此事件。
suspend：在媒体数据被阻止加载时触发。可以是完成加载后触发，或者因为被暂停。
progress：当浏览器正在下载指定的音视频时，会发生此事件。
durationchange：当指定音视频的时长数据发生变化时，会发生此事件。
ratechange：在音视频播放速度发生改变时触发。
timeupdata：在音视频的播放位置发生改变时触发。
volumechange：在音视频的音量发生改变时触发。
abort：在音视频终止加载时触发。
ended：在音视频播放完成后触发。
error：在音视频加载发生错误时触发。
pause：在音视频暂停时触发。
play：在音视频开始播放时触发。
playing：在音视频因缓冲而暂停或停止后已就绪时触发。
waiting：在视频由于需要缓存下一帧而停止时触发。
seeked：在用户已移动或已跳跃到音视频中的新位置时触发。（拖动进度条到新位置时）
seeking：在用户开始移动或开始跳跃到音视频的新位置时触发。（开始拖动进度条时）

花铛

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
《五》HTML5 多媒体技术

多媒体：是指多种媒体的综合。一般包括文本，声音，图像等多种形式。音视频文件：都是容器文件，也就是在文件里面存放很多数据，包含音视频轨道，其他元数据（音视频封面，标题，子标题，字幕等相关信息）。编解码器：就是对应的一个编码器，一个解码器。音视频的编解码器就是一组算法，用来对一段特定音视频流进行编码或解码，以便音视频能正常播放。编码器的作用就是对原始文件进行有损压缩，只有这样才能得到更小的文件大小和更高的压缩比。解码器能够读懂特定的容器格式并且对其中的音视频轨道进行解码，然后实现播放。音频与视频原始数据都比较大
复制链接

扫一扫