利用H5实现RTMP流的WEB移动端直播

主要实现方式:使用H5的video 元素结合H5的网络频播放器(video.js)实现rtmp流的直播播放

video.js 介绍

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。

优点:

1.它是开源免费的,你可以在github很容易的获取它的最新代码。

2.使用它非常的容易,只要花几秒钟就可以架起一个视频播放页面。

3.它几乎兼容所有的浏览器,并且优先使用html5,在不支持的浏览器中,会自动使用flash进行播放。

4. 界面可以定制,纯javascript和css打造。说明文档也非常的详细。

注:html5的video标签只支持mp4、webm、ogg三种格式,不支持flv,flash格式, flv格式是flash专用的,rtmp流为flv格式的,必须使用flash播放器,在video.js内部可以检测浏览器是否支持html5播放器直接播放,如果不支持内部会自动调用浏览器的flash播放器播放视频。Edge、谷歌浏览器中网站默认是禁用flash的,手动设置为允许flash即可

代码示例

1

2

3

4

5

使用video.js实现rtmp流的直播播放

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24 poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>

25

26

27

28

29 // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器

30 videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';

31 var player = videojs('my-player'); //my-player为页面video元素的id

32 player.play(); //播放

33 // 1. 播放 player.play()

34 // 2. 停止 player.pause()

35 // 3. 暂停 player.pause()

36

37

38 返回列表WeLink 轻应用免登录集成 FineReport

android html5 rtmp,利用H5实现RTMP流的WEB移动端直播相关推荐

  1. 浏览器不支持flash插件之后,h5播放rtmp直播流的解决方案

    浏览器不支持flash插件之后,h5播放rtmp直播流的解决方案使用http-flv 原文链接 目录: 相关资源: 背景 几种视频流比较 http-flv搭配flv.js播放方案 flv.js延迟问题 ...

  2. EasyNVR、EasyDSS二次开发之:RTMP、HLS流在web页面进行无插件播放示例Demo代码

    不管是基于EasyNVR还是EasyDSS,都是支持无插件直播,这也是未来视频直播的一个趋势.对于传统的浏览器插件播放谁用谁知道: 以上是软件自带播放展示 背景需求 对于EasyNVR和EasyDSS ...

  3. 利用Simple-RTMP-Server搭建RTMP和HLS直播服务(上)

    SRS(Simple-RTMP-Server)定位是运营级的互联网直播服务器集群,追求更好的概念完整性和最简单实现的代码,在Github上人气颇高.本文是由王学投稿的SRS搭建直播的学习笔记,由Liv ...

  4. 利用ffmpeg实现rtmp推流直播

    我们这次利用ffmpeg实现rtmp推流(最终推流地址统一为rtmp://127.0.0.1:1935/live/123) 1.首先下载ffmpeg和ffplay 官方下载链接为:FFmpeg 下载后 ...

  5. oracle直播,利用Simple-RTMP-Server搭建RTMP和HLS直播服务(上)

    SRS(Simple-RTMP-Server)定位是运营级的互联网直播服务器集群,追求更好的概念完整性和最简单实现的代码,在Github上人气颇高.本文是由王学投稿的SRS搭建直播的学习笔记,由Liv ...

  6. 如何在Android平台实现低延迟的RTMP/RTSP录屏直播

    许多开发者在做智慧教室同屏亦或会议同屏时,基于Andriod平台采集屏幕并编码推送,往往遇到各种各样的问题,以下就我们开发过程中的一些技术考量做个分享,权当抛砖引玉: 协议选择.数据来源和处理 1. ...

  7. LiveQing视频点播RTMP推流直播服务支持H5无插件WebRTC超低延时视频直播

    LiveQing视频点播RTMP推流直播服务支持H5无插件WebRTC超低延时视频直播 1.WebRTC超低延时视频直播 2.WebRTC延时对比 3.LiveQing播放WebRTC流 4.分屏页面 ...

  8. linux搭建rtmp服务器搭建,linux下利用Nginx搭建RTMP服务器

    RTMP 实时消息传递协议(RTMP)由Macromedia开发,作为为其Flash技术传输数据,音频和视频的方法.Macromedia随后被Adobe收购,因为该规范已部分发布,使第三方能够在Ado ...

  9. android 五彩纸屑动画,利用H5实现Canvas五彩纸屑飘落动画特效

    特效描述:利用H5实现 Canvas 五彩纸屑飘落 动画特效.利用H5实现Canvas五彩纸屑飘落动画特效 代码结构 1. HTML代码 "use strict"; var _cr ...

最新文章

  1. java 性能检测工具 检测死锁等
  2. mysql忘记数据库密码
  3. Java内存泄露和内存溢出、JVM命令行工具、.JDK可视化工具、Java Class文件
  4. DCMTK:从DICOM封装的PDF存储对象中提取PDF文件
  5. CentOS下的freenx配置
  6. jquery常用表单操作
  7. 获得代理ippython_Python学习笔记六(免费获取代理IP)
  8. 页面缓存 ,数据源缓存,自定义缓存
  9. python中xlrd写操作_Python读写操作Excel模块_xlrd_xlwt_xlutils
  10. 永久删除掉qq安全防护进程q盾
  11. mariadb 卸载 Kali_Adobe官方卸载工具软件安装教程
  12. 使用GLSurfaceView实现涂鸦画板功能
  13. vue中使用 minix 混入
  14. [lampp] 不能通过互联网连接数据库 MySQL is not accessable via network
  15. 为什么误差采取平方和形式
  16. 伯禹公益AI《动手学深度学习PyTorch版》Task 06 学习笔记
  17. maven环境配好了,执行mvn -v命令,提示mvn不是内部或外部命令
  18. 「行业/市场分析」简说
  19. Ext3文件系统介绍
  20. FreeRTOS韦东山视频前八节学习笔记

热门文章

  1. 测鬼记(上)——大海(六)
  2. 长坂坡被赵云挑翻50多员武将资料全部资料(转)
  3. java判断时间是否超过24小时_判断两个日期是否超过24小时!
  4. 线控转向,包含设计说明书,carsim模型,MATLAB Simulink模型
  5. PostgreSQL回滚TRUNCATE操作的原理
  6. 通过CMA、CNAS双认证的第三方软件测试机构安利
  7. k8s集群部署nginx服务并使用ceph-csi挂载存储以及测试
  8. oracle学生考勤,Oracle数据库课程设计――学生考勤系统的Oracle实现1
  9. 500人访问的网站服务器配置,500人并发量的服务器配置
  10. AI 正在引领一场新型科学革命