diff --git a/demo/playbackRate_selector.html b/demo/playbackRate_selector.html new file mode 100644 index 000000000..31419becb --- /dev/null +++ b/demo/playbackRate_selector.html @@ -0,0 +1,92 @@ + + + + + + PlaybackRate Selector + + + + +
+ + + + + diff --git a/docs/images/playbackSpeedConfig.png b/docs/images/playbackSpeedConfig.png new file mode 100644 index 000000000..f864ff960 Binary files /dev/null and b/docs/images/playbackSpeedConfig.png differ diff --git a/docs/images/playbackSpeedConfigNewRange.png b/docs/images/playbackSpeedConfigNewRange.png new file mode 100644 index 000000000..107bf353e Binary files /dev/null and b/docs/images/playbackSpeedConfigNewRange.png differ diff --git a/docs/images/tracksLabelsAudio.png b/docs/images/tracksLabelsAudio.png new file mode 100644 index 000000000..8b72b88b1 Binary files /dev/null and b/docs/images/tracksLabelsAudio.png differ diff --git a/docs/images/tracksLabelsVideo.png b/docs/images/tracksLabelsVideo.png new file mode 100644 index 000000000..4f194953a Binary files /dev/null and b/docs/images/tracksLabelsVideo.png differ diff --git a/docs/playback-speed.md b/docs/playback-speed.md new file mode 100644 index 000000000..41be1605f --- /dev/null +++ b/docs/playback-speed.md @@ -0,0 +1,105 @@ +# Playback Speed Configuration + +The Kaltura Player exposes configuration and APIs that are used for controling the playback speed. + +The default playback speed is 1. + +Values less than 1 will result in reducing playback speed relatively to the nornal speed + +Values greater 1 will result in increasing playback speed relatively to the nornal speed + + +### Playback Speed UI control + +The playback seepd can be changed using the UI setting => speed controller icon. + + +![example](./images/playbackSpeedConfig.png) + +#### PlaybackRates + +PlaybackRates sets the available rates at which the media can be played. + +###### The player default playbackRates : + +``` +[ + 0.5, + 1, + 1.5, + 2 +] +``` + +Application may change the default config by providing new values in the playback config object + +``` +"playback": { +... + "playbackRates": [ + 0.25, + 0.5, + 0.75, + 1, + 1.25, + 1.5, + 1.75, + 2, + 4 + ], +.... +``` + +![example](./images/playbackSpeedConfigNewRange.png) + +Note: + + * Player may have issues to serve playack in high playback speed, especially on TV's + * Negative values are not valid + * Playback speed 0 will stop the playback + + +####Playback Speed API + +Application may use the player API to get or set the player speed programatically. +make sure you set values which match the playbackRates Array values, as values which are out of that range will not impact the playback speed. + +* Get API + + +``` +kalturaPlayer.playbackRate = 1 + +1 + +``` + +* Set API + +``` +kalturaPlayer.playbackRate = 0.5 + +0.5 + +``` + +#### Event: RATE_CHANGE + +The application can listen to the `RATE_CHANGE` event and be informed that such action was triggered by the user + +``` +const events = [ + kalturaPlayer.Event.Core.RATE_CHANGE +]; + +events.forEach(eventName => { + kalturaPlayer.addEventListener(eventName, event => console.info('Event:', event.type, " ", event.payload)); +}); +``` + + + +#### Example: + +**[Playback Speed Example](https://kaltura.github.io/kaltura-player-js/demo/playbackRate_selector.html)** + diff --git a/docs/tracks-labels-configuration.md b/docs/tracks-labels-configuration.md new file mode 100644 index 000000000..dc240e3f1 --- /dev/null +++ b/docs/tracks-labels-configuration.md @@ -0,0 +1,121 @@ +# Tracks Labels Configuration + +The Kaltura Player exposes configuration and APIs can modify the tracks and tracks labels. + + +Every track label can be changed using the configuration option `customLabels` on the player's root level configuration object. + +[Klatura Player config](https://github.com/kaltura/kaltura-player-js/blob/master/docs/configuration.md#configcustomlabels) +[Playkit config](https://github.com/kaltura/playkit-js/blob/master/docs/configuration.md#configcustomlabels) + +``` + customLabels: { + //qualities: translateVideoQuality, // --> this can also be defined in a finclion check translateVideoQuality example below + qualities: function (videoTrack) { + if (videoTrack.height > 500) { + return 'High'; + } + return 'Low'; + }, + captions: translateLangCode, + audio: translateLangCode + } +``` + + +### Video Tracks Lables: translation function + +Video Track has the following parameters which can be used for implementing the label logic + + +VideoTrack structure: + +``` +{ + "active": false, + "label": "360p", + "language": "", + "index": 1, + "available": true, + "bandwidth": 719794, + "width": 640, + "height": 360 +} +``` + +``` +const translateVideoQuality = (track) => { + if (track.height > 500) { + return 'High'; + } + return 'Low'; + }; +``` + + +### AudioText Tracks Labels: translation function + +Audio/Text Tracks have the following parameters which can be used for implementing the labels logic + + +AudioTrack structure: + +``` + { + "id": 0, + "active": false, + "label": "English", + "language": "en", + "index": 0, + "available": true + } + +``` + +TextTrack structure: + +``` + { + "id": 1, + "active": true, + "label": "Esp", + "language": "es", + "index": 1, + "available": true, + "kind": "subtitles", + "default": false + } +``` + +``` +const translateLangCode = (track) => { + if (track.language === "es" || track.language === "spa") { + return 'Spanish'; + } + else if (track.language === "en" || track.language === "eng") { + return 'English'; + } + return track.label; +}; +``` + +### Tracks UI control + +The tracks can be changed using the settings icon for video tracks and the globe icon for audio and text tracks + + + +![example](./images/tracksLabelsVideo.png) + +![example](./images/tracksLabelsAudio.png) + + + +#### Example: + +**[Tracks Lables configuration](https://codepen.io/giladna/pen/WNyexqO)** + +### Tracks Documentation + +**[Tracks Documentation](https://github.com/kaltura/kaltura-player-js/blob/master/docs/managing-tracks.md)** +