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>

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

好，到此。

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

深入浏览器之页面加载中的计算机网络
当你在浏览器中输入 rainbowinpaper.com 并且按下回车之后发生了什么? 但在说之前我们还是要先了解一下网络分层的概念. 网络分层我们最早接触的网络分层应该是OSI七层参考模型. OS ...
Chrome 将自动阻止 https页面加载 http资源，区分两者协议混杂内容
最近,谷歌浏览器团队发表文章表示,来来计划在 Chrome内将执行https:// 页面不再加载 HTTP 子资源,逐步阻止所有HTTP页面相关的混合内容. 谷歌Chrome团队发文表示,将从今年 1 ...
web前端页面性能优化（提升页面加载速度）
我们都知道,对于web应用来说性能很重要,然而性能的优化相关知识非常庞大而复杂,对于性能优化我们需要做些什么,或者瓶颈是什么通常是我们不太了解的.(当然技术大牛除外) 通过查阅相关资料,了解到了一些关 ...
layui 如何动态加载局部页面_从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！
前言见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
从输入URL到页面加载的过程？由一道题完善自己的前端知识体系！
梳理主干流程这道题上,如何回答呢?先梳理一个骨架. 知识体系中,最重要的是骨架,脉络.有了骨架后,才方便填充细节.所以,先梳理下主干流程: 从浏览器接收url到开启网络请求线程(这一部分可以展开浏览 ...
Firefox 59 正式发布：改进页面加载速度和屏幕截图工具
Firefox 59 已正式发布,包括桌面版和移动版.新版有以下主要变化: 桌面版改进页面加载速度:通过加载网络缓存或用户硬盘上的缓存(Race Cache With Network),提升页面加载 ...
https页面加载http资源的解决方法
前言在公司做了一个官网项目,在浏览器中调试查看页面,页面样式.布局都是按照代码写的那样.没有任何异常.由于公司的服务器还没通过备案,于是我打算先部署在我自己的阿里云服务器中去测试看看.不测还好,一测 ...
从输入 URL 到页面加载完成中间都经历了什么
摘要目录 1.chrome浏览器资源加载时序分析 2.w3c提供的接口performance.timing分析 3.一个完整的URL 解析过程细分介绍 3.1.缓存相关 3.1.1.URL解析 3. ...
试简述smtp通信的三个阶段的过程_从输入URL到页面加载的过程？《转载》
这是我看过这个问题最完整/优质的回答了,转来分享知乎的排版不太好,可以浏览博客原文: http://gaoxiang.ga/index.php/archives/36/gaoxiang.ga 前言 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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