主要内容让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> 然后随便写个接口跳转到该页面，展示效果,视频正常播放：