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> 

然后随便写个接口跳转到该页面,展示效果,视频正常播放:

 

好,到此。

posted on   小目标青年  阅读(1319)  评论(1编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

点击右上角即可分享
微信分享提示