skylord2 / mp4.js Goto Github PK

mp4.js is a library that convert mp4 to fmp4 at browser-side in time. it supports web player can play remote mp4 video file as stream.

Usually web player can play ordinary mp4 file by video,but it can't control loading media data or switch media resource smoothly.

If you use mp4.js than can load any media data as any indicated time,because it can analyze meta information and get binaray data without changing by service.

the package provides three version such as commonjs、esmodule、umd.

npm install mp4.js

<video id="player" autoplay controls width="1280" height="640"></video>

const MP4 = require('mp4.js')
const mp4 = MP4('./xgplayer-demo-720p.mp4')
const video = document.querySelector('#player')
function loadData (i = 0, time = video.currentTime) {
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    mp4.seek(time + i * 0.1).then(buffer => {
      if (buffer) {
        mse.updating = true
        mse.appendBuffer(buffer)
        mse.once('updateend', () => {
          mse.updating = false
        })
      }
    }, (error) => {
      if (i < 10) {
        timer = setTimeout(() => {
          this.loadData(i + 1)
        }, 2000)
      }
    })
  }, 50)
}
let mse
let timer
mp4.on('moovReady', function () {
  mse = new MP4.MSE()
  video.src = mse.url
  mse.on('sourceopen', () => {
    mse.appendBuffer(mp4.packMeta())
    mse.once('updateend', loadData)
  })
  video.addEventListener('timeupdate', function () {
    loadData(1)
  })
})

you can reffer more code in examples directory.

you can visit xgplayer website to experience it. if you just develop locally by reffering github examples

let mp4 = new MP4(url,options,chunkSize)

Method

mp4.getData(start,end,chunkSize)

Usually you need't use it directly because MP4 provides advanced interface. Of course you can use it control more details.

mp4.getMetaInfo(start,end)

this interface can get basic information about the mp4 file such as ftyp、moov、mdat. if succees it will trigger 'moovReady' event and the property mp4.meta is available.

mp4.packMeta()

You know the moov box is indifferent between mp4 and fmp4,so we need repack the moov box. you just call the function once when MSE initialize because it includes ftyp and moov box.

mp4.seek(currentTime)

in most time, the interface is enough.

mp4.clear()

empty mse buffer cache and download cache.

Event

mp4.once('moovReady',handle)
mp4.once('error',handle)

let mse = new MP4.MSE(codecs)

MP4.MSE extends raw MSE API and Event.

if you're interested in this package, xgplayer and xgplayer-mp4 is better way to learn that gives more usage and compatibility in products.

MIT