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. [nodejs]修改全局包位置，修复npm安装全局模块命令失效。好记性不如烂笔头

    修复npm -g 全局安装命令失效,好的吧不得不承认,好记性不如烂笔头,我居然会忘记方法哈哈哈 Linux安装nodejs sudo apt install node sudo apt install ...

  2. 割点 —— Tarjan 算法

    由于对于这一块掌握的十分不好,所以在昨天做题的过程中一直困扰着我,好不容易搞懂了,写个小总结吧 qwq~ 割点 概念 在无向连通图中,如果将其中一个点以及所有连接该点的边去掉,图就不再连通,那么这个点 ...

  3. HashMap(1.8)源码阅读

    先了解一下用到的位运算符:https://www.cnblogs.com/gavinYang/p/11196492.html 一.初始化 1.无参构造函数: //负载因子默认值 static fina ...

  4. 【caffe I/O】数据变换器（图像的预处理部分） 代码注释

    caffe.proto中TransformationParameter部分 // Message that stores parameters used to apply transformation ...

  5. Spring Boot AOP 简易操作日志管理

    AOP (Aspect Oriented Programming) 面向切面编程. 业务有核心业务和边缘业务. 比如用户管理,菜单管理,权限管理,这些都属于核心业务. 比如日志管理,操作记录管理,这些 ...

  6. Vue axios post 传参数，后台接收不到为 null

    由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理. cnmp inst ...

  7. 第07组 Alpha冲刺（3/6）

    队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:对后端功能进一步完善. 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助 ...

  8. JWT签名算法

    JWT签名算法 JWT签名算法中,一般有两个选择,一个采用HS256,另外一个就是采用RS256. 签名实际上是一个加密的过程,生成一段标识(也是JWT的一部分)作为接收方验证信息是否被篡改的依据. ...

  9. Oracle备份的几种方式

    这里使用Oracle 12C来大概演示说明一下rman的基本用法,这里不会深入讨论,因为本人也只是刚刚才接触,只是结合了网上的一些文章以及自己的实践来总结并拿出来大家学习,谢谢 目录 一.关于备份与恢 ...

  10. C 套接字

    套接字函数 1 创建套接字──socket() 应用程序在使用套接字前,首先必须拥有一个套接字,系统调用socket()向应用程序提供创建套接字的手段,   其调用格式如下:SOCKET PASCAL ...