HTML页面加载播放RTMP协议流和HLS协议流直播视频

最新推荐文章于 2024-10-15 16:59:55 发布

小目标青年

最新推荐文章于 2024-10-15 16:59:55 发布

阅读量6.7k

点赞数

分类专栏：杂文文章标签： rtmp hls html 加载视频

该文章仅作为个人记录分享，若有其他用途请注明出处、与我沟通。【JCccc】

本文链接：https://blog.csdn.net/qq_35387940/article/details/102958931

版权

杂文专栏收录该内容

9 篇文章 1 订阅

订阅专栏

主要内容让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>

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