不多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

如果对你有用，请顶一下（江湖最高礼仪，抱拳了铁子）

一次js自定义播放器，canvas绘制弹幕的尝试的更多相关文章

  1. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  2. 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. Asp.Net MVC中Aplayer.js音乐播放器的使用

    1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...

  4. 基于 AVPlayer 自定义播放器

    如果我只是简单的播放一个视频,而不需要考虑播放器的界面.iOS9.0 之前使用 MPMoviePlayerController, 或者内部自带一个 view 的 MPMoviePlayerViewCo ...

  5. 基于jplayer实现歌词同步的JS音乐播放器效果

    分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <textare ...

  6. js插件---10个免费开源的JS音乐播放器插件

    js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...

  7. 用H5和js写一个移动端自定义播放器

    前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...

  8. Wavesurfer.js音频播放器插件的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...

  9. 原生js制作播放器

    以前 就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊) 做这个播放器  也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery  我也做不出来. 以前也用过a ...

随机推荐

  1. [HNOI2019]校园旅行（建图优化+bfs）

    30分的O(m^2)做法应该比较容易想到:令f[i][j]表示i->j是否有解,然后把每个路径点数不超过2的有解状态(u,v)加入队列,然后弹出队列时,两点分别向两边搜索边,发现颜色一样时,再修 ...

  2. shell_跳板机推送公钥

    #!/bin/bash#push publickey to aap-servers#将局域网内可以ping通的主机ip保存到一个文件> ip_up.txtfor i in {2..10}do { ...

  3. Android library 传入本地maven仓库

    在项目根目录gradle.properties 添加 #包信息 GROUP_ID = com.chao.myvideo # Licence信息 PROJ_LICENCE_NAME=The Apache ...

  4. bootstrap的button按钮点击之后会有蓝色边框怎么解决?

    .btn:focus,.btn:active:focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn.active.focus { ou ...

  5. Windows可以往外ping，外部却ping不通本机

    网络背景:192.168.1.17.192.168.1.19.192.168.1.20 三台机器都在一个exsi宿主机下网络非常简单 问题描述:17和19都可以ping通20:20却不能ping通17 ...

  6. 二：MySQL的操作

    1:创建数据库 create database  bjpowernode ; 2:使用数据库 use bjpowernode; 3:导入数据库文件sql source  然后把SQL文件拖过来就可以了 ...

  7. 4）date中的Ymd格式问题

    以下是详细的参数: format 字符 说明 返回值例子日 --- ---d 月份中的第几天,有前导零的 2 位数字 01 到 31D 星期中的第几天,文本表示,3 个字母 Mon 到 Sunj 月份 ...

  8. 学习python-20191203-Python Flask高级编程开发鱼书_第02章 Flask的基本原理与核心知识

    视频01: 做一个产品时,一定要对自己的产品有一个明确的定位.并可以用一句话来概括自己产品的核心价值或功能. 鱼书网站几个功能 1.选择要赠送的书籍,向他人赠送书籍(价值功能,核心价值的主线): 2. ...

  9. Memcached的批量删除方案总结

    Memcached的批量删除,向来是Memcached使用者很头疼的事情,因为Memcached采取的缓存方案是哈希表结构,所以没有办法实现delete from tablename where ke ...

  10. linux下的时区修改

    Centos 7时区问题: 通常使用tzselect命令选择时区,今天在修改centos7的时区的时候,修改完以后时区还是没有发生变化,重启也是没有用的:通过网络的帮助了解到,在Centos和ubun ...