1.1.2 • Published 3 years ago
y-danmu v1.1.2
y-danmu
基于Canvas的ESM模块化js弹幕插件
使用
引入
script引入
进入该地址,下载该文件到项目本地目录,然后直接按路径引用
npm方式
- 确保安装了webpack和webpack-cli 没安装则使用以下命令:
npm i webpack webpack-cli@3 -D
- 安装:
npm i y-danmu
- 配置webpack.config.js,给库设置别名方便使用:
const {resolve} = require('path')
module.exports = {
// ...
resolve: {
alias: {
'y-danmu': resolve(__dirname, "node_modules/y-danmu/y-danmu.min.js"),
},
},
// ...
}
开始
- 添加Html结构:
<div class="container">
<div class="video-box">
<canvas id="Y_danmu"></canvas>
<video id="Y_video" src="./example/assets/movie.mp4" controls></video>
</div>
<div class="opt-box">
<input
type="text"
class="danmu-input"
id="Y_input"
placeholder="发送弹幕见证当下吧!"
/>
<button class="danmu-btn">咻!</button>
<input type="color" class="danmu-color" />
<div class="font-wrapper">
<span>字体大小</span>
<span>12</span>
<input
id="dm-font"
type="range"
max="28"
min="12"
step="1"
value="16"
/>
<span>28</span>
</div>
<div class="speed-wrapper">
<span>速度</span>
<span>慢</span>
<input
id="dm-speed"
type="range"
max="10"
min="1"
step="1"
value="2"
/>
<span>快</span>
</div>
</div>
</div>
- 引入样式
<link rel="stylesheet" href="你的项目根目录/node_modules/y-danmu/dist/index.css">
- 使用
$init
方法实例化弹幕:
// videoDomId--视频标签<video>的id,
// canvasDomId--canvas标签<canvas>的id,
// danmuData--弹幕的元数据,即初始数据。例如:
//const danmuData = [
// {
// content: "还好还好", // 除content是必传参数其他可选
// runTime: 3,
// color: "blue",
// speed: 2,
// fontSize: 15,
// }
]
$init(videoDomId, canvasDomId, danmuData)
- 添加发射弹幕方法:
const dmuIpt = document.querySelector("#Y_input"),
dmBtn = document.querySelector(".danmu-btn"),
dmColor = document.querySelector("input[type=color]");
dmBtn.addEventListener("click", handleShootDanmuBtn, false);
function handleShootDanmuBtn() {
if (dmuIpt.value.trim() == "") return;
// 发射弹幕
window.videoDanmu.addDanmu({
content: dmuIpt.value,
color: dmColor.value,
fontSize: dmFont.value,
speed: dmSpeed.value,
});
dmuIpt.value = "";
}
const dmFont = document.querySelector("#dm-font");
const dmSpeed = document.querySelector("#dm-speed");