《五》HTML5 多媒体技术

花铛

已于 2025-01-21 17:44:16 修改

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

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

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

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/103903774

HTML5 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨HTML5音视频技术，介绍多媒体概念，音视频文件格式，编解码器原理，以及如何在网页中使用HTML5播放音视频。涵盖播放控制，事件监听，和浏览器兼容性测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多媒体：是指多种媒体的综合。一般包括文本、声音、图像等多种形式。之前想要播放互联网上的音视频，必须先安装一些插件；现在 HTML5 多媒体技术使得开发人员不必使用插件就能播放音视频。

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

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

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>

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：设置或返回音视频在结束时是否重新播放。

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

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

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

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

muted：设置或返回音视频是否被静音（关闭声音）。返回值为布尔值类型。
paused：检查音视频是否已暂停，返回值是布尔值。
duration：获取当前音视频的总时间。
played：返回 TimeRanges 对象，表示用户已经播放或看到的音视频范围。通过TimeRanges 的 lines 属性可以获取已经播放部分的时间段，通过 TimeRanges 的 start/end 方法用于返回已经播放时间段的开始/结束时间。
preload：设置或返回是否在页面加载后立即加载音视频。
属性值：
- none：不加载。。
- metedata：仅加载一些元数据，包括视频的第一帧，歌曲的曲目、列表、总的播放时间等。
- auto：全部加载。
seekable：返回 TimeRanges 对象，表示音视频中用户可拖动缓存播放的位置。返回的对象有 start 和 end 两个方法。
seeking：返回用户目前是否正在音视频中请求数据。
volume：设置或返回音视频的当前音量，必须是介于 0.0 和 1.0 之间的数字。
readyState：返回音视频的当前就绪状态。0 代表当前位置没有有效的媒体资源，也就是没有连接到服务器端，获取不到媒体资源；1 代表媒体资源正在加载当中，已经连接到服务器端准备下载，但当前位置还没有加载到有效的媒体数据进行播放；2 代表已经获取到当前的播放数据，数据已经开始下载到本地，但还没有足够的数据进行播放；3 代表在当前位置已经获取到后续要播放的媒体的数据，可以进行播放；4 代表媒体数据已经可以进行播放，且浏览器正在按照一定的播放速度进行加载，且后续有足够的数据让前面按正常的速度播放，而不会使浏览器的播放速度赶不上最后加载进来的数据的末端。
networkState：返回音视频的当前网络状态。0 代表元素尚未初始化；1 代表加载完成，网络目前是空闲的；2 代表媒体数据正在加载到媒体播放器当中；3 代表因为不存在这个技术的编码格式，加载失败。

音视频的方法：

canPlayType()：检测浏览器是否能播放指定的音视频类型。

<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);
}