HTML 直播 RTMP流实时播放

直接帖代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="playercontainer"></div>
<script type="text/javascript" src="js/cyberplayer.js"></script>
<script type="text/javascript">var player = cyberplayer("playercontainer").setup({width: 680,height: 448,file: "rtmp://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1",autostart: true,stretching: "uniform",volume: 100,controls: true,rtmp: {reconnecttime: 5, // rtmp直播的重连次数bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒},ak: "gC4c68fZAyFKhKgjjFWIhyeNDC0V9x2n"});
</script>
</body>
</html>


这是 我自己修改了js之后的效果,去掉了百度ak验证,去掉了logo,其他功能都正常,可以用,代码都是封装好的,对自己来说也简单些。

关于cyberplayer参数设置说明:

flashplayer 指定flash播放器swf文件的存放地址,可以是相对路径,也可以http协议开头的绝对路径。省略该参数则自动在js所在路径寻找cyberplayer.flash.swf文件。
width 指定要创建的播放窗口的宽度。
height 指定要创建的播放窗口的高度。
autostart 设置是否在播放器载入后自动播放:true : 自动播放;false : 不自动播放。
repeat 设置视频的重复播放模式,重复模式分为:1.false:无重复; 2.true:重复播放
file 设置媒体流名称或文件名或M3U8播放列表地址
image 设置媒体流的预览图
volume 设置播放器音量大小,范围(0 - 100)
controls 设置播放器控制条的显示模式,显示模式分为:1.none:不显示;2.over:悬浮(鼠标无操作时自动隐藏)
barLogo 设置是否显示Logo,controls的子参数,可选值为true (显示),false(不显示)
skin 设置播放器皮肤包
stretching 设置播放器缩放方式,缩放方式分为:1.none:不缩放;2.uniform:添加黑边缩放;3. exactfit:改变宽高比缩到最大;4.fill:剪切并缩放到最大(默认方式为uniform)

源码下载:链接: https://pan.baidu.com/s/1Ls8K757KZ3t-iCSWFfXMkQ 提取码: pffb

这个是百度云提供的,目前需要ak验证,大家可以自行研究一下

HTML 直播 RTMP流实时播放相关推荐

  1. Android 直播RTMP流

    原文链接 : How To Stream RTMP live in Android 原文作者 : Mohit Gupt 译文出自 : 开发技术前线 www.devtf.cn 译者 : ayyb1988 ...

  2. 小程序实现RTMP/HLS协议直播监控视频实时播放实现步骤

    小程序实现监控视频实时播放实现步骤 简述:RTMP协议直播视频,可使用小程序live-player组件实现视频播放,暂只针对国内主体特定类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发 ...

  3. 海康API——获取监控点预览取流URL,获取的rtmp流不能播放

    取rtmp流时,不要expand这一句

  4. RTMP流视频测试工具(简直好使极了)

    要做一个android端的流媒体播放器,获取服务器推的rtmp流.我按照网上的教程使用vitamio库https://github.com/yixia/VitamioBundle,demo里面列举了很 ...

  5. Android 音视频深入 十七 FFmpeg 获取RTMP流保存为flv (附源码下载)

    项目地址 https://github.com/979451341/RtmpSave 这个项目主要代码我是从雷神那弄过来的,不愧是雷神,我就配个环境搞个界面就可以用代码了. 这一次说的是将RTMP流媒 ...

  6. android flv 编码器,Android 音视频深入 十七 FFmpeg 获取 RTMP 流保存为 flv (附源码下载)...

    Android 音视频深入 十七 FFmpeg 获取 RTMP 流保存为 flv (附源码下载) 项目地址 https://github.com/979451341/RtmpSave 这个项目主要代码 ...

  7. java + nginx + ffmpeg + vue实现摄像头,rtmp、rtsp直播流协议的实时播放

    目录 大致流程 环境: CentOS 7 安装 ffmpeg docker安装nginx-rtmp nginx-rtmp配置文件详解 例子 java案例 pom依赖 代码案例 前端案例(vue) ja ...

  8. 如何让ffplay或者ffmpeg支持H265编码的rtmp/http-flv 实时直播流

    很多初学者不知道ffplay或者ffmpeg是不支持flv封装的rtmp/http-flv流的,其原因是flv不支持H265编码payload的,因为当时制定flv封装协议的时候,H265还没出来,现 ...

  9. java做flv直播服务器_一种RTMP直播流到HTTPFLV直播流实时转换系统及其工作方法与流程...

    本发明属于互联网的音视频技术领域,具体涉及一种RTMP直播流到HTTP FLV直播流实时转换系统及其工作方法. 背景技术: 在传统互联网直播领域,PC端采用RTMP协议进行视频直播,国内一部分CDN服 ...

最新文章

  1. 合并道路_资质改革已经确定!盘点被合并的资质!有这资质的要注意了
  2. 手把手教你安装Flutter(Flutter起步之安装)
  3. centos下安装VMware Server 虚拟机的方法
  4. GOF之创建型模式(重点)
  5. mysql 主从 通俗易懂_MySQL 主从同步架构中你不知道的“坑”(完结篇)
  6. Docker下redis与springboot
  7. 菜鸟入门【ASP.NET Core】6:配置的热更新、配置的框架设计
  8. 若依前后端分离如何写移动端接口_前后端分离架构概述
  9. php怎么限制文章标题的字数,文章标题在WordPress中显示的长度即字数如何限制呢?...
  10. Jquery点点滴滴-draggable对象和droppable对象
  11. 技术选型和知识点介绍(下)
  12. unity 给图片边缘_Unity 截图选择框,中间全透明,边缘半透明
  13. 【角度刁钻】如果把线程当作一个人来对待,秒懂
  14. xp 计算机配置,xp怎么查看电脑配置
  15. Spark机器学习实验
  16. GPS导航仪的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  17. 蚂蚁区块链第15课 JS SDK概述及API接口速查
  18. 录屏状态监听之防录屏 - iOS
  19. GB2312介绍及字库使用
  20. 岳父岳母-寄快递的特殊方式

热门文章

  1. 苹果原装转接头不能连html,变革之际 iPhone 7P原装lightning耳机及转接头拆解
  2. 数据解读 | 广东省内,谁才有资格做下一个深圳?
  3. 宏文件下载_EPLAN~宏资源获取
  4. 复旦大学2019计算机考研,2019年复旦961软件工程专硕考研初试363+复试经验分享
  5. 扫描二维码如何实现从微信内直接跳转外部浏览器打开指定页面
  6. 前端Web工程师学习路线
  7. 区块链入华十年兴衰录
  8. 全面了解光纤跳线的应用及使用注意事项
  9. C语言排列组合(函数
  10. HTML3D立体城市特效代码