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

￡神魔★判官ぃ 2023-05-30 06:07 13阅读 0赞

主要内容让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项目作为测试，我的路径是：

![20191107172522743.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70][]

接下来是 RTMP协议流直播视频。

解决方案：

使用的是静态资源：

![20191107173336217.png][]

新建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>     
         
        <a   
             href="#" 
             style="display:block;width:1040px;height:660px"   
             id="player">  
        </a>  
         
        <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>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 1][]

好，到此。

[20191107172522743.png]: https://img-blog.csdnimg.cn/20191107172522743.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107172910847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw,size_16,color_FFFFFF,t_70
[20191107173336217.png]: https://img-blog.csdnimg.cn/20191107173336217.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191107173640151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Mzg3OTQw,size_16,color_FFFFFF,t_70