Skip to content

hipster-player 12.6.3

Install from the command line:
Learn more about npm packages
$ npm install @tvoli/hipster-player@12.6.3
Install via package.json:
"@tvoli/hipster-player": "12.6.3"

About this version

Hipster player

Video player on top of the https://github.com/google/shaka-player

  • Widevine, Playready, Fairplay DRM supported
  • Dash, Smoothstreaming, HLS supported
  • Chromecast and AirPlay supported
  • Supported browsers

Using the player

READ THE MANUAL

Quick example

// It searches for element with `id="player"`, this can be changed with the playerContainer property
const player = new MagineMediaPlayer({
  baseUri: 'https://client-api.magine.com/api',
});

player.renderControls();

player.loadWithPreflight({
  accessToken: 'xxx-xxx-xxx-xxx-xxx',
  assetId: 'xxx-xxx-xxx-xxx-xxx', // playable id
  viewableId: 'xxx-xxx-xxx-xxx-xxx', // optional, allows to fetch metadata
  authorizationKey: 'xxx',
  entitlementToken: 'xxx',
});

Run the player

  • run it: yarn start -> demo website on http://localhost:4000/playground
  • run it in legacy mode (build which supports legacy browsers like IE11): yarn start:legacy
  • lint with yarn lint
  • test with yarn test

NOTE: due to DRM limitations, player will only work if served over https or if origin is localhost! For example, it won't work on http://0.0.0.0:4000/playground but will work on http://localhost:4000/playground. See EME Secure Contexts

Mux support

Hipster Player can send Mux events by passing the Mux key in a muxKey property when initialising the player. Please contact customer success on how to get Mux key

const player = new MagineMediaPlayer({
  baseUri: 'https://client-api.magine.com/api',
  muxKey: 'xxx123'
});

Dev workflow

  • create a branch from master branch
  • work on something
  • prepare a PR back into master branch
  • get your PR approved
  • Run yarn generateTypes and commit changes
  • bump version (according to semver) with yarn version --new-version <patch|minor|major> yarn version docs
  • merge PR and delete your branch
  • once PR is merged to master the package is uploaded into repository with publish-hipster-player.yml Github action. Publish will fail if the version is already published. (Bonus info: version can only be unpublished within the first 24 hours)
  • add release notes https://github.com/tvoli/hipster-player/releases
  • create a new branch in web-mamo and run yarn upgrade @tvoli/hipster-player. Create web-mamo PR

Developing in parallel with web-mamo

This method uses yalc instead of yarn link since for some reason yarn link and npm link are not working good with hipster and they are generally painful to work with.

  • install yalc globally yarn global add yalc
  • inside hipster-player folder type yalc push
  • Copy the outputted package name, usually something like @tvoli/hipster-player@VERSION
  • inside web-mamo folder run yald add <package_name> from the point above
  • make sure your package.json points to the "yalc" repo not the npm package
  • run yarn inside web-mamo (can be skipped but better do it anyways) After you do changes to hipster
  • run yalc push If you update hipster dependencies e.g. shaka version
  • Make sure you run yarn inside hipster folder
  • run yalc push
  • and also run yarn inside web-mamo

Details


Assets

  • hipster-player-12.6.3.tgz

Download activity

  • Total downloads 34
  • Last 30 days 0
  • Last week 0
  • Today 0