该博客介绍了如何利用JavaScript创建一个具备视频播放进度调整、声音控制、全屏模式等功能的播放器，并重点展示了使用canvas进行弹幕绘制的方法，包括弹幕悬停、用户头像选择和全屏弹幕。博客涵盖了DOM操作、跨浏览器事件兼容性、canvas API以及requestAnimationFrame等技术点。
不多bb，就直接说实现了什么功能：
1. 视频播放进度调整
2. 视频小窗口实时预览
3. 声音调整
4. 画中画模式
5. 网页全屏
6. 视频全屏
7. canvas绘制弹幕
8. 选中弹幕悬停
9. 用户弹幕头像选择
10. 全屏弹幕实现
11. 页面离开在此进入弹幕渲染
涉及到的知识点：
1. dom操作
2. dom事件跨浏览器兼容
3. 抛出自定义错误，阻止程序的崩溃
4. canvas相关api
5. requestAnimationFrame（请求动画帧）的高度兼容
6. 使用模块模式减少全局变量命名冲突
效果预览：
项目地址：https://gitee.com/mvc_ydb/video_canvas_barrage.git
如果对你有用，请顶一下（江湖最高礼仪，抱拳了铁子）
累积知识点,解决每一个遇到的问题,实现从量变到质变
扫一扫
1234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
