web视频播放

一、3大视频直播协议:

一、RTMP
全称 Real Time Messageing Protocol,实时消息传送协议;
出身:由Adobe公司基于 Flash Player 播放器对应的音视频flv封装格式提出的一种传输协议;
优点:
1、延迟很低,一般在1~3s;
2、长时间连续播放稳定;
3、一般的视频会议、互动式直播够用;
缺点:
1、基于应用层TCP长连接协议数据传输,非公共端口,可能会被防火墙拦截;
2、它是Adobe私有协议,很多设备无法播放,特别是在IOS移动端,需要使用三方解码器;
3、高并发下不稳定。
扩展:
1、RTMP是主协议,除此之外,包括 RTMPT / RTMPS / RTMPE / RTMFP 等变种;
2、其中 RTMFP 是基于UDP传输的一种协议;常用于 P2P 通信;
应用:流媒体直播(Live)、点播(VOD);更多用于推流(主播方);

*推流:内容生产者;将现场的视频信号传到网络的过程,对网络环境要求比较高,如果不稳定,就会出现直播卡顿等现象,观看体验就会差;
*拉流:内容消费者;从服务器上拉取已经有直播的数据,解析、转码,最终在终端呈现;

P2P

1、全称 peer to peer,点对点或端对端的通信技术;
2、解决的问题:不同内网环境中的设备通过各自内网IP直接进行通信;
3、基础条件:中间服务器是具有公网ip地址;NAT网络地址交换协议(Network Address Translation):内网穿透、打洞、探针、中间件等;
4、前端应用:WebRTC(Web Real-Time Communications)实时通信技术:建立浏览器之间点对点的链接,实现音视频流或其他数据的传输;在线聊5天室、屏幕共享、文件共享、大文件点对点传输、实时游戏、直播、基于p2p的web搜索;
5、中间服务:1、peerjs自带的中转服务;2、peerjs-server自己搭建;3、后端搭建中转

HLS

1、全称:HTTP Live Streaming;
2、出身:Apple公司基于HTTP的流媒体实时传输协议;
3、原理:将整个流媒体数据,切割为连续的时长较短的 ts 文件(小分片,几秒的视频),并通过 M3U8 索引文件按顺序访问 ts 文件;
4、优点:
1、基于HTTP,允许穿透任何允许HTTP数据的防火墙或代理服务器。
2、很容易使用内容分发网络来传输媒体流,提速。
5、缺点:延时高 10s+;
6、应用:点播、直播领域;
*区分点播、直播的重要标志:m3u8索引文件有无#EXT-X-ENDLIST;

HTTP-FLV

全称:HTTP FLASH VIDEO
优点:
1、基于HTTP,允许穿透任何允许HTTP数据的防火墙或代理服务器。
2、可以使用HTTPS做加密通道。
3、很好的移动端支持。
4、延时低 2s。
web视频播放_第1张图片

二、前端常用视频库

1、VideoJS(推荐)

官网:https://docs.videojs.com/
优点:开源免费;大而全;纯CSS+JS打造,扩展性高;兼容所有浏览器;
缺点:文档纯英文,不支持RTSP流(常用视频监控)播放,依赖flash。
注意:
1、rtmp:type设置为:rtmp/flv。
2、hls:type设置为:application/x-mpegURL。

2、CKPlayer(不推荐)

官网:https://www.ckplayer.com/
优点:功能较为齐全;独立配置文件;独立素材、皮肤支持;
缺点:不适合小屏播放,样式易错乱;UI风格不太友好;后期增加独立功能,比较困难;占用项目主包;
使用:
1、需放在public 或 assets文件中,index.html 作为静态文件引入它;
2、本地、沙盒环境UI不一致;
3、【截图按钮】在全屏下,会消失,因为它只相对父级定位;
4、视屏的功能控件,dom结构动态输出,没有class值,无法进行ui覆盖;
5、音量控件,不支持垂直展示;

3、西瓜播放器

官网:https://v2.h5player.bytedance.com/
字节跳动结合自己的业务,造的轮子;【视频截屏】有坑,没敢踩。

4、DPlayer

官网:https://dplayer.js.org/zh/
优点:
1、API简洁;
2、UI风格比较符合现代审美,按钮控件结构清晰;可通过class覆盖样式;
3、集成弹幕;
4、支持主流视频,需要结合其他组件库:hls.js、flv.js等;
5、github持续维护;Issue有解决常见问题的方案;
截图功能:
1、自带的截图配置,无法设置图片的名称;默认Dplayer.png;
2、接管截图数据,交由开发者操作:https://github.com/DIYgod/DPlayer/issues/1006
右键菜单:
1、阻止:https://github.com/DIYgod/DPlayer/issues/544
禁止m3u8和ts文件持续请求:
1、虽然播放器被销毁,但是HLS服务还在持续执行:https://github.com/DIYgod/DPlayer/issues/628
2、HLS.js配置:https://github.com/video-dev/hls.js/blob/master/docs/API.md#hlsstartlevel
vue二次封装:
https://console.cloud.baidu-int.com/devops/icode/repos/baidu/adu/v2xapp-key-vehicle-front/blob/develop:src/components/videoPlayer/dPlayer.vue

"dplayer": "^1.26.0",
"hls.js": "^1.0.5",
 
import DPlayer from '@/components/videoPlayer/dPlayer';
 
<DPlayer
    class="video-area"
    :ref=""
    :key=""
    :className=""
    :videoUrl=""
></DPlayer>

三、canvas画布污染

含义:由于在 位图中的像素可能来自多种来源,包括从 其他主机检索的图像或视频,因此不可避免的会出现安全问题。参考:https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image
场景:h5画分享海报、前端裁剪图片、合成图片、前端视频截图、html2Canvas插件使用等。
结果:浏览器将阻止从canvas中读取数据,如toDataURL()、toBlob()、getImageData() 方法都不可用。

在这里插入图片描述
解决方法

let video = document.querySelector('#dplayer video');
video.setAttribute('crossOrigin', 'anonymous'); // 重点,前提:服务端的视频支持跨域
 
const canvas = document.createElement('canvas');
canvas.width = this.player.video.videoWidth;
canvas.height = this.player.video.videoHeight;
canvas.getContext('2d').drawImage(this.player.video, 0, 0, canvas.width, canvas.height);
const data = canvas.toDataURL('image/jpg');

可能的解决方法:利用image标签跨域的能力

// 西瓜视频、网上大多资料的解决方案
let img = new Image();
img.setAttribute('crossorigin', 'anonymous') // 给图片设置允许跨域
image.src = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
img.onload = function () {
    // do Something
}
img.error = function () {}

你可能感兴趣的:(视频播放,前端video,前端,音视频,网络)