一次js自定义播放器,canvas绘制弹幕的尝试
不多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绘制弹幕的尝试的更多相关文章
- 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍
一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...
- 从零开始学 Web 之 HTML5(四)拖拽接口,Web存储,自定义播放器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Asp.Net MVC中Aplayer.js音乐播放器的使用
1.前言: Aplater.js是一款可爱.漂亮的Js音乐播放器,以前就了解过也弄过一些,现在就用mp3的格式来在.Net里面开发.管网 https://aplayer.js.org/ 2.入手: 在 ...
- 基于 AVPlayer 自定义播放器
如果我只是简单的播放一个视频,而不需要考虑播放器的界面.iOS9.0 之前使用 MPMoviePlayerController, 或者内部自带一个 view 的 MPMoviePlayerViewCo ...
- 基于jplayer实现歌词同步的JS音乐播放器效果
分享一款基于jplayer实现歌词同步的JS音乐播放器效果.这是一款基于jQuery实现的音乐播放器功能代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <textare ...
- js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件 一.总结 一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件 亲测可用 音乐播放器在网页设计中有时候会用到, ...
- 用H5和js写一个移动端自定义播放器
前言 由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...
- Wavesurfer.js音频播放器插件的使用教程
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...
- 原生js制作播放器
以前 就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊) 做这个播放器 也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery 我也做不出来. 以前也用过a ...
随机推荐
- trie(字典树)原理及C++代码实现
字典树,又称前缀树,是用于存储大量字符串或类似数据的数据结构. 它的原理是利用相同前缀来减少查询字符串的时间. 不同于BST把关键字保存在本结点中,TRIE可以想象成把关键字和下一个结点的指针绑定,事 ...
- mybatis分页插件PageHelper简单应用
--添加依赖 <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper --><depende ...
- 23)PHP,数组操作函数
汇总:
- K - The Unique MST (最小生成树的唯一性)
Given a connected undirected graph, tell if its minimum spanning tree is unique. Definition 1 (Spann ...
- 扩增|feather evolution
Wool vs feather 扩增方法:1.Gene Duplication2.Genome Duplication3.Cluster 哺乳动物毛发和鸟类的羽毛,都来自于角蛋白. 羽毛进化图 DNA ...
- if necessary
- 01-Java 教程
一.我的第一个 java 程序 创建文件 HelloWorld.java(文件名需与类名一致), 代码如下: public class HelloWorld { public static void ...
- VBA编程常用词汇英汉对照表
表 20‑1到表 20‑8是VBA编程中使用频率最高的英文单词,按字母排序.词性列中,a表示形容词,n表示名词,v表示动词,p表示介词以及其他词性. 表 20‑1 VBA编程常用词汇表 单词 中文 词 ...
- Windows可以往外ping,外部却ping不通本机
网络背景:192.168.1.17.192.168.1.19.192.168.1.20 三台机器都在一个exsi宿主机下网络非常简单 问题描述:17和19都可以ping通20:20却不能ping通17 ...
- [LC] 15. 3Sum
Given an array nums of n integers, are there elements a, b, c in nums such that a + b + c = 0? Find ...