0.3.1 • Published 2 years ago
@clappr/clappr-html5-tvs-playback v0.3.1
A Clappr HTML5 playback for smart TVs devices that implement the HbbTV 2.0.1 specs.
Features
- Supports VoD and Live content;
- Supports DRM content;
- Using
oipfDrmAgent.
- Using
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 method | arguments | description |
|---|---|---|
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 method | arguments | description |
|---|---|---|
playback.load | {String} - resourceUrl | Loads the media on the video element creating one <source> element inside it with the received source URL. |
playback.play | Begins/resume playback of the media. | |
playback.pause | Pauses the media playback. | |
playback.stop | Stops 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 seconds | Updates the media playback position with the received value. |
playback.destroy | Removes 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 id | Updates the current audio track to the one with the provided id. |
| getter | description | response |
|---|---|---|
playback.config | Returns the options.html5TvsPlayback value. | {Object} |
playback.mediaType | Returns if the media is live or vod. | {String} |
playback.isReady | Indicates if the video is ready to play, checking if HTMLMediaElement.readyState is greater than or equal HAVE_CURRENT_DATA value. | {Boolean} |
playback.playing | Indicates if the video is playing or not. | {Boolean} |
playback.currentTime | Returns the position the media is at the current moment. | {Number} - time in seconds |
playback.duration | Returns the duration of the current media. | {Number} - time in seconds |
playback.ended | Indicates whether the media has finished playing. | {Boolean} |
playback.buffering | Indicates whether the media on the buffering state. | {Boolean} |
playback.audioTracks | Returns a list of audio tracks currently available. | {AudioTrack[]} |
playback.currentAudioTrack | Returns the audio track currenlty in use. | {AudioTrack} |
playback.isLive | Indicates whether the media is a live content. | {Boolean} |
playback.minimumDvrSizeConfig | Returns options.playback.minimumDvrSize if is configured and is a valid value. | {Number} |
playback.dvrSize | Returns playback.minimumDvrSizeConfig if is a valid value or one default value. (Currently, is 60 seconds) | {Number} |
playback.dvrEnabled | Indicates whether the live media is on DVR state. | {Boolean} |
playback.playbackType | Returns if the type of media when this property was not change the value is live or vod. | {String} |
playback.sourceMedia | Returns a media url in use. | {String} |
| setter | description | parameter |
|---|---|---|
playback.playbackType | Set 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