Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(docs): PLAY-1761 Fix documentation issues #88

Open
wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open

(docs): PLAY-1761 Fix documentation issues #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
63465b3
(docs): PLAY-1761 Fix documentation issues
Jun 8, 2020
578431c
fix(docs): PLAY-1761 Fix quality dropdown values
Jun 19, 2020
cdc8c51
fix(docs): PLAY-1761 Fix typo in button id
Jun 19, 2020
14140eb
fix(docs): PLAY-1761 Change Custom UI example video
Jun 19, 2020
b6f67fc
fix(docs): PLAY-1761 Don't depend on label text in quality selector
Jun 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 41 additions & 34 deletions _posts/2015-09-01-player.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ <h2>Overview</h2>

<section>
<h2>Usage</h2>
<p>First, a valid IBM Cloud Video embed iframe will be needed to use the Embed API. Log in to your managed <a href="https://video.ibm.com/" target="_blank">IBM Cloud Video</a> 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:</p>
<p>First, a valid IBM Watson Media embed iframe will be needed to use the Embed API. Log in to your managed <a href="https://video.ibm.com/" target="_blank">IBM Watson Media</a> 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:</p>
<img class="no-border" src="/images/embed-configurator-page-location.png" alt="Embed configurator page location in channel menu">
<p>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.</p>
<img class="no-border" src="/images/embed-configurator-copy-to-clipboard.png" alt="Embed configurator Copy to clipboard button location">
<p>The next step is to include a unique ID in this iframe element. We will use "UstreamIframe".</p>
<p>The next step is to include a unique ID in this iframe element. We will use "PlayerIframe".</p>
<p>Create an instance of the Embed API by providing the ID of the iframe. The iframe code should look like this:</p>
<pre><code class="html">&lt;iframe id=&quot;UstreamIframe&quot; src=&quot;https://video.ibm.com/embed/1524?html5ui&quot; width=&quot;640&quot; height=&quot;480&quot; allowfullscreen webkitallowfullscreen&gt;&lt;/iframe&gt;</code></pre>
<pre><code class="javascript">var viewer = UstreamEmbed('UstreamIframe');</code></pre>
<pre><code class="html">&lt;iframe id=&quot;PlayerIframe&quot; src=&quot;https://video.ibm.com/embed/1524?html5ui&quot; width=&quot;640&quot; height=&quot;480&quot; allowfullscreen webkitallowfullscreen&gt;&lt;/iframe&gt;</code></pre>
<pre><code class="javascript">var viewer = UstreamEmbed('PlayerIframe');</code></pre>
<h3>URL parameters</h3>
<p>The default behaviour of the player can be modified by extending the src URL with any of the following parameters:</p>
<table class="table responsive">
Expand All @@ -44,13 +44,13 @@ <h3>URL parameters</h3>
<tbody>
<tr>
<td>allowfullscreen</td>
<td>Disables fullscreen and remove the button.</td>
<td>Enables full-screen. False value makes the full-screen button inactive.</td>
<td>true/false</td>
<td>true</td>
</tr>
<tr>
<td>autoplay</td>
<td>Starts video playback automatically.</td>
<td>Starts video playback automatically. Browser settings are stronger and may override the value of this parameter.</td>
<td>true/false</td>
<td>false</td>
</tr>
Expand All @@ -66,35 +66,29 @@ <h3>URL parameters</h3>
<td>true/false</td>
<td>false</td>
</tr>
<tr>
<td>offaircontent</td>
<td>Disables displaying offair content.</td>
<td>true/false</td>
<td>true</td>
</tr>
<tr>
<td>forced-quality</td>
<td>Overrides the automatic quality selection.</td>
<td>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.</td>
<td>low, med, high</td>
<td>auto</td>
<td>N/A</td>
</tr>
<tr>
<td>initial-quality</td>
<td>Sets the initial quality for the automatic quality selection.</td>
<td>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.</td>
<td>low, med, high</td>
<td>auto</td>
<td>N/A</td>
</tr>
<tr>
<td>showtitle</td>
<td>Hides title and viewer count.</td>
<td>Shows title and viewer count information inside the player area.</td>
<td>true/false</td>
<td>true</td>
</tr>
<tr>
<td>volume</td>
<td>Overrides the default volume. 0 is mute, 1 is max volume.</td>
<td>0.0-1.0</td>
<td>user setting</td>
<td>Set volume for playback as a percentage of the max volume. Overrides the default volume (100).</td>
<td>0-100</td>
<td>100</td>
</tr>
</tbody>
</table>
Expand All @@ -118,7 +112,7 @@ <h6>Example</h6>


