mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-15 16:06:41 +03:00
Joey Parrish
04d3df3ae8
- Add prereqs section - Add architecture diagrams - Adjust doc margins - Change some wording and fix typos - Convert alert() to console.error() in basic usage tutorial - Expand prose in debugging tutorial - Add comments about asynchronous methods - Expand description of Closure base - Change some links to source rather than API docs - Clarify some vague language - Refactor some of the plugin text Modified jsdoc to add a new 'linksource' tag to link directly to the source code for an entity. Change-Id: I6b879050fc59917ce98954a4fabd8afca60af456
93 lines
2.4 KiB
Markdown
93 lines
2.4 KiB
Markdown
# Basic Usage
|
|
|
|
Basic usage of Shaka Player is very easy:
|
|
|
|
1. Start with {@tutorial welcome} and compile the library.
|
|
2. Create a simple HTML page with a video element.
|
|
3. In your application's JavaScript:
|
|
1. Install Shaka's polyfills.
|
|
2. Check for browser support.
|
|
3. Create a Player object to wrap the video element.
|
|
4. Listen for errors.
|
|
5. Load a manifest.
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Shaka Player compiled library: -->
|
|
<script src="dist/shaka-player.compiled.js"></script>
|
|
<!-- Your application source: -->
|
|
<script src="myapp.js"></script>
|
|
</head>
|
|
<body>
|
|
<video id="video"
|
|
width="640"
|
|
poster="//shaka-player-demo.appspot.com/assets/poster.jpg"
|
|
controls autoplay></video>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
```js
|
|
// myapp.js
|
|
|
|
var manifestUri = '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd';
|
|
|
|
function initApp() {
|
|
// Install built-in polyfills to patch browser incompatibilities.
|
|
shaka.polyfill.installAll();
|
|
|
|
// Check to see if the browser supports the basic APIs Shaka needs.
|
|
// This is an asynchronous check.
|
|
shaka.Player.support().then(function(support) {
|
|
// This executes when the asynchronous check is complete.
|
|
if (support.supported) {
|
|
// Everything looks good!
|
|
initPlayer();
|
|
} else {
|
|
// This browser does not have the minimum set of APIs we need.
|
|
console.error('Browser not supported!');
|
|
}
|
|
});
|
|
}
|
|
|
|
function initPlayer() {
|
|
// Create a Player instance.
|
|
var video = document.getElementById('video');
|
|
var player = new shaka.Player(video);
|
|
|
|
// Attach player to the window to make it easy to access in the JS console.
|
|
window.player = player;
|
|
|
|
// Listen for error events.
|
|
player.addEventListener('error', onErrorEvent);
|
|
|
|
// Try to load a manifest.
|
|
// This is an asynchronous process.
|
|
player.load(manifestUri).then(function() {
|
|
// This runs if the asynchronous load is successful.
|
|
console.log('The video has now been loaded!');
|
|
}).catch(onError); // onError is executed if the asynchronous load fails.
|
|
}
|
|
|
|
function onErrorEvent(event) {
|
|
// Extract the shaka.util.Error object from the event.
|
|
onError(event.detail);
|
|
}
|
|
|
|
function onError(error) {
|
|
// Log the error.
|
|
console.error('Error code', error.code, 'object', error);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initApp);
|
|
```
|
|
|
|
That's it!
|
|
|
|
|
|
#### Continue the Tutorials
|
|
|
|
Next, check out {@tutorial debugging}.
|