Hibop
关于HTML5多媒体开发
浏览器视屏播放器解决方案：
1. 历史方法——嵌入外接插件：
嵌入外接小程序，在web文档中嵌入外接插件以启动媒体播放器。
- applet
- embed
- object 在浏览器中嵌入播放器
2. 嵌入flash
3. 原生多媒体：audio、video、track（文本轨道、字幕）、source（文件源，多源实现浏览器兼容性）
主要属性：
src preload autoplay controls muted(静音) loop crossorigin(CORS) poster(海报) media: 很重要媒体查询，可以实现在不同大小设备上兼容
JS-API
js事件交互
自定义控件开发：
- 开关
- 暂停
- 音量大小调节、静音；
- 进度条和缓冲条；
- 快进和倒回；
- 搜索条；
- 首帧、海报
css3 进行播放器美化处理：
- 不透明度；
- 渐变：liner-gradient、radius-gradient；
- 圆角： border-radius
- 阴影：box-show；
- 改变播放器内容大小：object-fit、object-position;
- 过渡：transition；
- 变换
- 动画
- webkit专用属性：reflect反射和mask蒙窗；
使用canvas画布和svg经行高级开发：
- ** HTML5 视屏截图screen shot**
- **webSoket API 实现高性能流媒体传播：
提供建立浏览器和服务器之间双向通信的一种方法；该方法是“常开”，直接使用TCP而非HTTP； HTTP使用的"长轮询"，浏览器不断轮询服务器以确保连接保持打开，HTTP、Ajax除了实际传输数据之外还有额外信息开销， 这些信息是HTTP每次请求时为了通讯而必须收发的。
-
使用SVG向视频添加“弹幕功能”，或者文件屏蔽： 有必要了解下SVG的好处和这几年大行其道的原因： 矢量图： SVG是矢量图（点线矢量组成），可以很好实现缩放而不失真，还可以使用滤镜和减取路径等特性绘制动画；SVG图像由于忽略细节，图片相对占用内存小，适合网络传输；但一般不能渐变等复杂颜色 位图：也叫光栅化图形，由像素点组成，不能很好放大，放大图像质量下降；位图的文件尺寸也较大
-
原生支持的MIME类型 audio/ogg、audio/mp3、video/mp4、video/ogg、video/webm
HTML5多媒体开发的主要利弊分析：
利：
- 无需插件，原生比第三方附加软件速度上更快；
- 浏览器提供原生控件；
- 自动内建键盘可访问性；
不足：
- 文件格式类型支持度不高；
- 视频播放、或者直接应用于视屏直播，对性能要求很高，视屏解码速度要很快才不至于卡顿，丢帧
好在现在 HTML5 video 由各浏览器厂商实现了高性能硬解，MSE 作为媒体格式扩展的补充。再这两个不足方面加大力度。
附件： GitHub - Bilibili/flv.js: HTML5 FLV Player
flv.js 做了三件事：
- HTML5 原生仅支持播放 mp4/webm 格式，flv.js 实现了在 HTML5 上播放 FLV 格式视频;
- 使 Bilibili 网页端平滑过度到 HTML5 播放器，历史遗留不再是障碍;
- 对于视频直播，在 HTML5 上支持了延迟极低 HTTP FLV 播放，解开网页端直播对 Flash 的依赖
一些人问我为什么不直接采用 MP4 格式，并表示对 FLV 格式的厌恶这个问题一方面是历史遗留问题，由于视频网站前期完全依赖 Flash 播放而选择 FLV 格式；另一方面，如果仔细研究过 FLV/MP4 封装格式，你会发现 FLV 格式非常简洁，而 MP4 内部 box 种类繁杂，结构复杂固实而又有太多冗余数据。FLV 天生具备流式特征适合网络流传输，而 MP4 这种使用最广泛的存储格式，设计却并不一定优雅。这里我不想谈论多媒体封装格式的优劣。flv.js 是在 HTML5 上实现自定义视频格式播放的一个较好的范例，充分利用了 Media Source Extensions, Fetch API 以及 ECMAScript 6 等 HTML5/Web 上较新的技术，并考验着这些 API：开发期间发现 Edge 对 Fetch API 的支持存在 bug，发现各个浏览器在 MSE 的实现细节上都有一些差异和问题，发现 Safari 的 MSE 实现健壮度较差（滑稽）在 flv.js 项目初期，Media Source Extensions (MSE) 在国内处于无人问津的状态；而 MSE API 已经过近 4 年的发展演进，是 HTML5 多媒体相关最重要的 API 之一。MSE 是 HTML5 上实现自定义格式播放的关键，flv.js 开源也是希望 MSE 能被更广泛地了解和应用。最后，Chrome 等浏览器正在加速 Flash 淘汰的进程，HTML5 video 由各浏览器厂商实现了高性能硬解，MSE 作为媒体格式扩展的补充，flv.js 证明了当前 HTML5 多媒体技术已超越陈旧的 Flash。
