kaltura · giladna · Oct 27, 2022 · Oct 27, 2022 · Oct 29, 2022 · Oct 29, 2022
diff --git a/demo/playbackRate_selector.html b/demo/playbackRate_selector.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>PlaybackRate Selector</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+
+<body>
+    <div id="player-placeholder" style="width:560px; height:395px"></div>
+    <script type="text/javascript" src="https://qa-apache-php7.dev.kaltura.com/p/1091/embedPlaykitJs/uiconf_id/15225670"></script>
+    <script type="text/javascript">
+        try {
+            var kalturaPlayer = KalturaPlayer.setup({
+                "sources": {
+                    "options": {}
+                },
+                "targetId": "player-placeholder",
+                "ui": {
+                    "components": {}
+                },
+                "provider": {
+                    "partnerId": 1091,
+                    "uiConfId": 15225670
+                },
+                "playback": {
+                    "playbackRates": [
+                        0.25,
+                        0.5,
+                        0.75,
+                        1,
+                        1.25,
+                        1.5,
+                        1.75,
+                        2,
+                        4
+                    ],
+                    "autoplay": true,
+                    "allowMutedAutoPlay": true,
+                    "playsinline": true,
+                    "textLanguage": "default",
+                    "options": {
+                        "html5": {
+                            "hls": {},
+                            "dash": {}
+                        }
+                    },
+                    "streamPriority": [{
+                        "engine": "html5",
+                        "format": "hls"
+                    }, {
+                        "engine": "html5",
+                        "format": "dash"
+                    }, {
+                        "engine": "html5",
+                        "format": "progressive"
+                    }]
+                },
+                "plugins": {
+
+                },
+                "log": {
+                    "level": "DEBUG"
+                }
+            });
+            kalturaPlayer.loadMedia({
+                "entryId": "0_wifqaipd"
+            });
+        } catch (e) {
+            console.error(e.message)
+        }
+
+        //Adding event listeners
+        kalturaPlayer.addEventListener(kalturaPlayer.Event.Core.VOLUME_CHANGE, event =>
+            console.info(kalturaPlayer.volume)
+        );
+
+        const events = [
+
+            kalturaPlayer.Event.Core.RATE_CHANGE,
+            kalturaPlayer.Event.Core.PLAY,
+            kalturaPlayer.Event.Core.TRACKS_CHANGED,
+            kalturaPlayer.Event.Core.PAUSE
+        ];
+        events.forEach(eventName => {
+            kalturaPlayer.addEventListener(eventName, event => console.info('Event: ', event.type, " ", event.payload));
+        });
+    </script>
+</body>
+
+</html>
diff --git a/docs/images/playbackSpeedConfig.png b/docs/images/playbackSpeedConfig.png
diff --git a/docs/images/playbackSpeedConfigNewRange.png b/docs/images/playbackSpeedConfigNewRange.png
diff --git a/docs/images/tracksLabelsAudio.png b/docs/images/tracksLabelsAudio.png
diff --git a/docs/images/tracksLabelsVideo.png b/docs/images/tracksLabelsVideo.png
diff --git a/docs/playback-speed.md 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
@@ -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)**
+