【前端拓展】视频流基础入门知识

嘉鱼
1,751 阅读6分钟

1、视频和视频流

  • 图片是由像素点组成的图像文件
  • 视频是一系列连续播放的图片
  • 视频流是一种视频数据传输方式

2、常识概念

  • 分辨率：显示器所能显示的像素数量（分辨率越高，图片越清晰）
  • 帧率：1s播放多少帧（帧率越高，视频越流畅）
  • 码率/比特率：1s的视频有多少bit（码率越高，视频越清晰）

3、视频编码/压缩

视频与图片具有空间冗余、时间冗余、视觉冗余、编码冗余的特点。

视频的编码过程即压缩过程。

视频编码的主要作用是将视频像素数据（RGB，YUV等）压缩成为视频码流，从而降低视频的数据量。

编码后的结果是一连串二进制代码。（编码算法的不同导致编码格式的不同，主流浏览器支持的视频编码格式是h264）

  需要注意的是，视频格式和视频编码格式是两个不同的概念。
  
  - 视频编码格式（Codec）是指将视频压缩成码流的算法，它可以压缩音视频数据，减少文件体积，从而方便存储和传输。
  流行的视频编码格式有 H.264、H.265、VP9 等。

  - 视频格式（Container Format）指的是封装格式，是把视频数据和音频数据打包成一个文件的规范，它们通常用于文件的本地存储和传输。
  如 MP4、AVI、FLV、MKV 等。
  仅仅靠看文件的后缀，很难能看出具体使用了什么视音频编码标准。
  
  这两种概念是包含关系，在计算机上，视频文件通常以某种特定格式进行编码和压缩，以便能够更有效地存储和传输数据。
  不同的视频格式具有不同的处理和使用方便性，播放时需要对应的解码器或者播放器来打开实现观看。

image.png

image.png

4、流媒体协议

流媒体技术是指将一连串的媒体数据压缩后，以流的方式在网络中分段传送，实现在网络上实时传输影音以供观赏的一种技术。

这里的实时不是直播概念的实时，而是在观看视频的时候无需先将视频下载到本地，可以一边传输一边观看的实时
某种封装格式支持流媒体，即意为可以“边下边播”

流媒体协议是服务器与客户端之间通信遵循的规定。常见的视频流协议有 RTMP、HTTP、HLS 等。其中 RTMP 协议属于 Adobe 公司提出的推流协议，HLS 协议则是苹果公司推出的流媒体协议，而 HTTP 则是互联网上最常见的应用层协议之一，它也能够用来进行视频流传输。

image.png

5、视频播放器原理

视频播放器播放一个互联网上的视频文件，需要经过以下几个步骤：解协议，解封装，解码视音频，视音频同步。
如果播放本地文件则不需要解协议。
  • 解协议：将流媒体协议的数据，解析为标准的相应的封装格式数据。
  • 解封装：将输入的封装格式的数据，分离成为音频流压缩编码数据和视频流压缩编码数据
  • 解码：将视频/音频压缩编码数据，解码成为非压缩的视频/音频原始数据。
  • 视音频同步：根据解封装模块处理过程中获取到的参数信息，同步解码出来的视频和音频数据，并将视频音频数据送至系统的显卡和声卡播放出来。

请注意：Flash播放器被HTML5所替代。
HTML5可以播放视频是因为HTML5提供了一个内置的<video>标签和相应的API，能够无需使用第三方插件（如Flash）在浏览器中播放音视频。通过加载视频文件URL或网络流URL可以播放视频。

主流互联网视音频平台直播服务的参数对比如表所示（直播）：

image.png

主流网络视音频平台点播服务的参数对比如表所示（点播）：

image.png

5、前端需求

前端的需求一般是从后端获取到视频流地址并解码播放

一些摄像头厂商提供了SDK或API以便于开发者与设备进行交互。
通过调用这些接口，后端可以从设备中获取摄像头的实时视频流地址，并将其输出到前端。
（后端仅作统一管理以及转发，如涉及到前端难以解码的编码格式，需要后端提前进行解码）

6、常用插件

❗下周用react实践一下这些插件，下一篇文章见

  • video标签

    • <video> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

    • 可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

    • 浏览器并不是都支持相同的视频格式，所以你可以在 <source>元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。

    <video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4" /> 
    <source src="movie.ogg" type="video/ogg" /> 
    您的浏览器不支持 video 标签。 
</video>

  • video.js

    • 一个通用的在网页上嵌入视频播放器的 JS 库

    • video.js支持播放视频流。可以使用video.js播放HLS，DASH以及RTMP等多种协议的视频流。

    
  <link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
  <script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>

  <video
      id="my-player"
      class="video-js"
      controls
      preload="auto"
      poster="//vjs.zencdn.net/v/oceans.png"
      data-setup='{}'>
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">
        supports HTML5 video
      </a>
    </p>
  </video>
  
  var options = {};

  var player = videojs('my-player', options, function onPlayerReady() {
    videojs.log('Your player is ready!');

    // In this context, `this` is the player that was created by Video.js.
    this.play();

    // How about an event listener?
    this.on('ended', function() {
      videojs.log('Awww...over so soon?!');
    });
  });

    主要针对HTML5 video标签而开发的插件。

video.js 最初设计的目的是使Web视频更容易使用和访问，所以它还提供了一些额外的功能，例如自定义控件、字幕、广告等功能。 
这使得开发人员可以轻松地对HTML5 Video标签进行自定义，并将视频嵌入到其应用程序中。

原生的video标签不支持Flv格式，需要借助JavaScript库才能播放Flv格式视频。
而FLV.JS就是一个较为流行的解决方案之一。

  • flv.js

    一个用纯 JavaScript 编写的 HTML5 FLV 播放器

    主要是为了使浏览器能够播放FLV格式的视频文件而开发的。(响应速度快，且具有很好的兼容性。)

    <script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
   if (flvjs.isSupported()) {
       var videoElement = document.getElementById('videoElement');
       var flvPlayer = flvjs.createPlayer({
           type: 'flv',
           url: 'http://example.com/flv/video.flv'
       });
       flvPlayer.attachMediaElement(videoElement);
       flvPlayer.load();
       flvPlayer.play();
   }
</script>

参考：

# 视频压缩编码和音频压缩编码的基本原理-雷霄骅

# [总结]视音频编解码技术零基础学习方法-雷霄骅

# 浏览器中的音视频知识总结v1.0(工作中需要和视频打交道必看！)

avatar
文章
阅读
粉丝