<h4>stop</h4>
<p>Pauses the live stream, or stops the video and jumps back to the start.</p>
<p>Pauses the live stream. In case of videos it stops the video and jumps back to the start.</p>

<h6>Example</h6>
<pre><code class="javascript">viewer.callMethod('stop');</code></pre>
Expand All @@ -127,8 +121,8 @@ <h6>Example</h6>
<h4>load</h4>
<p>Loads a channel or a video in the player. Requires two additional arguments:</p>
<ul>
<li><code>type</code> - the loaded content type (channel | video)</li>
<li><code>id</code> - the loaded content id</li>
<li><code>type</code> - content type ('channel' or 'video')</li>
<li><code>id</code> - media id</li>
</ul>

<h6>Example</h6>
Expand All @@ -139,7 +133,7 @@ <h6>Example</h6>
<h4>seek</h4>
<p>Jumps to given position in played recorded video. Requires one argument:</p>
<ul>
<li>position in seconds</li>
<li><code>position</code> - target time in seconds</li>
</ul>

<h6>Example</h6>
Expand All @@ -149,7 +143,7 @@ <h6>Example</h6>
<h4>volume</h4>
<p>Sets the playback sound volume. Requires one argument:</p>
<ul>
<li>volume percent between 0-100</li>
<li><code>volume</code> percent between 0-100</li>
</ul>

<h6>Example</h6>
Expand All @@ -159,43 +153,51 @@ <h6>Example</h6>
<h4>quality</h4>
<p>Sets the stream quality, if available. Requires one argument:</p>
<ul>
<li>a <code>qualityID</code> key from received quality options in <code>quality</code> event</li>
<li>an <code>id</code> key from received quality options in <code>quality</code> event</li>
</ul>

<h6>Example</h6>
<pre><code class="javascript">viewer.callMethod('quality', 16); //set to high</code></pre>
<pre><code class="javascript">viewer.callMethod('quality', 0); //set to highest quality</code></pre>

<h4>cc (closed caption)</h4>
<p>Enables the selected closed caption if available. Requires one argument:</p>
<p>Displays the selected closed caption if available. You can use the 'None' option by using -1 as the argumnet. Otherwise it requires this argument:</p>
<ul>
<li>a <code>ccIndex</code> key from the received closed caption array in <code>cc</code> event</li>
<li>an <code>index</code> key from the received closed caption object in <code>cc</code> event</li>
</ul>

<h6>Example</h6>
<pre><code class="javascript">viewer.callMethod('cc', 1); //enable the closed caption with index 1</code>
<pre><code class="javascript">viewer.callMethod('cc', 1); //enables the closed caption with index 1</code>
<code class="javascript">viewer.callMethod('cc', -1); //disables the closed caption</code></pre>

<h3>getProperty</h3>
<p>Read a property of the embed player. This method is <strong>asynchronous</strong>, the data will be passed to a callback function, given as argument.<br/></p>
<p>Accessible properties by <code>getProperty</code>:</p>

<h4>duration</h4>
<p>Get the video duration in seconds.</p>
<p>Get the video duration in <code>seconds.milliseconds</code> precision.</p>

<h6>Example</h6>
<pre><code class="javascript">viewer.getProperty('duration', function (duration) {
...
});</code></pre>
}); //returns e.g. 123.654</code></pre>


<h4>viewers</h4>
<p>Get the current viewer count for the loaded live stream.</p>
<p>Get the current viewer count for the loaded live stream. Doesn't return anything in case of videos.</p>

<h6>Example</h6>
<pre><code class="javascript">viewer.getProperty('viewers', function (viewerNumber) {
...
});</code></pre>

