From 63465b30deadeb223792efaf5f0e013d41e1b0ae Mon Sep 17 00:00:00 2001 From: Gergo-Binszki Date: Mon, 8 Jun 2020 18:26:12 +0200 Subject: [PATCH 1/5] (docs): PLAY-1761 Fix documentation issues --- _posts/2015-09-01-player.html | 75 +++++++++++++++++++---------------- 1 file changed, 41 insertions(+), 34 deletions(-) diff --git a/_posts/2015-09-01-player.html b/_posts/2015-09-01-player.html index 1db7ad0..2424827 100644 --- a/_posts/2015-09-01-player.html +++ b/_posts/2015-09-01-player.html @@ -22,14 +22,14 @@

Overview

Usage

-

First, a valid IBM Cloud Video embed iframe will be needed to use the Embed API. Log in to your managed IBM Cloud Video account as an administrator of your channel. Then navigate to the Embed Configurator page on your Dashboard by selecting the "Embed" option as seen below:

+

First, a valid IBM Watson Media embed iframe will be needed to use the Embed API. Log in to your managed IBM Watson Media account as an administrator of your channel. Then navigate to the Embed Configurator page on your Dashboard by selecting the "Embed" option as seen below:

Embed configurator page location in channel menu

After selecting an option with the IBM Cloud Video Player, the Embed Configurator is displayed. The Configurator enables channel administrators to set the properties of the Player embed. When it's done, the proper iframe HTML element can be copied to the clipboard with the button which is highlighted in the next picture.

Embed configurator Copy to clipboard button location -

The next step is to include a unique ID in this iframe element. We will use "UstreamIframe".

+

The next step is to include a unique ID in this iframe element. We will use "PlayerIframe".

Create an instance of the Embed API by providing the ID of the iframe. The iframe code should look like this:

- 
<iframe id="UstreamIframe" src="https://video.ibm.com/embed/1524?html5ui" width="640" height="480" allowfullscreen webkitallowfullscreen></iframe>
- 
var viewer = UstreamEmbed('UstreamIframe');
+ 
<iframe id="PlayerIframe" src="https://video.ibm.com/embed/1524?html5ui" width="640" height="480" allowfullscreen webkitallowfullscreen></iframe>
+ 
var viewer = UstreamEmbed('PlayerIframe');

URL parameters

The default behaviour of the player can be modified by extending the src URL with any of the following parameters:

@@ -44,13 +44,13 @@

URL parameters

- + - + @@ -66,35 +66,29 @@

URL parameters

- - - - - - - + - + - + - + - + - - - + + +
allowfullscreenDisables fullscreen and remove the button.Enables full-screen. False value makes the full-screen button inactive. true/false true
autoplayStarts video playback automatically.Starts video playback automatically. Browser settings are stronger and may override the value of this parameter. true/false false
true/false false
offaircontentDisables displaying offair content.true/falsetrue
forced-qualityOverrides the automatic quality selection.Turns off the automatic quality selection and selects the appropriate quality. Low is the smallest available quality, high is the largest and med is the middlemost choice. low, med, highautoN/A
initial-qualitySets the initial quality for the automatic quality selection.Sets the initial quality for the automatic quality selection. The quality selection logic is still turned on and can switch to another quality after playback is started. low, med, highautoN/A
showtitleHides title and viewer count.Shows title and viewer count information inside the player area. true/false true
volumeOverrides the default volume. 0 is mute, 1 is max volume.0.0-1.0user settingSet volume for playback as a percentage of the max volume. Overrides the default volume (100).0-100100
@@ -118,7 +112,7 @@
Example

stop

-

Pauses the live stream, or stops the video and jumps back to the start.

+

Pauses the live stream. In case of videos it stops the video and jumps back to the start.

Example
viewer.callMethod('stop');
@@ -127,8 +121,8 @@
Example

load

Loads a channel or a video in the player. Requires two additional arguments:

Example
@@ -139,7 +133,7 @@
Example

seek

Jumps to given position in played recorded video. Requires one argument:

Example
@@ -149,7 +143,7 @@
Example

volume

Sets the playback sound volume. Requires one argument:

Example
@@ -159,20 +153,20 @@
Example

quality

Sets the stream quality, if available. Requires one argument:

Example
- 
viewer.callMethod('quality', 16); //set to high
+ 
viewer.callMethod('quality', 0); //set to highest quality

cc (closed caption)

-

Enables the selected closed caption if available. Requires one argument:

+

Displays the selected closed caption if available. You can use the 'None' option by using -1 as the argumnet. Otherwise it requires this argument:

Example
-
viewer.callMethod('cc', 1); //enable the closed caption with index 1
+
viewer.callMethod('cc', 1); //enables the closed caption with index 1
 viewer.callMethod('cc', -1); //disables the closed caption

 
 					
getProperty

@@ -180,22 +174,30 @@ 
getProperty

 					
Accessible properties by getProperty:

 
 					
duration

-					
Get the video duration in seconds.

