video.js 视频直播前端展示
原理
视频直播的流程原理图如下:
大致过程(摘自知乎:https://www.zhihu.com/question/37887655/answer/104444735):
流程如下:
1.数据采集:
摄像机及拾音器收集视频及音频数据,此时得到的为原始数据
涉及技术或协议:
摄像机:CCD、CMOS
拾音器:声电转换装置(咪头)、音频放大电路
2.前处理:
主要处理美颜、水印、模糊等效果。美颜功能几乎是直播的标配功能
3.数据编码:
使用相关硬件或软件对音视频原始数据进行编码处理(数字化)及加工(如音视频混合、打包封装等),得到可用的音视频数据
涉及技术或协议
编码方式:
⑴:CBR
⑵:VBR
编码格式:
⑴:视频:H.265、H.264、MPEG-4等,封装容器有TS、MKV、AVI、MP4等
⑵:音频:G.711μ、AAC、Opus等,封装有MP3、OGG、AAC等
4.解码数据:
使用相关硬件或软件对接收到的编码后的音视频数据进行解码,得到可以直接显示的图像/声音
涉及技术或协议:
一般对应的编码器都会带有相应的解码器,也有一些第三方解码插件等
5.播放显示:
在显示器(电视、监视屏等)或扬声器(耳机、喇叭等)里,显示相应的图像画面或声音
涉及技术或协议:
显示器、扬声器等
所用协议介绍:
1、RTMP(Real Time Messaging Protocol,实时消息传送协议)
2、RTSP(Real Time Streaming Protocol,实时流传输协议)
3、RTP(Real-time Transport Protocol,实时传输协议)
特别说明:以上是视频直播的一个大概技术开发介绍,本文不介绍上面的技术与协议,只介绍如何在通过第三方直播云平台(如京东直播云平台,阿里云直播云平台)获取到已经处理好的rtmp数据流后在web前端展示
开发
技术选择:video.js(这里选择v5.18.4版本,6.0版本以上就不支持flash了,所以不能用6.0以上版本)
传输流协议选择:rtmp
1.静态显示
html:
<script src="./custom/video/video.min.js"></script>
<link href="./custom/video/video-js.css" rel="stylesheet"><video id="my-video" class="video-js" controls preload="auto" width="640" height="300" poster="http://ppt.downhot.com/d/file/p/2014/08/12/9d92575b4962a981bd9af247ef142449.jpg" data-setup="{}"> <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv"> <p class="vjs-no-js">播放视频需要启用 JavaScript,推荐使用支持HTML5的浏览器访问。 To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video>
2.动态显示
html:
<script src="./custom/video/video.min.js"></script>
<link href="./custom/video/video-js.css" rel="stylesheet"><video id="container" class="video-js vjs-big-play-centered" width="700" height="450" controls preload="auto"></video>
js:
//初始化视频
let player = videojs('container',{//像data-setup那样设置的参数
},function onPlayerReady(){//视频播放器初始化完毕,就会调用这个回调函数this.src({src: "rtmp流地址",type:'rtmp/flv'});
});
3.动态刷新与重载
//刷新时需要先注销video.js,很重要,否则会报错
if($("#container").length > 0) {let player = videojs('container');player.dispose();}//重载
let player = videojs("container"); //初始化视频
//重置video的src
player.src({src: "新的rtmp流地址",type:'rtmp/flv'
});
player.load();
player.play();
参考
- video.js的github:https://github.com/videojs/video.js
- 如何搭建一个完整的视频直播系统:https://www.zhihu.com/question/42162310?sort=created&page=2
- 另外一个中文视频播放JavaScript库sewise-player:https://github.com/jackzhang1204/sewise-player
- video.js 使用笔记:http://blog.csdn.net/u014739462/article/details/70849195
- video.js 使用技巧:https://www.awaimai.com/2053.html
video.js 视频直播前端展示相关推荐
- H5视频之video.js 视频直播前端
转自https://blog.csdn.net/liuyuqin1991/article/details/79310080 原理 视频直播的流程原理图如下: 大致过程(摘自知乎:https:// ...
- H5视频之视频直播(前端, video.js)
H5视频之视频直播(前端, video.js) 原理 视频直播的流程原理图如下: 这里写图片描述: 大致过程(摘自知乎:https://www.zhihu.com/question/37887655/ ...
- video.js视频高度自适应解决方法
video.js视频高度自适应解决方法 1.引入两个外部文件,或者下载到本地 <link href="https://unpkg.com/video.js/dist/video-js. ...
- [转] 视频直播前端方案
流媒体本质上是:现实的图像,经过编码器压缩,持久化为点播文件或者直播流,经过传输,在终端解码和展示. http live streaming(hls) 适用移动端 HTTP Live Streamin ...
- video.js 视频截图、录制、自定义全屏,hls、flv、mp4视频播放
功能 video.js内嵌 截图.录制功能 (图片.视频会下载到本地) 自定义全屏 播放hls.flv.mp4 功能集合成Vue组件 参考 video.js components RecordRTC ...
- video 拉流卡顿_【video】视频直播推流拉流慢、卡顿解决方案
一.摘要 视频直播类App当前已经普遍采用CDN来实现访问加速,但还是经常遇到推拉流慢.卡顿的问题,一般是由于调度不精准.域名劫持.终端手机接入网络动态切换等因素导致.结合使用CDN和HTTPDNS可 ...
- Linux下,使用nginx+ffmpeg+video.js实现直播效果(含centos7环境配置步骤)
https://blog.csdn.net/qq_39850605/article/details/86313302
- Flash Tech: this.el_.vjs_getProperty is not a function video.js
react+antd里面使用video.js视频直播 我是把video.js写了一个组件,在一个Mode弹窗的使用,关闭的时候报错Flash Tech: this.el_.vjs_getPropert ...
- html播放flv直播源,使用flv.js与video.js实现播放视频直播(简教程)
1.准备 ( ̄▽ ̄)/ 以上软件请大家自行解压或安装 2.环境配置 首先运行livego 运行livego效果 安装与运行OBS 打开设置 配置流服务器 配置连接 配置连接 连接成功后livego会有 ...
最新文章
- 基于linux操作系统Mysql的基本操作(一)
- getopt( )和 getopt_long( )
- python io密集型应用案例-Python中单线程、多线程和多进程的效率对比实验实例
- 常用验证函数isset()/empty()/is_numeric()函数
- linux改变文件所属用户和组
- Linux用户及用户组设置
- php求1000以内的素数 10个一行,1000以内的素数_php求1000以内质数
- 离散数学中析取范式,以及合取范式的个人理解
- 使用IE浏览器将pfx转为cer证书
- 【Grafana】【一】Grafana 简介
- 人工智能--打飞机游戏
- 云宏Ceph分布式存储高性能设计
- C++ 学习笔记(19)new/delete表达式、定位new、typeid、dynamic_cast、type_info、枚举类型、成员函数指针、union、位域、volatile限定符、链接指示
- wireshark抓组播数据_捕获广播或多播地址数据MAC地址数据端口应用程序数据Wireshark网络分析实例集锦大学霸...
- java数据类型一(转)
- org.springframework.http.converter.HttpMessageNotReadableException异常解决
- base64 string 放不下_用 Base64 编码插入 Markdown 图片
- powerbi使用说明_商业数据分析神器powerBI功能介绍及使用导引,数据分析必备工具...
- 怎么制作pdf格式的文件?操作多就懂了
- 【云原生 | 从零开始学Kubernetes】二、使用kubeadm搭建K8S集群