技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

五HTML5-多媒体技术

 收录于 Html
   约 2860 字   预计阅读 6 分钟 
https://bing.ee123.net/img/rand?artid=103903774

《五》HTML5 多媒体技术

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

音视频文件：都是容器文件，也就是在文件里面存放很多数据，包含音视频轨道，其他元数据（音视频封面，标题，子标题，字幕等相关信息）。 编解码器：就是对应的一个编码器，一个解码器。音视频的编解码器就是一组算法，用来对一段特定音视频流进行编码或解码，以便音视频能正常播放。编码器的作用就是对原始文件进行有损压缩，只有这样才能得到更小的文件大小和更高的压缩比。解码器能够读懂特定的容器格式并且对其中的音视频轨道进行解码，然后实现播放。音视频原始数据都比较大，往往通过编解码器对原始音视频文件进行有损压缩，便于在互联网上进行传输或播放。

HTML5 音频播放：

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

您的浏览器不支持 audio 元素 // 如果浏览器不支持，就会显示 audio 开始与结束间的字符串

2. ```
 // 浏览器会自动识别能播放的第一个
您的浏览器不支持 audio 元素

https://i-blog.csdnimg.cn/blog_migrate/bfce302b8c993822887e6f1ea2951438.png

HTML5 视频播放：

在线视频地址：https://media.w3.org/2010/05/sintel/trailer.mp4。

各格式视频下载地址：https://www.sample-videos.com/index.php#sample-mp4-video。

2. ```
[


您的浏览器不支持video元素
](”movie.mp4”)

https://i-blog.csdnimg.cn/blog_migrate/dbe2c83bc7e0e9c041268eefdd0feb69.png

音视频的属性：

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

有些浏览器为了不打扰用户，可能会不允许自动播放，必须让用户手动点击之后才能播放。

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

音视频的方法：

  1. canPlayType() ：检测浏览器是否能播放指定的音视频类型。
test
function supportType(vidType,codType){//参数分别为视频资源类型和编码类型
myVid=document.creatElement(“video”);
isSupp=myVid.canPlayType(vidType+’;codecs=”’+codtype+’”’);
if(isSupp==””){
isSupp=”no”;
}
alert(isSupp);
}
  1. load() ：重新加载音视频。
  2. pause() ：暂停当前播放的音视频。
  3. play() ：开始播放当前的音视频。

音视频的事件：

  1. canplay：当浏览器能够开始播放指定的音视频时触发。
  2. canplaythrough：当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音视频时触发。
  3. loadeddata：当当前帧的数据已加载，但没有足够的数据来播放指定音视频的下一帧时触发。
  4. loadedmetadata：当指定的音视频的元数据已加载时触发。
  5. stalled：在浏览器尝试获取媒体数据，但数据不可用时触发。
  6. loadstart：当浏览器开始寻找指定的音视频时，会发生此事件。
  7. suspend：在媒体数据被阻止加载时触发。 可以是完成加载后触发，或者因为被暂停。
  8. progress：当浏览器正在下载指定的音视频时，会发生此事件。
  9. durationchange：当指定音视频的时长数据发生变化时触发。
  10. ratechange：在音视频播放速度发生改变时触发。
  11. timeupdata：在音视频的播放位置发生改变时触发。
  12. volumechange：在音视频的音量发生改变时触发。
  13. abort：在音视频终止加载时触发。
  14. ended：在音视频播放完成后触发。
  15. error：在音视频加载发生错误时触发。
  16. pause：在音视频暂停时触发。
  17. play：在音视频开始播放时触发。
  18. playing：在音视频因缓冲而暂停或停止后已就绪时触发。
  19. waiting：在视频由于需要缓存下一帧而停止时触发。
  20. seeked：在用户已移动或已跳跃到音视频中的新位置时触发（拖动进度条到新位置时）。
  21. seeking：在用户开始移动或开始跳跃到音视频的新位置时触发（开始拖动进度条时）。
更新于 2020-01-09
 Html
返回 | 主页