mirror of
https://github.com/shaka-project/shaka-player.git
synced 2026-06-15 16:06:41 +03:00
Joey Parrish
66abf9cb27
According to @beaufortfrancois, we should no longer be using protocol- relative URIs. He quotes this passage from Paul Irish: > Now that SSL is encouraged for everyone and doesn’t have performance > concerns, this technique is now an anti-pattern. If the asset you > need is available on SSL, then always use the https:// asset. > Allowing the snippet to request over HTTP opens the door for attacks > like the recent Github Man-on-the-side attack. It’s always safe to > request HTTPS assets even if your site is on HTTP, however the > reverse is not true. Source: https://www.paulirish.com/2010/the-protocol-relative-url/ This change was begun with the following command: git grep -l "'//" | xargs sed -i "s@'//@'https://@g" Some changes made by that command were false-positives, which I then reverted manually. Others required additional cleanup to meet style rules. I've also just discovered that the "max-len" rule in eslint's Google style config exempts URIs, so there's no need to disable the max-len rule on URIs in the assets list. These have been removed in the asset list where unnecessary. Finally, testing these updated URIs led to the discovery that two of our third-party demo assets are no longer available. One URI needed to be updated. The other had no obvious replacement, so it was removed. Closes #1390 Change-Id: I2fe23faec04f1904c1741236b364d5089900092a
90 lines
2.3 KiB
Markdown
90 lines
2.3 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 =
|
|
'https://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.
|
|
if (shaka.Player.isBrowserSupported()) {
|
|
// 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}.
|