三种主流流协议的浏览器播放解决方案

最新推荐文章于 2025-04-30 11:24:54 发布

3的4次方

最新推荐文章于 2025-04-30 11:24:54 发布

阅读量2.9k

点赞数 18

分类专栏：音视频文章标签：音视频 rtmp rtsp hls 流媒体

本文链接：https://blog.youkuaiyun.com/m0_58699417/article/details/135441333

版权

三种主流流协议的浏览器播放解决方案

流协议介绍

主流的流协议（streaming protocol）包括HLS、RTMP、RTSP，下面依次介绍下三种视频流。

HLS

HLS（Http Live Streaming) 是一个由苹果公司提出的基于HTTP的流媒体网络传输协议，直接把流媒体切片成一段段，信息保存到m3u列表文件中，可以将不同速率的版本切成相应的片；播放器可以直接使用http协议请求流数据。

优势：

可以在不同速率的版本间自由切换，实现无缝播放
省去使用其他协议的烦恼

劣势:

延迟大小受切片大小影响，不适合直播，适合视频点播。
实时性差，延迟高。HLS 的延迟基本在 10s+ 以上
文件碎片。特性的双刃剑，ts 切片较小，会造成海量小文件，对存储和缓存都有一定的挑战

RTMP

RTMP（Real Time Message Protocol）由 Adobe 公司提出流媒体协议，并且是私有协议，未完全公开，用来解决多媒体数据传输流的多路复用（Multiplexing）和分包（packetizing）的问题，RTMP协议一般传输的是 flv，f4v 格式流。一般在 TCP 1个通道上传输命令和数据。

优势：

在于低延迟，稳定性高，支持所有摄像头格式
专为流媒体开发的协议，对底层的优化比其它协议更加优秀

劣势：

浏览器需要加载 flash插件才能播放。
RTMP 为 Adobe 私有协议，很多设备无法播放，特别是在 iOS 端，需要使用第三方解码器才能播放
基于 TCP 传输，非公共端口，可能会被防火墙阻拦

RTSP

RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的流媒体协议，RTSP协议是共有协议，并有专门机构做维护。是TCP/IP协议体系中的一个应用层协议. RTSP协议一般传输的是 ts、mp4 格式的流，RTSP传输一般需要 2-3 个通道，命令和数据通道分离。基于文本的多媒体播放控制协议. RTSP定义流格式，流数据经由RTP传输；

优势:

RTSP实时效果非常好，适合视频聊天，视频监控等方向。

劣势：

浏览器不能直接播放，只能通过插件或者转码

播放解决方案

HLS与RTMP的播放解决方案

一、使用原生video

如果仅需要在移动设备的WebView上播放，我们可以选择使用html中嵌入hls播放。如下html能够在所有Safari或者安卓3.0以上的WebView上播放。这样就不需要使用第三方的播放器。

<html lang="en">
    <head>
       <meta charset=utf-8/>
    </head>
    <body>
        <div id='player'>
           <video width="640" height="320" controls>
                <source src="http://10.10.5.119/live/livestream.m3u8" type="application/x-mpegURL">
           </video>
        </div>
    </body>
</html>

缺点：

原生H5支持的媒体格式主要有MP4、OGG、WebM、M3U8
M3U8格式播放在pc端浏览器上支持兼容性差
无法播放rtmp流的视频，因为原生不支持flv

优点：

使用原生video，不用安装第三方插件

二、使用flv.js

flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据，使浏览器在不借助Flash的情况下播放FLV成为可能.

import React, {
    PureComponent } from 'react';
import Reflv from 'reflv';

export class HttpFlv extends PureComponent {
   
  render() {
   
    return (
      <Reflv
        url={
   `http://localhost:7001/live/test.flv`}
        type="flv"
        isLive
        cors
      />
    )
  }
}

缺点：

录播，依赖原生HTML5 Video标签和 Media Source Extensions API
直播，依赖录播所需要的播放技术，同时依赖 HTTP FLV 或者 WebSocket 中的一种协议来传输FLV。其中HTTP FLV需通过流式IO去拉取数据，支持流式IO的有fetch或者stream
由于依赖Media Source Extensions，目前所有iOS和Android4.4.4以下里的浏览器都不支持，也就是说目前对于移动端flv.js基本是不能用的。

优点：

由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清
同时支持录播和直播
去掉对Flash的依赖

三、video.js

video.js可以支持网页在所有的浏览器播放，免费的使用很多高级功能。这两种视频流的播放可以使用video.js，由于前端使用react开发，因此需要安装_video.js。_在进行两种不同流播放时需要注意的是设置不同的type,播放rtmp时type是 rtmp/flv，播放hls时type是 application/x-mpegURL。两种视频流都是基于flash的，因此需要flash的支持。

最低0.47元/天解锁文章