1.背景

最近要做摄像头视频的展示，不想使用硬件方的专用插件，所以计划视频推送到SRS服务器，浏览器再通过rtmp协议显示，类似于直播。

经查询，了解到可以用ckplayer(有许可条款)和video.js在html页面中。尝试了video.js_5.x可以正常播放，而6.x版本不能播放，可目前video.js已经更新到了7.x！

几经折腾，发现6.x版本后需要单独的flash插件，早期版本包含了flash，官方说明如下：

2.示例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Live Video 7.X</title>

     <link href="./lib/video7.3.0/video-js.min.css" rel="stylesheet">

     <script src="./lib/video7.3.0/video.min.js"></script>

     <script src="./lib/flash/videojs-flash.min.js"></script>

 </head>

 <body>

     <video id="liveVideo" class="video-js" controls autoplay preload="auto" width="1280"

         height="720" data-setup="{}">

         <source src="rtmp://192.168.3.161:1935/live/livestream" type="rtmp/flv">

     </video>

 </body>

 </html>

引入了video.js、video.js和videojs-flash.js，添加video标签，设置autoplay、width、height等属性，data-setup属性必须要，如果不做设置一定写成“{}”，

设置source的src和type属性，可以先通过ffplayer客户端工具查看视频流是否能够播放。

3.注意事项及完整示例

不支持文件方式打开页面，必须是http方式访问页面，可以通过nginx或使用编辑器的内置server，如vscode的live server；

video.js的github地址：https://github.com/videojs/video.js

videojs-flash的github地址：https://github.com/videojs/videojs-flash

完整代码参考：https://github.com/shiyuan598/live-video

简单记录一下在html中使用vedio.js6以上版本播放rtmp视频流的方法，欢迎留言交流~

使用video.js 7在html中播放rtmp视频流的更多相关文章

  1. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  2. IOS 集成 Bilibili IJKPlayer播放器，播放rtmp视频流

    因为公司项目需要,我一个连iPhone都没用过的人竟然跑去开发iOS APP.近一段时间一直忙于赶项目,到今天差不多了,所以记录一下当时遇到的各种坑,先从ios 集成 ijkplayer播放器说起! ...

  3. video.js 视频自动全屏播放

    1.头部引用脚本 <link href="css/video-js.min.css" rel="stylesheet"> <link href ...

  4. 高性能流媒体服务器EasyDSS前端重构(四)- webpack + video.js 打造流媒体服务器前端

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui> 本文围绕着实现EasyDSS高性能流 ...

  5. 微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  6. 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...

  7. 【转】Android 4.4中播放HTML5视频<video>的Bug

    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...

  8. 流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了

    源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...

  9. video.js播放rtmp

    项目中要用到rtmp直播和点播.要求:点播能够调整播放进度 开始用腾讯提供的播放器,老卡,画质差,很多时候播不出来,rtmp点播还不能快进. 后来用Wowza自带的flash rtmp播放器,有源码 ...

随机推荐

  1. spark sql 常用语句

    在spark dataFrame数据结构里面使用sql语句查询数据 (因为是RDD和dataFrame数据是只读的,所以不能做修改,删除操作.) 首先将文本数据转换为DataFrame数据格式 有两种 ...

  2. 24、Checkpoint原理剖析

    一.原理 1.Checkpoint是什么 Checkpoint,是Spark提供的一个比较高级的功能. 有的时候,比如说,我们的Spark应用程序,特别的复杂,然后呢,从初始的RDD开始,到最后整个应 ...

  3. 微信小程序开源

    | UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程 ...

  4. 服务器上build.xml文件乱码解决（亲测有效）

    前提条件:必须root账户登录系统,否则无权限 1. 修改/etc/sysconfig/i18n: 拷贝如下内容到文件中 #LANG="zh_CN.UTF-8" LANG=&quo ...

  5. 第12组 Alpha冲刺（2/6）

    Header 队名:To Be Done 组长博客 作业博客 团队项目进行情况 燃尽图(组内共享) 展示Git当日代码/文档签入记录(组内共享) 注: 由于GitHub的免费范围内对多人开发存在较多限 ...

  6. Hadoop NameNode 元数据以及查看元数据的方式

    HDFS中NameNode工作机制1.NameNode的主要功能(1)负责客户端请求的响应: (2)负责元数据的管理. 2.元数据管理namenode对数据管理采用了三种存储形式: (1)内存元数据: ...

  7. 浅析HTTP/2的多路复用

    HTTP/2有三大特性:头部压缩.Server Push.多路复用.前两个特性意思比较明确,也好理解,唯有多路复用不太好理解,尤其是和HTTP1.1进行对比的时候,这个问题我想了很长时间,也对比了很长 ...

  8. nginx 配置的server_name参数

    nginx中的server_name指令主要用于配置基于名称虚拟主机. 一 匹配顺序,server_name指令在接到请求后的匹配顺序如下: 1.确切的server_name匹配,例如: server ...

  9. [转] FileZilla Server超详细配置

    FileZilla Server下载安装完成后,必须启动软件进行设置,由于此软件是英文,本来就是一款陌生的软件,再加上英文(注:本站提供中文版本,请点击下载),配置难度可想而知,站长从网上找到一篇非常 ...

  10. Android通过ksoap2这个框架调用webservice大讲堂

    昨天有人问我Android怎么连接mysql数据库,和对数据库的操作呀,我想把,给他说说json通信,可是他并不知道怎么弄,哎算了吧,直接叫他用ksoap吧,给他说了大半天,好多零碎的知识,看来还是有 ...