wands一个轻松实现音视频播放控制的库

前言

随着短视频业务越来越火爆,很多公司都想在这个赛道争一口饭吃, 作为开发者来说, 当第一次接手音视频项目的时候,包括我在内的很多人都是表示非常的头大, web上充斥着各种教程,各种api应接不暇, 中间也有着实不少的坑在等着我们.所以我就想利用业余时间,将工作中的一些方案,抽象出来分享给大家.

wands

这是一个针对h5原生video, audio标签的一个扩展功能库,体量也很小, 对于不熟悉音视频API, 可以说是一个比较方便的选择.目前还不是特别完善,后期会逐步添加新的功能,逐步将它打造成一个可以实现任意功能的播放工具

安装

npm i wands -S

example

import Wands from "wands";

const video = document.getElementById("#video");
const wands = new Wands(video);

// 播放
wands.play();

// 暂停
wands.pause();

// 播放暂停切换
wands.toggle();

// 截取视频一段播放(3 ~ 6s进行播放)
wands.startTime = 3000;
wands.endTime = 6000;
wands.play();

// 取消范围
wands.startTime = NaN;
wands.endTime = NaN;

// 获取播放进度
wands.on('timeupdate',(ev) => {
	const { currentTime } = ev;
	console.log(currentTime)
});

// 监听一次事件
wands.once("playstatus",(ev) => {
	const { playing } = ev;
}) ;

// 取消监听
wands.remove(“playstatus”, onPlaystatus);

// 取消全部事件监听
wands.clear();

// 订阅播放状态变化的事件,获取播放状态
wands.on(“playstatus”,(ev) => {
	const { playing } = ev;
});

// 通过属性获取播放状态
wands.playing

// 循环播放
wands.loop = true;
wands.play();

// 当前是否循环播放
wands.loop

// 设置音量
wands.volume = 0.5;

// 当前播放音量
wands.volume

// 跳转播放到指定时间
wands.currentTime = 3000;

// 当前播放位置
wands.currentTime

// 指定循环播放某一段视频
wands.loop = true;
wands.startTime = 3000;
wands.endTime = 6000;
wands.play();

销毁
wands.destory();