Web多媒体入门|青训营笔记

30Curry
93 阅读3分钟

这是我参与[第四届青训营]笔记创作活动的第十五天

01、Web多媒体历史

image.png

  1. Flash时代
    已经开摆了

  2. HTML5时代
    至今还在用，但是audio等标签完全不够用，亟待扩展

  3. Media Source Extension（MSE）时代
    媒体资源扩展，未来的发展趋 势

基础知识

01、编码格式

图像基本概念

  • 图像分辨率: 用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
  • 图像深度︰ -图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位,像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个﹔一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。

视频基本概念

  • 分辨率︰每一帧的图像分辨率
  • 帧率∶视频单位时间内包含的视频帧的数量
  • 码率:就是指视频单位时间内传输的数据量,一般我们用kbps来表示，即千位每秒。

视频帧：

  • I帧：帧内编码帧
  • P帧：前向预测编码帧
  • B帧：双向预测编码帧

image.png

image.png

GOP(group of pocture)

两个帧之间的间隔

image.png

02、为什么要编码？

  • 空间冗余
  • 时间冗余
  • 编码冗余
  • 视觉冗余

03、编码数据处理流程

预测->变换->量化->熵编码 image.png

04、常用编码格式

image.png H.262,H.264,H.265,H.266常用主流编码格式

  • H.262：用于数字电视、光盘
  • H.264：各大视频平台(PC端)
  • H.265:视频平台(手机端)
  • H.266:VR、各种传达设备

02、封装格式

封装格式：存储音视频、图片或者字幕信息的一种容器

image.png

image.png

03、多媒体元素和扩展API

image.png

video元素

    <! DOCTYPE html><html>
<body>
<video src="./video.mp4" muted autoplay controls width=600 height=300></video>
<video muted autoplay controls width=600 height=300>
<source src="./video.mp4"></source>
</video>
</body></html>

audio和video元素方法

image.png

<! DOCTYPE html><html>
<body>
<button onclick="playVid()"">播放视频</ button><button onclick="pauseVid( )">暂停视频</ button><button onclick="loadVid()">重新加载视频</button>
<video id="vs" src="demo .mp4"></video>
<script>
const myvideo = document.getElementById( "vs" );
function playvid() {
myvideo.play( );
}
function pausevid( ) {
myVideo. pause( );
}
function loadvid() {
myvideo .load( );
}
            </script>
      </body>
</html>

audio和video元素属性

image.png

<!DOCTYPE html><html>
body>
<button onclick="getVolume()">音量是多少?</ button>
<button onclick="setVolume( )">将视频音量设置为20%</button><button onclick=" getCurTime( )">获得当前播放时间</button>
<button onclick="setCurTime()">将插放时间设置为第5秒</button>
<video id="vs" src="demo.mp4"></video>
<script>
const myvideo = document. getElementById( "vs" );function getvolume() {
alert( myvideo.volume);}
function setvolume() {
myVideo.volume = 0.2;
}
function getCurTime( ) {
alert( myvideo . currentTime ) ;
}
function setCurTime() {
myVideo.currentTime = 5;
}
         </script>
     </body>
</html>

audio和video元素事件

image.png

<! DOCTYPE html><html>
<body>
<video id="vs" src="demo.mp4"></video><script>
const myvideo = document.getElementById( "vs");
myVideo .addEventListener( "canplay ' , function() {
alert( 'canplay ' );
});
myVideo . addEventListener( " pause ', function() {
alert( ' pause' );
});
myvideo. addEventListener( 'play ' , function( ) {
alert( 'play ' );
});
myvideo.addEventListener( "waiting ', function( ) {
alert( 'waiting ' );
 );
      </script>
   </body>
</html>

audio和video元素缺陷

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

媒体源扩展API(Media Source Extensions)

  1. 创建mediaSource实例
  2. 创建指向mediaSource的URL
  3. 监听sourceopen事件
  4. 创建sourceBuffer
  5. 向sourceBuffer中加入数据
  6. 监听updateend事件

image.png

MSE播放流程

image.png

播放器播放流程

image.png

MP4和fmp4

image.png

04、流媒体协议

image.png 前三个是常用的协议

image.png

05、应用场景

image.png

06、总结与展望

总结

  • flash > H5 video MSE
  • 编码格式、封装格式、多媒体元素、流媒体协议
  • 应用场景

新技术标准

  • Webassembly
  • WebCodecs
  • WebGPU
  • WebVR、WebXR
avatar
文章
阅读
粉丝