Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@clappr/clappr-html5-tvs-playback

Package Overview
Dependencies
Maintainers
7
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@clappr/clappr-html5-tvs-playback

A Clappr HTML5 playback for smart TVs based on HbbTV 2.0.1 specs.

  • 0.0.9
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4
increased by100%
Maintainers
7
Weekly downloads
 
Created
Source

This project is still in progress. Check the next steps to see the path to the first stable version.


Clappr HTML5 TVs playback

A Clappr HTML5 playback for smart TVs devices that implement the HbbTV 2.0.1 specs.


Features

  • Supports VoD and Live content;
    • Current mime types: [video/mp4, application/vnd.apple.mpegurl, application/vnd.ms-sstr+xml, application/dash+xml].
  • Supports DRM content;

Configuration

The options for the playback must be placed in the html5TvsPlayback property as shown below:

var player = new Clappr.Player({
  source: 'http://your.video/here.mp4',
  plugins: [HTML5TVsPlayback],
  html5TvsPlayback: {
    drm: {
      licenseServerURL: 'https://my-license-server.com/keys/my-key',
      xmlLicenceAcquisition: '<WRMHEADER xmlns="http://schemas.microsoft.com/DRM/2007/03 PlayReadyHeader" version="4.0.0.0"><DATA><PROTECTINFO><ALGID>AESCTR</ALGID><KEYLEN>16</KEYLEN></PROTECTINFO><KID>base64-encoded kid</KID><CHECKSUM>checksum of the content key for verification</CHECKSUM><LA_URL>URL for license acquisition</LA_URL></DATA></WRMHEADER>',
    },
  },
});

drm {Object}

Group all DRM-related config. The currently available configs are:

  • licenseServerURL {String}

    The license server URL used on the license acquisition. Only used to do the post acquisition.

  • xmlLicenceAcquisition {String}

    The part of XML that contains all necessary info to do the full challenge of license acquisition. See more about the PlayReady Header Specification here.

API Documentation

Playback API

static methodargumentsdescription
HTML5TVsPlayback.canPlay
  • {String} - resourceUrl
  • {String} - mimeType (optional)
Returns a {Boolean} response accordingly to the given media URL (resourceUrl). If a mimeType is provided then this will be used instead of inferring the mimetype via the given URL.
instance methodargumentsdescription
playback.load{String} - resourceUrlLoads the media on the video element creating one <source> element inside it with the received source URL.
playback.playBegins/resume playback of the media.
playback.pausePauses the media playback.
playback.stopStops the media playback. This implies on the removing the src attribute from the video element and calling the load() method without a valid source to stop downloading the source that was removed.
playback.seek{Number} - time in secondsUpdates the media playback position with the received value.
playback.destroyRemoves the video component from the DOM.
playback.getCurrentTime (deprecated)This method only exists for backward compatibility reasons. Prefer currentTime getter.
playback.getDuration (deprecated)This method only exists for backward compatibility reasons. Prefer duration getter.
playback.isPlaying (deprecated)This method only exists for backward compatibility reasons. Prefer playing getter.
playback.getPlaybackType (deprecated)This method only exists for backward compatibility reasons. Prefer mediaType getter.
playback.switchAudioTrack{String} - track idUpdates the current audio track to the one with the provided id.
getterdescriptionresponse
playback.configReturns the options.html5TvsPlayback value.{Object}
playback.mediaTypeReturns if the media is live or vod.{String}
playback.isReadyIndicates if the video is ready to play, checking if HTMLMediaElement.readyState is greater than or equal HAVE_CURRENT_DATA value.{Boolean}
playback.playingIndicates if the video is playing or not.{Boolean}
playback.currentTimeReturns the position the media is at the current moment.{Number} - time in seconds
playback.durationReturns the duration of the current media.{Number} - time in seconds
playback.endedIndicates whether the media has finished playing.{Boolean}
playback.bufferingIndicates whether the media on the buffering state.{Boolean}
playback.audioTracksReturns a list of audio tracks currently available.{AudioTrack[]}
playback.currentAudioTrackReturns the audio track currenlty in use.{AudioTrack}
playback.isLiveIndicates whether the media is a live content.{Boolean}
playback.minimumDvrSizeConfigReturns options.playback.minimumDvrSize if is configured and is a valid value.{Number}
playback.dvrSizeReturns playback.minimumDvrSizeConfig if is a valid value or one default value. (Currently, is 60 seconds){Number}
playback.dvrEnabledIndicates whether the live media is on DVR state.{Boolean}
playback.playbackTypeReturns if the type of media when this property was not change the value is live or vod.{String}
playback.sourceMediaReturns a media url in use.{String}
setterdescriptionparameter
playback.playbackTypeSet the new value of playback.playbackType property.{String}

Types

AudioTrack
/**
 * An object representing a single audio track.
 * @typedef {Object} AudioTrack
 * @property {String} id - A unique identifier for the track. Used to identify it among the others.
 * @property {String} language - The language of the track (e.g., 'en', 'pt-BR').
 * @property {String} label - An optional label to be used in the UI to describe the track.
 * @property {String} kind - The category this track belongs to (e.g., 'main', 'description').
 */
{
  id: '0',
  language: 'en',
  label: 'English (audio description)',
  kind: 'description',
}

Next Steps

  • Media with DRM;
  • Live media;
  • subtitles/closed captions;
  • multi-audio;
  • Advertisement;

Development

Install dependencies: npm install

Run: npm start

Test: npm test

Lint: npm run lint

Build: npm run build

Minified version: npm run release

Keywords

FAQs

Package last updated on 03 Apr 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc