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。

二、前端常用视频库

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 () {}