画布 1
音视频组件
  视频
    如何选择
      项目需求
        直播流
        编辑支持等
        播放器控件
          播放、暂停
          加速
          切换分辨率等
          声音控制
      格式支持
        mp4
        WebM
        FLV
        HLS流
      浏览器支持
      性能与优化
      可定制性和扩展性
        字幕
        播放列表
        悬浮窗口
      文档与社区
      许可和成本
      更新与维护
      易用性
      安全性
    常见方案
      Video.js
        非常流行的开源HTML5和Flash视频播放器，支持多种视频格式，提供了丰富的API和插件，适用于复杂的视频播放需求
        github
          https://github.com/videojs/video.js
        特点
          项目需求：非常全面，支持广泛的视频格式，提供了丰富的API和插件，适合复杂的视频播放需求。
          格式支持：支持多种视频格式，包括但不限于MP4, WebM, 和FLV。
          浏览器兼容性：良好的浏览器兼容性，包括旧版浏览器。
          性能和优化：性能良好，支持多种优化方式，如懒加载。
          可定制性和扩展性：高度可定制和扩展，有许多社区提供的插件。
          文档和社区支持：有详细的文档和活跃的社区。
          许可和成本：基于MIT许可证，免费开源。
          更新和维护：定期更新和良好的维护。
          易用性：相对易于集成和使用。
          安全性：作为一个受欢迎的开源项目，安全性得到良好的关注。
      Plyr
        一个简洁、现代且功能全面的HTML5视频播放器。Plyr支持YouTube和Vimeo视频，以及标准的HTML5视频和音频
        github
          https://github.com/sampotts/plyr
        特点
          项目需求：提供现代化的用户界面，支持YouTube和Vimeo以及HTML5视频和音频。
          格式支持：良好的格式支持，特别是对主流的HTML5格式。
          浏览器兼容性：在现代浏览器上有良好的兼容性。
          性能和优化：性能良好，但相对于其他选项可能缺少一些高级优化特性。
          可定制性和扩展性：可定制性好，但扩展性可能不如Video.js。
          文档和社区支持：文档详细，社区活跃度较好。
          许可和成本：免费开源，基于MIT许可。
          更新和维护：定期更新，社区活跃。
          易用性：易于使用和集成。
          安全性：良好，但需关注其对外部视频服务的依赖。
      DPlayer
        一款轻量级的、现代化的、功能丰富的web视频播放器。支持弹幕功能，适合需要交互性更强的视频播放场景
        github
          https://github.com/DIYgod/DPlayer
        特点
          功能丰富：DPlayer不仅是一个视频播放器，还支持诸如弹幕等交互功能，适合需要强交互性的场景。
          格式支持：支持主流的视频格式，适应现代Web播放需求。
          浏览器兼容性：良好的兼容性，特别是在现代浏览器中。
          性能和优化：在性能方面表现良好，但在高级优化方面可能不及某些更成熟的解决方案。
          可定制性和扩展性：DPlayer提供了一定程度的可定制性，但关键的优势在于其插件和生态系统。
          插件和工具：DPlayer提供了多个插件和工具，如用于生成视频缩略图的DPlayer-thumbnails、适用于Vue和React的DPlayer插件，以及针对不同CMS（如WordPress、Typecho）的集成。
          弹幕接口：DPlayer支持多种后端技术栈的弹幕接口，包括Node.js、PHP、Ruby等，这说明DPlayer在弹幕功能方面有着良好的扩展性和适应性。
          社区支持：DPlayer的社区支持表现在其丰富的插件和集成选项上，这表明它拥有活跃的开发者社区。
      其他
        flv.js
        MediaElement
  音频
    如何选择
      同上
    常见方案
      Howler.js
        一个现代的Web音频库，支持音频精灵和多种声音格式。它易于使用，提供了丰富的API，适用于复杂的音频处理需求
        github
          https://github.com/goldfire/howler.js
        特点
          功能：支持音频精灵和多种声音格式，适用于复杂的音频处理需求。
          技术兼容性：与多种前端技术栈良好兼容。
          社区和支持：有活跃的社区和良好的文档支持。
          可维护性和扩展性：代码结构清晰，易于维护和扩展。
          安全性：较为安全，但需要定期检查更新以防漏洞。
      Wavesurfer.js
        一个可视化音频波形的库，支持Web Audio和MediaElement后端，以及多种定制化选项和交互功能，非常适合于需要音频波形展示的项目
        github
          https://github.com/katspaugh/wavesurfer.js
        特点
          功能：专注于音频波形的可视化。
          技术兼容性：兼容性良好，适用于现代Web应用。
          社区和支持：有活跃的社区和详尽的文档。
          可维护性和扩展性：易于集成和扩展。
          安全性：较为安全，但需注意定期更新。
        不足
          主要用于波形显示，可能在其他音频处理功能上不够全面。
      Tone.js
        一个为Web Audio API提供高级接口的框架。它适用于创建交互式音乐。Tone.js支持合成、效果和调度，适合音乐制作和音频相关的Web应用
        github
          https://github.com/Tonejs/Tone.js
        特点
          功能：专注于音乐制作，支持合成、效果和调度。
          技术兼容性：适合音乐制作和音频相关的Web应用。
          社区和支持：有一定的社区支持和文档。
          可维护性和扩展性：针对音乐制作的专业功能较多，可能不适用于普通音频播放需求。
          安全性：需要关注依赖和库的更新。
        不足
          更适合专业音乐制作，可能过于复杂对于普通应用