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. Angular发送广播和接收广播

    home.module.ts import {BroadcastService} from "../broadcast.service"; @NgModule({ imports: ...

  2. AtCoder Grand Contest 010题解

    传送门 \(A\) 判一下奇数的个数就行了 const int N=1e5+5; int a[N],n,res; int main(){ scanf("%d",&n); f ...

  3. 如何使用git把本地代码上传到github

    Git Bash Here git init git add . git commit -m '说明' git remote add origin https://github.com//.git g ...

  4. 微信小程序微信登录

    开发接口 登录 wx.login wx.checkSession 签名加密 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系. 登录流程时序 ...

  5. Java SpringBoot Scheduled定时任务

    package task.demo.controller; import org.springframework.beans.factory.annotation.Autowired; import ...

  6. avalon怎么让重叠的图片改变显示层级?

    <span style="display: inline-block;width:20%;"> <span style="display: inline ...

  7. SpaceClaim脚本功能（Beta功能）

    本操作仅适用ANSYS SpaceClaim 2016 打开SpaceClaim脚本编辑器的方法有两种 方法一(看截图操作):         方法二(请见后面的实例操作). 创建球体源代码: #定义 ...

  8. 进入tomcat6的控制台

      在tomcat文件夹找到conf文件夹中的tomcat-user.xml文件, 用记事本打开,在最下面可以看到tomcat默认把用户注释掉了,也就是说打开tomcat主页是进不去管理页面的. 方法 ...

  9. HTTP Referrer和Referrer Policy 设置

    referrer是HTTP请求header的报文头,用于指明当前流量的来源参考页面.通过这个信息,我们可以知道访客是怎么来到当前页面的.这对于Web Analytics非常重要,可以用于分析不同渠道流 ...

  10. JAVA基础之访问控制权限

    包:库单元 1.当编写一个Java源代码文件时,此文件通常被称为编译单元(有时也被称为转译单元). 2.每个编译单元都必须有一个后缀名.java,而在编译单元内则可以有一个public类,该类名称必须 ...