+					
Get the video duration in seconds.milliseconds precision.

 
 					
Example

 					
viewer.getProperty('duration', function (duration) {
     ...
-});

+}); //returns e.g. 123.654

viewers

-

Get the current viewer count for the loaded live stream.

+

Get the current viewer count for the loaded live stream. Doesn't return anything in case of videos.

Example
viewer.getProperty('viewers', function (viewerNumber) {
     ...
 });
+

allTimeTotalviewers

+

Get the accumulated total viewer number for the loaded channel. Doesn't return anything in case of videos.

+ +
Example
+ 
viewer.getProperty('allTimeTotalViewers', function (allTimeViewerNumber) {
+					...
+});
+

progress

Get the current progress for recorded video playback, in seconds.

@@ -222,7 +224,6 @@

playingContent

Example
viewer.callMethod('load', 'channel', 1524);
-
 // ...
 
 viewer.getProperty('playingContent', function (content) {
@@ -234,7 +235,13 @@ 
Example

     //  - if it's offair and doesn't have offair video content
 });
+

volume

+

Get the player volume. This will return the actual value of volume in percents.

+
Example
+ 
viewer.getProperty('volume', function (volume) {
+				// volume == 0 for muted playback 
+				});

addListener & removeListener

The embed player dispatches several events during playback. This method adds or removes event handlers to these events.

From 578431ccb1f99ff8e61ae5bcb49d874b5b4a865f Mon Sep 17 00:00:00 2001 From: Gergo-Binszki Date: Fri, 19 Jun 2020 16:53:20 +0200 Subject: [PATCH 2/5] fix(docs): PLAY-1761 Fix quality dropdown values --- _posts/2015-11-10-basic-example.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/2015-11-10-basic-example.html b/_posts/2015-11-10-basic-example.html index c9c7b45..fa594c1 100644 --- a/_posts/2015-11-10-basic-example.html +++ b/_posts/2015-11-10-basic-example.html @@ -12,7 +12,7 @@
- +
@@ -280,7 +280,7 @@

NASA Public channel

var list = $('.quality-selector'); list.empty(); for (var id in data) { - list.append(''); + list.append(''); } //updating value of the custom select gui element From cdc8c5174897623d981dffc8d3763982dd631716 Mon Sep 17 00:00:00 2001 From: Gergo-Binszki Date: Fri, 19 Jun 2020 17:05:11 +0200 Subject: [PATCH 3/5] fix(docs): PLAY-1761 Fix typo in button id --- _posts/2015-11-10-dynamic-insertion.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/2015-11-10-dynamic-insertion.html b/_posts/2015-11-10-dynamic-insertion.html index 3b84e47..54d9398 100644 --- a/_posts/2015-11-10-dynamic-insertion.html +++ b/_posts/2015-11-10-dynamic-insertion.html @@ -33,7 +33,7 @@
Play
-
Pause
+
Pause
From 14140ebc497985f8c6380250f0028605cf448c9b Mon Sep 17 00:00:00 2001 From: Gergo-Binszki Date: Fri, 19 Jun 2020 17:57:06 +0200 Subject: [PATCH 4/5] fix(docs): PLAY-1761 Change Custom UI example video --- _posts/2017-01-17-player-custom-ui.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_posts/2017-01-17-player-custom-ui.html b/_posts/2017-01-17-player-custom-ui.html index b320559..3700210 100644 --- a/_posts/2017-01-17-player-custom-ui.html +++ b/_posts/2017-01-17-player-custom-ui.html @@ -103,7 +103,7 @@

Custom UI example

-
@@ -237,7 +237,7 @@
Custom UI pieces:

HTML

<div class="player-container">
-    <iframe id="UstreamPlayer" src="//www.ustream.tv/embed/12762028?html5ui" frameborder="0" allow="autoplay" allowfullscreen webkitallowfullscreen scrolling="no"></iframe>
+    <iframe id="UstreamPlayer" src="//www.ustream.tv/embed/recorded/124808555?html5ui" frameborder="0" allow="autoplay" allowfullscreen webkitallowfullscreen scrolling="no"></iframe>
 </div>
 
 <div class="custom-ui-container">

From b6f67fce1992b765c8ce2149d8842280eee5597c Mon Sep 17 00:00:00 2001
From: Gergo-Binszki 
Date: Mon, 22 Jun 2020 10:30:13 +0200
Subject: [PATCH 5/5] fix(docs): PLAY-1761 Don't depend on label text in
 quality selector

---
 _posts/2015-11-10-basic-example.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_posts/2015-11-10-basic-example.html b/_posts/2015-11-10-basic-example.html
index fa594c1..6c1e0c7 100644
--- a/_posts/2015-11-10-basic-example.html
+++ b/_posts/2015-11-10-basic-example.html
@@ -280,7 +280,7 @@ 
NASA Public channel

 			var list =  $('.quality-selector');
 			list.empty();
 			for (var id in data) {
-				list.append('');
+				list.append('');
 			}
 
 			//updating value of the custom select gui element