Open Hibop opened 6 years ago
嵌入外接小程序，在web文档中嵌入外接插件以启动媒体播放器。 applet embed object 在浏览器中嵌入播放器 2. 嵌入flash
嵌入外接小程序，在web文档中嵌入外接插件以启动媒体播放器。
src preload autoplay controls muted(静音) loop crossorigin(CORS) poster(海报) media: 很重要媒体查询，可以实现在不同大小设备上兼容
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 video 由各浏览器厂商实现了高性能硬解，MSE 作为媒体格式扩展的补充。再这两个不足方面加大力度。
附件： GitHub - Bilibili/flv.js: HTML5 FLV Player
flv.js 做了三件事：
一些人问我为什么不直接采用 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。
浏览器视屏播放器解决方案：
1. 历史方法——嵌入外接插件：
3. 原生多媒体：audio、video、track（文本轨道、字幕）、source（文件源，多源实现浏览器兼容性）
主要属性：
JS-API
js事件交互
自定义控件开发：
css3 进行播放器美化处理：
使用canvas画布和svg经行高级开发：
HTML5 视屏截图screen shot
**webSoket API 实现高性能流媒体传播：
使用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 做了三件事：
一些人问我为什么不直接采用 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。