博主后面補充了一篇博文，具體可參考博客：https://www.cnblogs.com/FHC1994/p/11724484.html
------------------------------------------------------------------------------------------------------------------------------------
前言：剛接觸前端，小白一個，如有出錯，請指正，謝謝！
注：視頻格式可以分為適合本地播放的本地影像視頻和適合在網絡中播放的網絡流媒體影像視頻兩大類。
一、互聯網網絡流媒體簡介
HTTP stream是各家自己定義的http流，應用於國內點播視頻網站。
HLS是蘋果公司實現的基於 HTTP 的流媒體傳輸協議，全稱 HTTP Live Streaming，可支持流媒體的直播和點播，主要應用在 iOS 系統，為 iOS 設備（如 iPhone、iPad）提供音視頻直播和點播方案。
RTMP是實時消息傳輸協議，Real Time Messaging Protocol，是 Adobe Systems 公司為 Flash 播放器和服務器之間音頻、視頻和數據傳輸開發的開放協議。協議基於 TCP，是一個協議族，包括 RTMP 基本協議及 RTMPT/RTMPS/RTMPE 等多種變種。RTMP 是一種設計用來進行實時數據通信的網絡協議，主要用來在 Flash/AIR 平台和支持RTMP協議的流媒體/交互服務器之間進行音視頻和數據通信。
HTTP用於點播，本質上還是文件分發，實時性差。
HLS支持點播和直播 ，HLS的延遲在10秒以上。
RTMP本質上是流協議，主要的優勢是：實時性高(實時性一般在3秒之內)、穩定性高。主要用於直播應用，對實時性有一定要求。
RTMP協議一般傳輸的是flv，f4v格式流，RTSP協議一般傳輸的是ts,mp4格式的流。HTTP沒有特定的流。
補注：（可用的直播源地址，於2018年11月21日經測試可用）
HLS直播源地址：
CCTV1高清：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
CCTV3高清：http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
CCTV6高清：http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8
RTMP直播源地址：
香港衛視：rtmp://live.hkstv.hk.lxdns.com/live/hks1
rtmp://live.hkstv.hk.lxdns.com/live/hks2
湖南衛視：rtmp://58.200.131.2:1935/livetv/hunantv
美國1：rtmp://ns8.indexforce.com/home/mystream
美國中文電視：rtmp://media3.sinovision.net:1935/live/livestream
香港財經：rtmp://202.69.69.180:443/webcast/bshdlive-pc
韓國GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
二、示例
環境：videojs7.3.0+chrome瀏覽器
1.HLS測試代碼如下：
<!DOCTYPE html> <html> <head> <title>播放器</title> <!-- 導入的videojs是7.0版本以上的，集成VHS協議庫，可播放HLS流媒體視頻 --> <link href="videolib/css/video-js.min.css" rel="stylesheet" type="text/css"> <script src="videolib/js/video.min.js"></script> </head> <body> <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls> <!-- hls直播源地址：CCTV1高清 --> <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"> </video> <script> var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')}) player.play(); </script> </body> </html>
運行結果：
注：效果感覺不好，不穩定，延時時間很長
2.RTMP測試代碼如下：
<!DOCTYPE html> <html> <head> <title>播放器</title> <!-- 導入的videojs是7.0版本以上的，集成VHS協議庫，可播放HLS流媒體視頻 --> <link href="videolib/css/video-js.min.css" rel="stylesheet" type="text/css"> <script src="videolib/js/video.min.js"></script> <!-- 引入的videojs-flash.js插件主要是為播放rtmp視頻流--> <script src="videolib/videojs-flash.min.js"></script> </head> <body> <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls> <!-- RTMP直播源地址--> <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1"> </video> <script> var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')}) player.play(); </script> </body> </html>
運行結果：
注：有一個錯誤，但是不影響運行，查了一下，說是因為上面代碼src缺少http://，所以在chrome瀏覽器中會出現Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME的問題。
效果：實時性很好，直接運行就可以打開直播源視頻了。
三、一些補充說明
1.對於Video.js 5.x及更低版本，Flash技術是Video.js核心存儲庫的一部分。對於Video.js 6.x及更高版本，Flash技術位於單獨的存儲庫中。videojs-flash.js插件只與Video.js> = 6.0.0一起使用，因為之前的flash技術已構建到版本中！ video.js不能直接播放rtmp流，需要videojs-flash.js 這個插件。
2.對於播放HLS視頻，在videojs7版本之前要引用videojs-contrib-hls.js插件才能播放。videojs7版本之后的，Video.js默認捆綁VHS（VHS是videojs-contrib-hls的繼承者。它是一個源自videojs-contrib-hls存儲庫的源處理程序。雖然videojs-contrib-hls最初設計用於在所有瀏覽器上添加HLS播放，但我們意識到引擎也可以播放其他格式，所以videojs-contrib-hls這個項目已經被棄用，被videojs-http-streaming繼承）。默認情況下，在Video.js 7及以上版本中已經集成Videojs HTTP Streaming（昵稱為VHS），不必使用videojs-http-streaming插件就可以播放HLS，DASH和未來的HTTP流媒體協議視頻。
注意：
1.對於Video.js 7之前的版本（明確說是6版本的），必須使用videojs-http-streaming.js插件才可以播放HLS，DASH和未來的HTTP流媒體協議視頻，即使它們不是本機支持的。
2.VHS支持HLS和DASH和未來的HTTP流媒體協議。
參考網址：
https://blog.videojs.com/introducing-video-js-http-streaming-vhs/
https://www.cnblogs.com/samirchen/p/7066116.html
https://www.cnblogs.com/lidabo/p/7279817.html
再次補充：以上測試是在Hbuilderx環境下實現的，但是換到vscode編輯器運行rtmp流就無法播放！最后發現好像是因為Hbuilderx自帶服務器環境，而vscode沒有，所以會出現這種情況。
----因為看到評論很多人都在索要videojs、videojs-flash.min.js和video-js.min.css文件，所以我又把之前埋沒很久的文件拉出來給大家放到雲盤上了，大家可以免費下載！----
鏈接：https://pan.baidu.com/s/1MC1c_P9j7suNbmw5bBNupg
提取碼：81zh