docs(playback_speed): playbackSpeed guide

docs/playback-speed.md

@@ -0,0 +1,103 @@
+# 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 giving new range to the plyer 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, ginving values which are out of that range will not impact the UI selected speed.
+
+* Get API
+
+
+```
+kalturaPlayer.playbackRate = 1
+
+1
+
+```
+
+* Set API
+
+```
+kalturaPlayer.playbackRate = 0.5
+
+0.5
+
+```
+
+#### Event: RATE_CHANGE 
+
+Application can listent to `RATE_CHANGE` event and be informed that such action was triggered by 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://codepen.io/giladna/pen/Poawvre)**
+

docs/tracks-labels-configuration.md

@@ -0,0 +1,121 @@
+# Tracks Labels Configuration
+
+The Kaltura Player exposes configuration and APIs that are used for controling the tracks and tracks labels.
+
+
+Every track label can be cahanged using the player `customLabels` which configured on the player 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,
+    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 globes 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)**
+