viaprog/shaka-player
1
0
Fork 0
mirror of https://github.com/shaka-project/shaka-player.git synced 2026-06-15 16:06:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add dynamic UI reconstruction to the tutorials.

Browse Source 
Change-Id: I915e2f52a597fabd4b81711dcf97a38cf2e3d788
This commit is contained in:
Sandra Lokshina
2019-04-29 14:35:25 -07:00
parent 269b53b7a0
commit aac3657a83
2 changed files with 12 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/tutorials/ui-customization.md
+11 -3
View File
@@ -3,15 +3,22 @@
#### Configuring the layout
When creating the UI via code, you can pass in configuration options that change
Once the UI is created, you can pass in configuration options that change
the look and functioning of the UI bar. For example, if you wanted to not have
a seek bar, you could add the following line to the init() function from the UI
basic usage tutorial, right before creating the UI overlay:
basic usage tutorial, after creating the UI overlay:
```js
uiConfig['addSeekBar'] = false;
const video = document.getElementById('video');
const ui = video['ui'];
const config = {
addSeekBar: false;
};
ui.configure(config);
```
Controls will fire a {@link shaka.Controls.UIUpdatedEvent} event once the config
takes effect.
See the docs for {@link shaka.extern.UIConfiguration} for more information.
#### Customizing the number and order of controls
@@ -60,6 +67,7 @@ The following buttons can be added to the overflow menu:
that support it. Button is invisible on other browsers.
<!-- TODO: If we add more buttons that can be put in the order this way, list them here. -->
UI layout can be reconfigured at any point after it's been created.
Please note that custom layouts might need CSS adjustments to look good.
#### Changing seek bar progress colors
docs/tutorials/ui.md
+1 -87
View File
@@ -9,7 +9,7 @@ declarative style of setup.
Setting up a project with the UI library is even easier than setting one up without.
Option 1: Set up controls with HTML data attributes:
Set up controls with HTML data attributes:
```html
<!DOCTYPE html>
@@ -123,92 +123,6 @@ Next, let's add a listener to the 'caststatuschanged' event in myapp.js:
```
<!-- TODO: Also mention the download button, once we add it. -->
#### Option 2: Setting the UI element programmatically
The most basic way to make an element host the Shaka Player UI is to use the
data-shaka-player tags in the HTML.
However, that approach won't necessarily work for every application. For
instance, if your site lays itself out programmatically, that is not an option.
In addition, when using data-shaka-player tags, advanced customization options
are not available.
For more advanced use, the UI can be assigned to an element in code.
```html
<!DOCTYPE html>
<html>
<head>
<!-- Shaka Player ui compiled library: -->
<script src="dist/shaka-player.ui.js"></script>
<link rel="stylesheet" type="text/css" href="dist/controls.css">
<!-- Google Material Design Icons: -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Your application source: -->
<script src="myapp.js"></script>
</head>
<body>
<div id="videoContainer" style="max-width:40em">
<video autoplay id="video" style="width:100%;height:100%"></video>
</div>
</body>
</html>
```
```js
// myapp.js
var manifestUri =
'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd';
async function init() {
// Create the UI manually.
const video = document.getElementById('video');
const videoContainer = document.getElementById('videoContainer');
const player = new shaka.Player(video);
// Use this to pass in desired config values. Config values not passed in
// will be filled out according to the default config.
// See more info on the configuration in the section below.
const uiConfig = {};
const ui = new shaka.ui.Overlay(player, videoContainer, video, uiConfig);
const controls = ui.getControls();
// Listen for error events.
player.addEventListener('error', onPlayerErrorEvent);
controls.addEventListener('error', onUIErrorEvent);
controls.addEventListener('caststatuschanged', onCastStatusChanged);
// Try to load a manifest.
// This is an asynchronous process.
try {
await player.load(manifestUri);
// This runs if the asynchronous load is successful.
console.log('The video has now been loaded!');
} catch (error) {
onError(error);
}
}
function onPlayerErrorEvent(errorEvent) {
// Extract the shaka.util.Error object from the event.
onPlayerError(event.detail);
}
function onPlayerError(error) {
// Handle player error
}
function onUIErrorEvent(errorEvent) {
// Handle UI error
}
function onCastStatusChanged(event) {
// Handle cast status change
}
// The shaka-ui-loaded event won't fire if there are no tagged UI elements to
// set up, so listen to DOMContentLoaded instead.
document.addEventListener('DOMContentLoaded', init);
```
#### Continue the Tutorials
Next, check out {@tutorial ui-customization}.