推流只能用rtmp协议,拉流可以使用rtmp协议和hls协议。rtmp协议时adobe公司开发的开放协议,hls是苹果公司推出的直播协议。.../arut/nginx-rtmp-module 下载rtmp模块(git clone https://github.com/arut/nginx-rtmp-module.git) 分别解压nginx和rtmp...[1594282941784.png] 使用video.js在h5播放rtmp 使用obs推流,推流地址可以填写rtmp://ip:9999/myapp或者rtmp://ip:9999/live,如果用的时...video.js版本是7.8.3 安装好之后在相关页面引入: import videojs from 'video.js'; import "videojs-flash" import 'video.js...移动端使用rtmp协议拉流 因为苹果不支持flash所以使用rtmp拉流肯定是不行的,但是可能客户给我们的就只有rtmp协议,那么我们就可以用到上面的另外一个地址,把rtmp协议转成hls协议。
但是其高昂的费用以及较高的准入门槛让许多个人和小型企业望而却步,本文要讲解的是如何使用nginx-rtmp搭建直播服务器,配合FFmpeg推流,在网页端vue.js作为载体利用video.js作为流播放器...因为我这里使用的传输协议是RTMP, 所以只要支持RTMP 流协议的播放器都可以使用,这里我们使用nginx, 一般情况下视频采集处理后推流到流媒体服务器,第一部分功能完成。...好在docker上有大把别人编译设置好的rtmp环境,所以可以直接拿来用,docker的优越性由此可见一斑,这里用到的是alfg/nginx-rtmp库。 ...://192.168.99.100:1935/stream/test" 推流成功后,我们就要在网站上观看现场直播了,这里前端服务我们使用vue.js来搭建,视频流播放器我们使用video.js...init webpack-simple zhibo cd zhibo cnpm install vue-router save cnpm install #安装直播组件 cnpm install video.js
> 一、总结(点击显示或隐藏总结内容) 一句话总结: 网上有各种细致的现成的代码可以拿来用,没必要自己死专 1、video.js有两种初始化方式?...一种是在video的html标签之中 一种是使用js来进行初始化 二、记录一波video.js的使用及问题 转自或参考:记录一波video.js的使用及问题 – – SegmentFault 思否 https...utm_source=tag-newest 1、视频初始化 video.js有两种初始化方式,一种是在video的html标签之中,一种是使用js来进行初始化 1.1、在video中进行初始化 <video...3、video.js样式修改 .video-js{ /* 给.video-js设置字体大小以统一各浏览器样式表现,因为video.js采用的是em单位 */ font-size: 14px; } ....from 'video.js/dist/lang/zh-CN.json' import video_en from 'video.js/dist/lang/en.json' import 'video.js
RTMP协议基于TCP,包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种。RTMP协议中,视频必须是H264编码,音频必须是AAC或MP3编码,且多以flv格式封包。...RTMP是目前最主流的流媒体传输协议,对CDN支持良好,实现难度较低,是大多数的直播平台的选择。不过RTMP有着一个最大的不足——不支持浏览器,且Adobe已不再更新。...上面的三种方案RTMP是最好的,不管是延时还是性能问题。所以,最好的方案就是PC端采用RTMP,移动端采用HTTP-FLV。但是要考虑一点就是2020年的flash的问题。...import React from 'react'; import videojs from 'video.js' // import videozhCN from 'video.js/dist/lang...'video.js/dist/lang/zh-CN.json'; //播放器中文,不能使用.js文件 import 'video.js/dist/video-js.css'; //样式文件注意要加上
EasyPlayer-Android播放器是一款可针对RTSP、RTMP、RTSP&RTMP协议进行过优化的流媒体播放器,其中我们引以为傲的两个技术优势就是起播速度快和播放延迟低。...Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。...Video.js实例化video时添加属性。 解决问题: 在video.js实例化video标签时添加loop此属性就可以实现播放完自动循环播放。...更多关于EasyPlayer EasyPlayer是一款流媒体播放器系列项目,支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放、 支持本地文件播放,支持本地抓拍、本地录像...随着多年不断的发展和迭代,不断基于成功的实践经验,发展出包括有: EasyPlayer RTSP、EasyPlayer RTMP、EasyPlayerPro 和EasyPlayer.js 等播放器。
推流只能用rtmp协议,拉流可以使用rtmp协议和hls协议。rtmp协议是adobe公司开发的开放协议,hls是苹果公司推出的直播协议。.../arut/nginx-rtmp-module 下载rtmp模块(git clone https://github.com/arut/nginx-rtmp-module.git) 分别解压nginx和rtmp...1594282941784.png 使用video.js在h5播放rtmp 使用obs推流,推流地址可以填写rtmp://ip:9999/myapp或者rtmp://ip:9999/live,如果用的是...video.js版本是7.8.3 安装好之后在相关页面引入: import videojs from 'video.js'; import "videojs-flash" import 'video.js...移动端使用rtmp协议拉流 因为苹果不支持flash所以使用rtmp拉流肯定是不行的,但是可能客户给我们的就只有rtmp协议,那么我们就可以用到上面的另外一个地址,把rtmp协议转成hls协议。
视频直播有很多协议,rtmp、rtsp、hls等就自己去了解,业务有做到就会了解一些。...公司经过软硬件测试,发现目前公司使用rtmp流直播延迟是最小的,rtmp需要flash,chrom在今年年底要完全禁止flash,不像现在是默认禁止还能允许。...之前有人说vuecli3使用videojs对于rtmp的播放会有问题,我就是使用vuecli3搭建的,是可以播放的。...首先安装依赖:video.js、videojs-flash 然后在播放页面使用: import videojs from 'video.js' import 'video.js/dist/video-js.css...移动端使用的是m3u8直播,需要安装一个新的依赖:videojs-contrib-hls 测试了一下,必须要有 播放页使用: import videojs from 'video.js' import
还是先去网上找找轮子吧 经过在网上不断的查阅之后,我最终选择了video.js这个轮子,作为我的播放器。好,现在轮子找好了,乍一看,天,好像有点丑。不着急,我再来把它美化美化(二次封装)。...引入video.js 安装 //安装video.js插件 npm install video.js -S //如果需要播放rtmp直播流,需安装一下插件 npm install videojs-flash...-S 在组件中简单使用插件 template 抱歉,您的浏览器不支持 script import videojs from “video.js”; //播放器中文,不能使用.js文件 import videozhCN...from “video.js/dist/lang/zh-CN.json”; //样式文件注意要加上 import “video.js/dist/video-js.css”; //如果要播放RTMP要使用...技术首选的顺序 sources: [ {undefined src: ‘视频或者直播地址’, type: ‘video/mp4’, //type: ‘rtmp/flv’, } ] }; this.player
方法一 直接转flv吧 方法二 使用flash 示例代码 如果直接前端放rtmp直播流, 则需要有flash, 而Chrome已经不再支持flash了, 所以得借助flash插件 1659969197107...字段用于解析选择性版本,可以通过此功能自定义依赖版本 "resolutions": { "video.js": "^7.10.0" }, 参考资料: https://github.com...false, // aspectRatio: '16:9', language: 'zh-CN', sources: [{ type: 'rtmp.../mp4', src: 'rtmp://127.0.0.1/live/test', }], techOrder: ['flash', 'html5']..., poster: '', notSupportedMessage: '服务错误', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
RTMP是实时消息传输协议,Real Time Messaging Protocol,是 Adobe Systems 公司为 Flash 播放器和服务器之间音频、视频和数据传输开发的开放协议。...协议基于 TCP,是一个协议族,包括 RTMP 基本协议及 RTMPT/RTMPS/RTMPE 等多种变种。...RTMP 是一种设计用来进行实时数据通信的网络协议,主要用来在 Flash/AIR 平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。...RTMP本质上是流协议,主要的优势是:实时性高(实时性一般在3秒之内)、稳定性高。主要用于直播应用,对实时性有一定要求。...RTMP协议一般传输的是flv,f4v格式流,RTSP协议一般传输的是ts,mp4格式的流。HTTP没有特定的流。
思路(如图): 1,开启推流服务器(这里我的Nginx-rtmp服务器搭建成功) 进入docker 开启推流服务器 docker run -it -p 1935:1935 -p 8000:80 --...rm alfg/nginx-rtmp 2,推流(两种方法) 命令推流: 查看本机摄像头及麦克风设备 ffmpeg -list_devices true -f dshow -i dummy 音视频推流:...://localhost:1935/hls/home 播放地址http://localhost:8080/hls/home.m3u8 #将屏幕推流到rtmp start ffmpeg -f gdigrab...:1935/live/jing 使用第三方软件推流:(例如:OBS Studio) 3,拉流 这里前端使用的是通过VUE 注意使用video需安装以下几个依赖 cnpm install video.js... //vue 的video插件 import videojs from 'video.js
模块github下载:https://github.com/illuspas/nginx-rtmp-win32/tree/master rtmp模块百度下载:https://pan.baidu.com.../s/1gP165PFQOm4POgJFeT8jBw 提取码:4psx nginx解压,把rtmp模块放在他的总目录下,下面是截图 在conf目录下新建一个nginx-rtmp.conf文件,...html lang="zh-CN"> 直播 <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js
今天项目中需要跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法。 ... ... <!...不过今天使用video.js的时候发现一个问题,当设置了preload为auto之后,在chrome下首次刷新网页网络请求会出现一个错误。...默认的video.js的样式不太好看,顺便附上从锤子网http://www.smartisan.com/爬下来的样式文件。 /*!
播放视频流的情况,但是由于H5场景的播放需要兼容的浏览器非常多,这样的情况下经常会遇到各种各样的摄像机网页播放的问题,比如这里解析的视频流自动播放的问题: 很多安防、摄像机、互联网流媒体播放多采用的是Video.js...来进行播放,Video.js本身自带自动播放属性,通过添加autoplay(),来完成视频播放的自动加载; player = videojs("video", { autoplay:...解决: videojs.options.flash.swf = 'video-js-fixed.swf'; 设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件;...EasyPlayer.js 我们将很多常用的情况下需要的H5、浏览器、微信、Chrome、Flash播放功能,都整合到了一个非常高效、稳定、完善的EasyPlayer.js播放器中,兼容了HTTP、HLS(m3u8)、RTMP...能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP
整个架构如下图所示,分为服务器端和浏览器端两部分: websocket.png 方案二:RTSP转RTMP到RTMP服务器,转http-flv,播放端用flv.js播放 flv.js在获取到FLV格式的音视频数据后将...方案三:RTSP转RTMP到RTMP服务器,转hls,播放端用video.js播放 Video.js是一款web视频播放器,支持html5和flash两种播放方式。
EasyPlayer.js,极大地方便了开发者在解决B/S型业务开发,集 rtmp,hls,flv,websocket 于一身的网页直播/点播播放器。...我们根据videojs最新的问题修复版本,设置一下更新后的swf版本: videojs.options.flash.swf = 'video-js-fixed.swf'; 设置flash swf路径后,Video.js...实际上,采用video.js播放或者采用ckplayer、cyberplayer等播放器,在安防、流媒体、音视频领域,总会有一些局限,举个简单的例子,我们为了产品全平台、全终端的兼容,需要H5播放能同时支持...RTMP、HTTP、HLS、HTTP-FLV、websocket等多种协议,同时,在安防等工业场景,重连还是必须的,例如RTMP重连、HTTP-FLV直播的重连、HLS(m3u8)直播的重连,这就不得不让我们基于
下面我整理了自己实现的方案以及网上看到的一些方案 一、FFmpeg + nginx 将转 hls 通过 video.js 在支持h5浏览器播放(我实现的) 参见:Nginx+FFmpeg实现rtsp流转...hls流,在WEB通过H5 video实现视频播放 不足:hls延迟较rtmp、http-flv大 二、FFmpeg + nginx-rtmp-module + h5 video,rtsp转rtmp播放...blog.csdn.net/gui66497/article/details/78590190 https://blog.csdn.net/LLittleF/article/details/81111713 注:通过video.js...播放rtmp流。...格式 基于nginx-rtmp-module,通过配置将rtmp转为flv,最后通过flv.js播放。
EasyPlayer介绍 EasyPlayer是一款流媒体播放器系列项目,支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放、 支持本地文件播放,支持本地抓拍、本地录像...随着多年不断的发展和迭代,不断基于成功的实践经验,发展出包括有: EasyPlayer RTSP、EasyPlayer RTMP、EasyPlayerPro 和EasyPlayer.js 等播放器。...解决问题 经过分析发现video.js源码,引入 videojs-contrib-hls.js这个文件,使得video.js支持播放8K视频。
(文末获取安装包) unzip nginx-rtmp-module-master.zip 解压nginx安装包,cd到解压目录下,然后执行配置: ....接下来我们执行nginx -V,可以发现已经有了nginx-rtmp-module模块,至此,nginx安装nginx-rtmp-module模块成功!...修改nginx配置 nginx的rtmp-module模块可以帮助我们接收ffmpeg推送的流媒体文件,使用http进行访问。...前台利用video.js播放视频流 在前台我们可以利用video.js来对m3u8索引文件进行播放,使用方式也十分简单,代码如下: <script src='https://vjs.zencdn.net/7.4.1/<em>video.js</em>
领取专属 10元无门槛券
手把手带您无忧上云