video.js播放RTMP协议和HLS协议的视频流
RTMP
RTMP协议（Real Time Messaging Protocol）是一种流媒体传输协议，是直播APP中最常用的流媒体传输协议，它最主要的优势就是低延时。
RTMP 协议进行数据传输时，它是一整条数据流被封装成FLV通过HTTP提供出去，因此在服务器不会有落地文件，基于 TCP 长连接，不需要多次建连，所以延时通常为 1-3s，远超HLS
HLS
HTTP Live Streaming协议被缩写为HLS，是苹果公司发布的基于HTTP的流媒体传输协议（因此苹果的所有系统都支持HLS）。
其工作原理是切片式传输，把直播流切成无数片，用户在观看视频时，每次客户端可以只下载一部分，然后在这部分播放时从许多不同的备用源中下载其他资源，因此HLS协议可以任由用户的意愿选择不同的码率。
使用videojs播放视频流
本文使用的是video.js-7.3.0
百度网盘地址：https://pan.baidu.com/s/10Fcxca8ttaP1NRg7L0QL7w
提取码: pofq
播放RTMP协议
PS
video.js 5.x以下版本，Flash技术是Video.js核心存储库的一部分,无需引入。
video.js 6.x以上版本，Flash被剥离，需要单独引入videojs-flash.js，否则无法播放。<head>
<title>播放器</title>
<meta charset="utf-8">
<link href="public/video-js.css" rel="stylesheet">
<script src="public/video.js"></script>
//rtmp协议基于flash，需要引入videojs-flash.js
<script src="public/videojs-flash.js"></script>
</head>
<body>
<video id='myvideo' width=960 height=540 class="video-js vjs-default-skin">
//湖南卫视视频流地址
<source src="rtmp://58.200.131.2:1935/livetv/hunantv">
</video>
</body>
<script>
window.onload = function () {
let player = videojs('myvideo', {}, function () {
console.log('videojs播放器初始化成功')
});
player.play();
};
</script>播放HLS协议
PS
video.js6.0版本需要引入videojs-http-streaming.js
video.js7.0以上版本无需引入<head>
<title>播放器</title>
<meta charset="utf-8">
<link href="public/video-js.css" rel="stylesheet">
<script src="public/video.js"></script>
</head>
<body>
<video id='myvideo' width=960 height=540 class="video-js vjs-default-skin">
//CCTV2的视频流地址
<source src="http://ivi.bupt.edu.cn/hls/cctv2hd.m3u8">
</video>
</body>
<script>
window.onload = function () {
let player = videojs('myvideo', {}, function () {
console.log('videojs播放器初始化成功')
});
player.play();
};
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。