video.js 视频直播前端展示
2018-02-11 13:31
357 查看
原理
视频直播的流程原理图如下:大致过程(摘自知乎: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
相关文章推荐
- 【PythonDjango后台实例 第七章】Django使用Video.js视频播放插件
- cordova开发:android端用video.js播放视频,解决退出全屏后应用被状态栏遮挡
- video.js 实现视频只能后退不能快进的思路详解
- html5 video标签屏蔽右键视频另存为的js
- 【web前端】html+js实现流程进度展示条
- 设置video.js多视频连续播放
- Video.js网页视频播放插件
- 视频播放插件Video.js
- HTML5视频播放插件Video.js使用详解
- 使用video.js播放视频
- 使用Quicktime 实现视频直播(Live video using Quicktime) (转)
- Video.js中m3u8视频清晰度切换
- video.min.js做视频播放
- Video.js调整视频封面大小的问题
- 帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js
- video.js--很赞的H5视频播放库
- iOS RTMP 视频直播开发笔记(4)- 关于 AVVideoProfileLevelKey
- 视频播放插件 Video.js
- 前端图形化展示js
- 前端 MVVM 框架KnockOut.JS深入浅出视频教程