主要内容让rtmp或hls的协议流直播视频能在html页面正常显示（这里也是综合参考了网上其余的资料，最终放出下面这些实测可用的方案）。
首先是HLS协议流， 这种是播放m3u8格式的视频。
解决方案：
新建html页面, testHls.html (里面的视频地址我已经改了，请替换成自己的地址)：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端播放m3u8格式视频</title> <link rel="stylesheet" href="videoplayer/video-js.css"> <script src="videoplayer/video.js"></script> </head> <body> <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'> <source src="http://pili-live-hlsxxxxxxxxx.m3u8" type="application/x-mpegURL"> </video> </body> <script> var myVideo = videojs('myVideo',{ bigPlayButton : true, textTrackDisplay : false, posterImage: false, errorDisplay : false, }) myVideo.play() // 视频播放 myVideo.pause() // 视频暂停 </script> </html>
注意静态资源的加载路径，我是用了个springboot项目作为测试，我的路径是：
然后随便写个接口跳转到该页面，展示效果,视频正常播放：
接下来是 RTMP协议流直播视频。
解决方案：
使用的是静态资源：
新建html页面，testPlayer.html：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="rtmpplayer/flowplayer-3.2.8.min.js"></script> <title>FlowPlayer</title> </head> <body> <!-- this A tag is where your Flowplayer will be placed. it can be anywhere --> <a href="#" style="display:block;width:1040px;height:660px" id="player"> </a> <!-- this will install flowplayer inside previous A- tag. --> <script> var urls = "rtmp://pilxxxxxxxx0xxxxx"; flowplayer("player", "rtmpplayer/flowplayer-3.2.18.swf",{ clip: { url: urls, provider: 'rtmp', live: true, }, plugins: { rtmp: { url: 'rtmpplayer/flowplayer.rtmp-3.2.8.swf', netConnectionUrl: urls } } }); </script> </body> </html>
然后随便写个接口跳转到该页面，展示效果,视频正常播放：
好，到此。
