video.js 播放 rtsp、hls

最新推荐文章于 2024-09-11 10:51:53 发布

weixin_34292287

最新推荐文章于 2024-09-11 10:51:53 发布

阅读量2.9w

点赞数 3

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c91f8e6e51d45743908dbe6

版权

本文介绍了HLS、RTSP和RTMP三种流媒体协议，重点讲解了它们的特点和适用场景。HLS协议适用于视频点播，通过m3u列表文件实现不同速率的无缝切换。RTSP则是一种实时效果出色的多媒体播放控制协议，适用于视频聊天和监控。RTMP具有低延迟和广泛摄像头格式支持的优点，常用于Flash播放。同时，文章提及了如何安装video.js来播放这些协议的视频。

摘要由CSDN通过智能技术生成

什么是HLS,RTSP,RTMP

HLS（ HTTP Live Streaming）苹果公司提出的流媒体协议，直接把流媒体切片成一段段，信息保存到m3u列表文件中，可以将不同速率的版本切成相应的片；播放器可以直接使用http协议请求流数据,可以在不同速率的版本间自由切换，实现无缝播放；省去使用其他协议的烦恼。缺点是延迟大小受切片大小影响，不适合直播，适合视频点播。

RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的，基于文本的多媒体播放控制协议. RTSP定义流格式，流数据经由RTP传输；RTSP实时效果非常好，适合视频聊天，视频监控等方向。

RTMP（Real Time Message Protocol）有 Adobe 公司提出，用来解决多媒体数据传输流的多路复用（Multiplexing）和分包（packetizing）的问题，优势在于低延迟，稳定性高，支持所有摄像头格式，浏览器加载 flash插件就可以直接播放。

安装video.js

    yarn add video.js videojs-flash //千万不要下载错了，下载前去npm上面搜索一番，选择下载量最高的
    //vue
    import Vue from "vue";
    import video from 'video.js';
    import 'videojs-flash'; // 引入videojs flash
    
    Vue.prototype.$video = video; // 将video.js 实例放在Vue原型上
复制代码