Coder Social home page Coder Social logo

hughsk / web-media-playback Goto Github PK

View Code? Open in Web Editor NEW
8.0 3.0 0.0 12 KB

Retrieve playback and buffering information about audio or video playing in the browser

Home Page: http://hughsk.io/web-media-playback

License: MIT License

JavaScript 94.73% HTML 5.27%

web-media-playback's Introduction

web-media-playback

stable

Retrieve playback and buffering information about audio or video playing in the browser. Easily makes it possible to build your own media controls.

Usage

NPM

playback = Playback([media])

Creates a new playback instance. Optionally, you can pass a media object to use on creation. This should be an instance of Audio, HTMLAudioElement or HTMLVideoElement.

const Playback = require('web-media-playback')

const audio = new window.Audio()
const playback = Playback(audio)

audio.src = 'yay.mp3'

playback.info()

Retrieves playback and buffering information about the selected media. The data returned should look something like this:

{
  playing: true,
  loaded: true,
  ready: true,
  duration: 217.324884,
  current: 25.3842934,
  buffer: 180.923398,
  buffered: [[0, 180.923398]],
  playback: [[0, 25.3842934]],
  seekable: [[0, 217.324884]]
}

Note that buffered, playback and seekable are lists of time ranges โ€” each element is a [start, stop] array, and there can be more than one element for each of these metrics. For example:

{
  playback: [[0, 25], [35, 45]]
}

The above would occur if:

  1. The media started at 0 seconds.
  2. The media played for 25 seconds.
  3. At that point, the media was manually seeked to 35 seconds.
  4. And .info() was then called 45 seconds into the audio/video.

info.playing

A boolean reflecting whether or not the media is currently playing.

info.loaded

A boolean reflecting whether or not the media is loaded at all.

info.ready

A boolean reflecting whether or not the media is ready to play.

info.duration

The total duration of the media, in seconds.

info.current

The current playback time, in seconds.

info.buffer

An approximation of how far the media has been buffered. Intended for convenience โ€” use info.buffered for more exact metrics.

info.buffered

A list of time ranges displaying the parts of the media that have been buffered. Note that this may be split up into multiple ranges if you're seeking through the video quickly enough.

info.playback

A list of time ranges that have been played at least once in the current session.

info.seekable

A list of the seekable time ranges in the current media. This should almost always be [[0, info.duration]].

playback.use(media)

Changes the currently observed media. You can use this when swapping songs/videos to maintain the existing instance, and future calls to .info() will be updated as soon as the media is ready.

playback.dispose()

Cleans up any external references for better garbage collection. After calling this, .info() will no longer be updated

See Also

License

MIT, see LICENSE.md for details.

web-media-playback's People

Contributors

hughsk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  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.