【前端拓展】视频流基础入门知识 |
您所在的位置：网站首页 › 前端展示视频 › 【前端拓展】视频流基础入门知识 |
【前端拓展】视频流基础入门知识
|
1、视频和视频流
图片是由像素点组成的图像文件
视频是一系列连续播放的图片
视频流是一种视频数据传输方式
2、常识概念
分辨率：显示器所能显示的像素数量（分辨率越高，图片越清晰）
帧率：1s播放多少帧（帧率越高，视频越流畅）
码率/比特率：1s的视频有多少bit（码率越高，视频越清晰）
3、视频编码/压缩
视频与图片具有空间冗余、时间冗余、视觉冗余、编码冗余的特点。 视频的编码过程即压缩过程。 视频编码的主要作用是将视频像素数据（RGB，YUV等）压缩成为视频码流，从而降低视频的数据量。 编码后的结果是一连串二进制代码。（编码算法的不同导致编码格式的不同，主流浏览器支持的视频编码格式是h264） 需要注意的是，视频格式和视频编码格式是两个不同的概念。 - 视频编码格式（Codec）是指将视频压缩成码流的算法，它可以压缩音视频数据，减少文件体积，从而方便存储和传输。 流行的视频编码格式有 H.264、H.265、VP9 等。 - 视频格式（Container Format）指的是封装格式，是把视频数据和音频数据打包成一个文件的规范，它们通常用于文件的本地存储和传输。 如 MP4、AVI、FLV、MKV 等。 仅仅靠看文件的后缀，很难能看出具体使用了什么视音频编码标准。 这两种概念是包含关系，在计算机上，视频文件通常以某种特定格式进行编码和压缩，以便能够更有效地存储和传输数据。 不同的视频格式具有不同的处理和使用方便性，播放时需要对应的解码器或者播放器来打开实现观看。 复制代码流媒体技术是指将一连串的媒体数据压缩后，以流的方式在网络中分段传送，实现在网络上实时传输影音以供观赏的一种技术。 这里的实时不是直播概念的实时，而是在观看视频的时候无需先将视频下载到本地，可以一边传输一边观看的实时 某种封装格式支持流媒体，即意为可以“边下边播” 复制代码流媒体协议是服务器与客户端之间通信遵循的规定。常见的视频流协议有 RTMP、HTTP、HLS 等。其中 RTMP 协议属于 Adobe 公司提出的推流协议，HLS 协议则是苹果公司推出的流媒体协议，而 HTTP 则是互联网上最常见的应用层协议之一，它也能够用来进行视频流传输。 请注意：Flash播放器被HTML5所替代。 HTML5可以播放视频是因为HTML5提供了一个内置的标签和相应的API，能够无需使用第三方插件（如Flash）在浏览器中播放音视频。通过加载视频文件URL或网络流URL可以播放视频。 主流互联网视音频平台直播服务的参数对比如表所示（直播）： 主流网络视音频平台点播服务的参数对比如表所示（点播）： 前端的需求一般是从后端获取到视频流地址并解码播放 一些摄像头厂商提供了SDK或API以便于开发者与设备进行交互。 通过调用这些接口，后端可以从设备中获取摄像头的实时视频流地址，并将其输出到前端。 （后端仅作统一管理以及转发，如涉及到前端难以解码的编码格式，需要后端提前进行解码） 复制代码 6、常用插件❗下周用react实践一下这些插件，下一篇文章见 video标签 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 标签用于音频内容，但是 元素可能在用户体验上更合适。 可以在 和 标签之间放置文本内容，这样不支持 元素的浏览器就可以显示出该标签的信息。 浏览器并不是都支持相同的视频格式，所以你可以在 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。 您的浏览器不支持 video 标签。 复制代码video.js 一个通用的在网页上嵌入视频播放器的 JS 库 video.js支持播放视频流。可以使用video.js播放HLS，DASH以及RTMP等多种协议的视频流。 To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 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格式的视频文件而开发的。(响应速度快，且具有很好的兼容性。) 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(); } 复制代码 参考：# 视频压缩编码和音频压缩编码的基本原理-雷霄骅 # [总结]视音频编解码技术零基础学习方法-雷霄骅 # 浏览器中的音视频知识总结v1.0(工作中需要和视频打交道必看！) |
【本文地址】