HTML页面 加载播放RTMP协议流和HLS协议流直播视频
主要内容让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>
然后随便写个接口跳转到该页面,展示效果,视频正常播放:
好,到此。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~