这是我参与「第四届青训营 」笔记创作活动的的第15天。

流媒体行业在现在碎片化时间的时代逐渐兴起，丰富了我们的娱乐生活，在环境的推动下web的多媒体技术也是有了巨大的突破和发展。而这节课主要讲的就是Web多媒体技术：

一、本堂课重点内容：

• web多媒体的历史
• 多媒技术的介绍
• Web多媒体的实现

二、详细知识点介绍：

Web多媒体历史

• Flash(1994-2020)：浏览器不支持音频和视频，因而使用第三方插件来实现

• HTML5：原生支持音视频播放，但是功能有效

  • 支持的视频格式少
  • 浏览器接管数据请求

• Media Source Extensions API：实现多视频格式播放

• 当前：MSE为主，标签为辅

基础知识

图片

图像分辨率：用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。

图像深度 ：图像深度十指存储像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数或可能的灰度级数。

视频

分辨率：每一帧图像的分辨率。

帧率：视频单位时间内包含的视频帧的数量

码率：视频单位时间内传输的数据量，kbps表示，即千位每秒

多媒体元素和扩展API

<audio>

<audio controls>\
  <source src="horse.mp3" type="audio/mpeg">\
  <source src="horse.ogg" type="audio/ogg">\
  Your browser does not support this audio format.\
</audio>

<video>

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
    <source src="movie.webm" type="video/webm"> 
    <object data="movie.mp4" width="320" height="240"> 
        <embed src="movie.swf" width="320" height="240"> 
    </object> 
</video>

多媒体元素和扩展API

不支持直接播放hls、flv等视频格式、视频资源的请求和加载无法通过代码控制、分段加载（节约流量）、清晰度无缝切换、精确预加载

媒体源扩展API（Media Source Extension）

• 无插件在web端播放流媒体
• 支持播放hls、flv、mp4等格式视频
• 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等

三、课后个人总结：

网页中的多媒体是逐渐增加，逐渐发展的，网页技术的发展能够显示的媒体的形式也逐渐增加。网页中使用多媒体会出现一些问题，在使用时不应滥用，在网页设计时也应考虑到网页的性能问题，在出现多媒体在网页中使用的问题时应该采取多种方式进行解决。