主要實現方式：使用H5的video 元素結合H5的網絡頻播放器（video.js）實現rtmp流的直播播放
video.js 介紹
Video.js 是一個通用的在網頁上嵌入視頻播放器的 JS 庫，Video.js 自動檢測瀏覽器對 HTML5 的支持狀況，若是不支持 HTML5 則自動使用 Flash 播放器。
優勢：
1.它是開源免費的，你能夠在github很容易的獲取它的最新代碼。
2.使用它很是的容易，只要花幾秒鐘就能夠架起一個視頻播放頁面。
3.它幾乎兼容全部的瀏覽器，而且優先使用html5，在不支持的瀏覽器中，會自動使用flash進行播放。
4. 界面能夠定製，純javascript和css打造。說明文檔也很是的詳細。
注：html5的video標籤只支持mp四、webm、ogg三種格式，不支持flv，flash格式， flv格式是flash專用的，rtmp流爲flv格式的，必須使用flash播放器，在video.js內部能夠檢測瀏覽器是否支持html5播放器直接播放，若是不支持內部會自動調用瀏覽器的flash播放器播放視頻。Edge、谷歌瀏覽器中網站默認是禁用flash的，手動設置爲容許flash便可
代碼示例
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>使用video.js實現rtmp流的直播播放</title>
6 <!--引入播放器樣式-->
7 <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
8 <!--引入播放器js-->
9 <script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
10 <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
11 </head>
12 <body>
13
14
15 <!--vjs-big-play-centered 播放按鈕居中-->
16 <!--poster默認的顯示界面，就是還沒點播放，給你顯示的界面-->
17 <!--controls 規定瀏覽器應該爲視頻提供播放控件-->
18 <!--preload="auto" 是否提早加載-->
19 <!--autoplay 自動播放-->
20 <!--loop=true 自動循環-->
21 <!--data-setup='{"example_option":true}' 能夠把一些屬性寫到這個裏面來，如data-setup={"autoplay":true}-->
22
23 <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
24 poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
25 <!--src: 規定媒體文件的 URL type:規定媒體資源的類型-->
26 <source src='rtmp://221.222.249.140/springmvc/hello1' type='rtmp/flv'/>
27 </video>
28 <script type="text/javascript">
29 // 設置flash路徑,用於在videojs發現瀏覽器不支持HTML5播放器的時候自動喚起flash播放器
30 videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf'; 31 var player = videojs('my-player'); //my-player爲頁面video元素的id
32 player.play(); //播放
33 // 1. 播放 player.play()
34 // 2. 中止 player.pause()
35 // 3. 暫停 player.pause()
36 </script>
37 </body>
38 </html>