Git Product home page Git Product logo

bulletplayer's Introduction

bulletPlayer

a video-player by canvas

modifiy at 2018-4-11

使用canvas绘制实现video内容输出

  • 待解决问题

    移动端全屏横屏,双击全屏,全屏后的画布尺寸适配,显示/隐藏水印,开启/关闭弹幕。

  • 调用方法

let bp=new bulletPlayer();

bp.init();
  • 参数说明

bulletPlayer(obj)

obj {

title:"",       //视频标题,默认为"",为空则不显示标题栏

debug:true,     //组件调试模式,默认为true,控制台会输出调试信息

stream:false,   //流模式,默认为false,视频源为帧图片流(base64)

fps:1000/30,    //帧频,默认为1000/30,即1/30秒绘制一帧

quality:1,      //画面质量,默认为1,范围为0-1

volume:1,       //视频音量,默认为1,范围为0-1

src:""          //视频源地址,默认为""

}

  • 调用方法
bp.init() //组件初始化,将原有video元素隐藏,并返回对象

bp.getVolume() //获取video音量,并返回音量

bp.setVolume(vol=1) //设置video音量,并返回音量

bp.exitFullScreen() //退出全屏,并返回对象

bp.enterFullScreen() //进入全屏,并返回对象


bp.onCreate(fn="") //当组件开始创建htmldom时增加事件,并返回对象

bp.onInit(fn="") //当组件初始化时增加事件,并返回对象

bp.onRefresh(fn="") //当组件每次UI刷新时增加事件,并返回对象

  • 当开启流模式时
bp.draw(stream="",fn="") //绘制帧流,建议在循环绘制中调用,并返回对象

bp.clean(fn="") //清理当前画布,并返回对象

  • 当关闭流模式时
bp.playVideo() //播放video,并返回对象

bp.pauseVideo() //暂停video,并返回对象


bp.onVideoLoadStart(fn="") //当元数据开始加载时增加事件,并返回对象

bp.onVideoDurationChange(fn="") //当时长已改变时增加事件,并返回对象

bp.onVideoLoadedMetaData(fn="") //当元数据已加载时增加事件,并返回对象

bp.onVideoLoadedData(fn="") //当当前帧的数据可用时增加事件,并返回对象

bp.onVideoProgressData(fn="") //当视频正在下载中时增加事件,并返回对象

bp.onVideoCanPlay(fn="") //当已准备好开始播放时增加事件,并返回对象

bp.onResize(fn="") //当页面尺寸改变时增加事件,并返回对象

bp.onVideoPlay(fn="") //监听video播放时增加事件,并返回对象

bp.onVideoPause(fn="") //监听video暂停时增加事件,并返回对象

bp.onVideoEnded(fn="") //监听video结束时增加事件,并返回对象

bulletplayer's People

Contributors

bulletyuan avatar

Stargazers

TayeShi avatar

Watchers

 avatar

bulletplayer's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.