<h4>allTimeTotalviewers</h4>
<p>Get the accumulated total viewer number for the loaded channel. Doesn't return anything in case of videos.</p>

<h6>Example</h6>
<pre><code class="javascript">viewer.getProperty('allTimeTotalViewers', function (allTimeViewerNumber) {
...
});</code></pre>


<h4>progress</h4>
<p>Get the current progress for recorded video playback, in seconds.</p>
Expand All @@ -222,7 +224,6 @@ <h4>playingContent</h4>

<h6>Example</h6>
<pre><code class="javascript">viewer.callMethod('load', 'channel', 1524);

// ...

viewer.getProperty('playingContent', function (content) {
Expand All @@ -234,7 +235,13 @@ <h6>Example</h6>
// - if it's offair and doesn't have offair video content
});</code></pre>

<h4>volume</h4>
<p>Get the player volume. This will return the actual value of volume in percents.</p>

<h6>Example</h6>
<pre><code class="javascript">viewer.getProperty('volume', function (volume) {
// volume == 0 for muted playback
});</code></pre>

<h3>addListener &amp; removeListener</h3>
<p>The embed player dispatches several events during playback. This method adds or removes event handlers to these events.</p>
Expand Down
4 changes: 2 additions & 2 deletions _posts/2015-11-10-basic-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<article class="row">
<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
<iframe src="https://video.ibm.com/embed/1524?html5ui" id="UstreamFrame" width="100%" height="100%" allowfullscreen webkitallowfullscreen style="border: 0 transparent none; position:absolute; top:0; left: 0"></iframe>
<iframe src="https://video.ibm.com/embed/1524?autoplay=true&volume=0" id="UstreamFrame" width="100%" height="100%" allowfullscreen webkitallowfullscreen style="border: 0 transparent none; position:absolute; top:0; left: 0"></iframe>
</div>
<div class="panel clear">
<div class="row gutter-30">
Expand Down Expand Up @@ -280,7 +280,7 @@ <h4 class="media-heading">NASA Public <small>channel</small></h4>
var list = $('.quality-selector');
list.empty();
for (var id in data) {
list.append('<option value="' + id + '" ' + (data[id].selected ? 'selected="selected"' : '') +'>' + data[id].label + '</option>');
list.append('<option value="' + data[id].id + '" ' + (data[id].selected ? 'selected="selected"' : '') +'>' + (data[id].id !== -1 ? data[id].label.text : 'Auto') + '</option>');
}

//updating value of the custom select gui element
Expand Down
2 changes: 1 addition & 1 deletion _posts/2015-11-10-dynamic-insertion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
</div>
<div class="panel clear">
<div id="PlayBeta" class="button button-icon control-play"><i class="glyphicon icon-play-2"></i>Play</div>
<div id="Pausebeta" class="button button-icon control-pause"><i class="glyphicon icon-pause-2"></i>Pause</div>
<div id="PauseBeta" class="button button-icon control-pause"><i class="glyphicon icon-pause-2"></i>Pause</div>
<div class="pull-right" id="StatusBeta">
<span style="display: none;" class="st-live label status">LIVE</span>
<span style="display: none;" class="st-offline status label">OFFLINE</span>
Expand Down
4 changes: 2 additions & 2 deletions _posts/2017-01-17-player-custom-ui.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ <h3>Custom UI example</h3>
</style>

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

Expand Down Expand Up @@ -237,7 +237,7 @@ <h5>Custom UI pieces:</h5>
<section class="code">
<h4>HTML</h4>
<pre><code class="xml">&lt;div class="player-container"&gt;
&lt;iframe id="UstreamPlayer" src="//www.ustream.tv/embed/12762028?html5ui" frameborder="0" allow="autoplay" allowfullscreen webkitallowfullscreen scrolling="no"&gt;&lt;/iframe&gt;
&lt;iframe id="UstreamPlayer" src="//www.ustream.tv/embed/recorded/124808555?html5ui" frameborder="0" allow="autoplay" allowfullscreen webkitallowfullscreen scrolling="no"&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;div class="custom-ui-container"&gt;
Expand Down