Code Monkey home page Code Monkey logo

h5media's Introduction

H5Media

html5音频audio和视频video封装组件

使用方法及接口说明

/* 
 * 实例化一个Media对象,有两种方式
 */
var media=new H5Media({src:'',type:'video'}); //其一,指定媒体文件的地址、类型等
var media=new H5Media(document.getElementById('video')); //其二,获取对页面上 video#video 的引用封装

/* 查询媒体文件格式支持情况 */
H5Media.video //mp4 ogg webm flv
H5Media.audio //mp3 wav m4a ogg aac webm

/* 媒体准备就绪(可以获取到媒体长度等信息,即对应loadedmetadata事件) 
 * media.ready(callback);
 */
media.ready(function(){
    console.log(this.length);  
});

/* 播放 */
media.playing=true;
media.play();

/* 暂停 */
media.playing=false;
media.pause();

/* 停止 */
media.stop();

/* 回到开头 */
media.reset();

/* 回到结尾 */
media.finish();

/* 反向切换播放状态 */
media.toggle();

/* 快进(退) */
media.skip(number);

/* 跳转到指定时间 */
media.go(number);
media.currentTime=number;

/* 设置声音大小0-1 */
media.setVol(number);
media.volume=number;

/* 调大声音 */
media.volUp();

/* 调小声音 */
media.volDown();

/* 静音 */
media.muted=true;
media.mute();

/* 取消静音 */
media.muted=false;
media.unmute();

/* 缓存情况 */
media.buffered; // [[0,11.0]]

/* 已播放片段情况 */
media.played; // [[0,11.0]]



/* 事件绑定,支持所有的MediaElement级事件 
 * media.on(event_name, callback);
 */
media.on('playing',function(){
    console.log('正在播放');        
});
media.on('pause',function(){
    console.log('暂停播放');        
});

DEMO

http://u.boy.im/media

h5media's People

Contributors

qiqiboy avatar

Watchers

James Cloos avatar Cake avatar

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.