Wands NPM | npm.io

wands

A native audio and video player extension class, using less code to achieve more functions

Author's own account

作者是个刚刚入行前端开发一年多的一个前端工作者,对计算机技术无比的热情,目前从事音视频领域的前端开发工作,遇到过很多疑问,包括现在也是,希望借着wands这个开源项目的机会,可以和众多开发者交流学习,同时也为社区生态做一点事情.由于刚刚进入行业不久,对很多技术的应用和开源的规范并不熟悉.也希望同行们可以多多建议

Project brief

目前wands支持部分原生事件,并在此基础上,提供了额外的事件用来完善媒体播放的各种场景的需求.此外也提供了部分自定义API供您使用.我希望可以借此来简化音视频开发过程的额外操作,目前是个初步的构想,后面会逐步完善,敬请期待

安装

npm install -save wands

react案例

我的目标是,只需要wands的一个实例,就可以完成播放的全部功能

import React, { useRef, useState } from "react";
import Wands from "wands";

function Player(){
  const [wands,setWands] = useState(null);
  const [playing,setPlaying] = useState(false);
  const video = useRef(null);

  useEffect(() => {
    const videoEle = video.current;
    if(!videoEle) return;

    const wands = new Wands(videoEle);
    setWands(wands);

    // 订阅playstatus事件,当媒体的播放状态发生改变时触发
    wands.on("playstatus",onPlayStatus);
    return () => {
      wands.destory();
    }

  },[]);

  function onPlayStatus(ev){
    const { playing } = ev;
    setPlaying(playing);
  }

  function toggle(){

    // 调用toggle方法 可以轻松实现播放暂停的功能
    wands.toggle();
  }

  return (
    <div>
      <button onClick={toggle}>{playing ? "暂停" : "播放"}</button>
      <video src="https://test.map4" ref={video}/>
    </div>
  )
}

API

wands.play

播放媒体

const wands = new Wands(video) // 接收video或者audio的dom;

wands.play();

wands.pause

暂停媒体

const wands = new Wands(video); // 接收video或者audio的dom;

wands.pause()

wands.toggle

播放与暂停来回切换

const wands = new Wands(video); // 接收video或者audio的dom;

wands.toggle();

wands.on

订阅事件

const wands = new Wands(video); // 接收video或者audio的dom;

function onPlayStatus(ev){
  const { duration,playing,currentTime, ...nativeEventObj } = ev;
  // to do sth
}

wands.on("playstatus",onPlayStatus);

wands.once

单次订阅,当事件被触发一次后,将不会再次触发

const wands = new Wands(video); // 接收video或者audio的dom;

function onPlayStatus(ev){
  const { duration,playing,currentTime, ...nativeEventObj } = ev;
  // to do sth
}

wands.once("playstatus",onPlayStatus);

wands.remove or wands.removeListener

取消订阅

const wands = new Wands(video); // 接收video或者audio的dom;

function onPlayStatus(ev){
  const { duration,playing,currentTime, ...nativeEventObj } = ev;
  // to do sth
}

wands.on("playstatus",onPlayStatus);
// 取消订阅
wands.remove("playstatus",onPlayStatus); // 使用removeListener与remove相同

wands.clear or wands.removeListenerAll

清空订阅, 全部事件将会被取消订阅

const wands = new Wands(video); // 接收video或者audio的dom;

function onPlayStatus(ev){
  const { duration,playing,currentTime, ...nativeEventObj } = ev;
  // to do sth
}

wands.on("playstatus",onPlayStatus);
// 清空订阅
wands.clear(); // 使用removeListenerAll与clear相同

wands.destory

清空代理事件,同时取消全部原生事件监听,此方法会取消代理事件的同时,将底层原生事件的监听一并取消. 所有事件监听会被彻底销毁(慎用)

const wands = new Wands(video); // 接收video或者audio的dom;

function onPlayStatus(ev){
  const { duration,playing,currentTime, ...nativeEventObj } = ev;
  // to do sth
}

wands.on("playstatus",onPlayStatus);
// 取消订阅
wands.destory();