shaka-player 4.6.3 → 4.7.0

package/docs/tutorials/fairplay.md

@@ -1,242 +0,0 @@
-# FairPlay Support
-
-We support FairPlay with EME on compatible environments or native `src=`.
-
-By default Shaka Player supports Modern EME, if your provider doesn't support
-Modern EME yet, you can use legacy Apple Media Keys with:
-```js
-shaka.polyfill.PatchedMediaKeysApple.install();
-```
-
-If you need to use both legacy and Modern EME, for example if you have to support
-multiple DRM providers, it is possible to enable uninstalling the polyfill:
-```js
-shaka.polyfill.PatchedMediaKeysApple.install(/* enableUninstall= */ true);
-shaka.polyfill.PatchedMediaKeysApple.uninstall();
-```
-
-The support in each case would be the following:
-
-|            |Modern EME |legacy Apple Media Keys|
-|:----------:|:---------:|:---------------------:|
-|src= (CMAF) |**Y**      |**Y**                  |
-|src= (TS)   |**Y**      |**Y**                  |
-|MSE (CMAF)  |**Y**      | -                     |
-|MSE (TS)    | -         | -                     |
-
-
-Adding FairPlay support involves a bit more work than other key systems.
-
-
-## Keysystem used in EME
-
-Depending on the EME implementation that is being used, the Fairplay keysystem
-varies.
-
-For Modern EME:
-```
-com.apple.fps
-```
-
-For legacy Apple Media Keys:
-```
-com.apple.fps.1_0
-```
-
-## Server certificate
-
-All FairPlay content requires setting a server certificate. You can either
-provide it directly or set a serverCertificateUri for Shaka to fetch it for
-you.
-
-```js
-const req = await fetch('https://example.com/cert.der');
-const cert = await req.arrayBuffer();
-
-player.configure('drm.advanced.com\\.apple\\.fps.serverCertificate',
-                 new Uint8Array(cert));
-```
-
-```js
-player.configure('drm.advanced.com\\.apple\\.fps.serverCertificateUri',
-                 'https://example.com/cert.der');
-```
-
-## Content ID
-
-Note: Normally only applies to legacy Apple Media Keys but some providers also
-need it in Modern EME.
-
-Some FairPlay content use custom signaling for the content ID.  The content ID
-is used by the browser to generate the license request.  If you don't use the
-default content ID derivation, you need to specify a custom init data transform:
-
-```js
-player.configure('drm.initDataTransform', (initData, initDataType, drmInfo) => {
-  if (initDataType != 'skd')
-    return initData;
-  // 'initData' is a buffer containing an 'skd://' URL as a UTF-8 string.
-  const skdUri = shaka.util.StringUtils.fromBytesAutoDetect(initData);
-  const contentId = getMyContentId(skdUri);
-  const cert = drmInfo.serverCertificate;
-  return shaka.util.FairPlayUtils.initDataTransform(initData, contentId, cert);
-});
-```
-
-## License wrapping
-
-Some FairPlay servers need to accept the license request in a different format
-or give the response in a different format.  For more info, see the general
-{@tutorial license-wrapping} tutorial:
-
-```js
-player.getNetworkingEngine().registerRequestFilter((type, request, context) => {
-  if (type != shaka.net.NetworkingEngine.RequestType.LICENSE) {
-    return;
-  }
-
-  const originalPayload = new Uint8Array(request.body);
-  const base64Payload =
-      shaka.util.Uint8ArrayUtils.toStandardBase64(originalPayload);
-  const params = 'spc=' + base64Payload;
-  request.headers['Content-Type'] = 'application/x-www-form-urlencoded';
-  request.body = shaka.util.StringUtils.toUTF8(encodeURIComponent(params));
-});
-
-player.getNetworkingEngine().registerResponseFilter((type, response, context) => {
-  if (type != shaka.net.NetworkingEngine.RequestType.LICENSE) {
-    return;
-  }
-
-  let responseText = shaka.util.StringUtils.fromUTF8(response.data);
-  // Trim whitespace.
-  responseText = responseText.trim();
-
-  // Look for <ckc> wrapper and remove it.
-  if (responseText.substr(0, 5) === '<ckc>' &&
-      responseText.substr(-6) === '</ckc>') {
-    responseText = responseText.slice(5, -6);
-  }
-
-  // Decode the base64-encoded data into the format the browser expects.
-  response.data = shaka.util.Uint8ArrayUtils.fromBase64(responseText).buffer;
-});
-```
-
-### Integration with some DRMs providers
-
-Note: Some providers support both Modern EME and legacy Apple Media Keys.
-
-#### EZDRM (Modern EME)
-
-For integration with EZDRM the following can be used:
-
-```js
-const FairPlayUtils = shaka.util.FairPlayUtils;
-player.getNetworkingEngine()
-    .registerRequestFilter(FairPlayUtils.ezdrmFairPlayRequest);
-player.getNetworkingEngine()
-    .registerResponseFilter(FairPlayUtils.commonFairPlayResponse);
-```
-
-Note: If the url of the license server has to undergo any transformation
-(eg: add the contentId), you would have to create your filter manually.
-
-```js
-player.getNetworkingEngine().registerRequestFilter((type, request, context) => {
-  if (type != shaka.net.NetworkingEngine.RequestType.LICENSE) {
-    return;
-  }
-  const uri = request.uris[0];
-  const FairPlayUtils = shaka.util.FairPlayUtils;
-  const contentId = FairPlayUtils.defaultGetContentId(request.initData);
-  const newUri = uri.replace('^assetId^', contentId);
-  request.uris = [newUri];
-  request.headers['Content-Type'] = 'application/octet-stream'
-});
-```
-
-#### EZDRM (legacy Apple Media Keys)
-
-For integration with EZDRM the following can be used:
-
-```js
-shaka.polyfill.PatchedMediaKeysApple.install();
-const FairPlayUtils = shaka.util.FairPlayUtils;
-player.getNetworkingEngine()
-    .registerRequestFilter(FairPlayUtils.ezdrmFairPlayRequest);
-player.getNetworkingEngine()
-    .registerResponseFilter(FairPlayUtils.commonFairPlayResponse);
-player.configure('drm.initDataTransform',
-                 FairPlayUtils.ezdrmInitDataTransform);
-```
-
-Note: If the url of the license server has to undergo any transformation
-(eg: add the contentId), you would have to create your filter manually.
-
-```js
-player.getNetworkingEngine().registerRequestFilter((type, request, context) => {
-  if (type != shaka.net.NetworkingEngine.RequestType.LICENSE) {
-    return;
-  }
-  const uri = request.uris[0];
-  const FairPlayUtils = shaka.util.FairPlayUtils;
-  const contentId = FairPlayUtils.defaultGetContentId(request.initData);
-  const newUri = uri.replace('^assetId^', contentId);
-  request.uris = [newUri];
-  request.headers['Content-Type'] = 'application/octet-stream'
-});
-```
-
-#### Verimatrix (legacy Apple Media Keys)
-
-For integration with Verimatrix the following can be used:
-
-```js
-shaka.polyfill.PatchedMediaKeysApple.install();
-const FairPlayUtils = shaka.util.FairPlayUtils;
-player.getNetworkingEngine()
-    .registerRequestFilter(FairPlayUtils.verimatrixFairPlayRequest);
-player.getNetworkingEngine()
-    .registerResponseFilter(FairPlayUtils.commonFairPlayResponse);
-player.configure('drm.initDataTransform',
-                 FairPlayUtils.verimatrixInitDataTransform);
-```
-
-#### Conax (legacy Apple Media Keys)
-
-For integration with Conax the following can be used:
-
-```js
-shaka.polyfill.PatchedMediaKeysApple.install();
-const FairPlayUtils = shaka.util.FairPlayUtils;
-player.getNetworkingEngine()
-    .registerRequestFilter(FairPlayUtils.conaxFairPlayRequest);
-player.getNetworkingEngine()
-    .registerResponseFilter(FairPlayUtils.commonFairPlayResponse);
-player.configure('drm.initDataTransform',
-                 FairPlayUtils.conaxInitDataTransform);
-```
-
-#### ExpressPlay (legacy Apple Media Keys)
-
-For integration with ExpressPlay the following can be used:
-
-```js
-shaka.polyfill.PatchedMediaKeysApple.install();
-const FairPlayUtils = shaka.util.FairPlayUtils;
-player.getNetworkingEngine()
-    .registerRequestFilter(FairPlayUtils.expressplayFairPlayRequest);
-player.getNetworkingEngine()
-    .registerResponseFilter(FairPlayUtils.commonFairPlayResponse);
-player.configure('drm.initDataTransform',
-                 FairPlayUtils.expressplayInitDataTransform);
-```
-
-#### Nagra (legacy Apple Media Keys)
-
-For integration with Nagra the following can be used:
-
-```js
-shaka.polyfill.PatchedMediaKeysApple.install();
-```

package/docs/tutorials/faq.md

@@ -1,252 +0,0 @@
-# Frequently Asked Questions
-
-**Q:** Does Shaka Player support IE11?
-
-**A:** Shaka Player no longer supports IE11 beyond v3.1. If you need Shaka
-Player with IE support, checkout v3.0.x and previous versions.
-
-<hr>
-
-**Q:** My live stream is buffering forever or doesn't play.
-
-**A:** Check your time-sync.  In v1 we would adjust automatically to account for
-bad content.  But now in v2, we don't.
-
-This requires setting up clock sync for live streams.  This can be done by
-adding a `<UTCTiming>` element to the manifest or by setting the
-{@link shaka.extern.html.DashManifestConfiguration|
-`.manifest.dash.clockSyncUri`} configuration. See [#386(comment)][386] 
-for more info.
-
-We also have issues with "drifting" DASH streams.  If your encoder experiences
-drift, you may need to address that with the encoder.  We have plans to be
-more tolerant of drift in future.  See [#999][999] for more info.
-
-<hr>
-
-**Q:** I am getting decoder errors or `VIDEO_ERROR` or error code 3016.
-
-**A:** This error is given to us when the browser can't play the content.  This
-is out of our control and is usually caused by bad content.  On Chrome you can
-check `chrome://media-internals` for more info (see [#489(comment)][489]).
-
-<hr>
-
-**Q:** I am getting `HTTP_ERROR` or error code 1002.
-
-**A:** The browser rejected the request.  Look at the browser logs for more
-info.  This is usually a [CORS][] error, which means you need particular
-headers in the response.  Additionally, with some manifests, we will send a
-`Range` header.  This will require explicit approval through the CORS header
-`Access-Control-Allow-Headers`.
-
-This can also happen with mixed-content restrictions.  If the site is using
-`https:`, then your manifest and segments must also.
-
-<hr>
-
-**Q:** I am getting `REQUESTED_KEY_SYSTEM_CONFIG_UNAVAILABLE` or error code
-6001.
-
-**A:** The most common cause is that you are not using a secure origin.  The
-EME API in the browser requires a secure origin, which means `https` or
-`localhost`.  Chrome enforces this requirement, but other browsers may not yet.
-See the [announcement][eme_https] for more info.
-
-You should also check that your platform/browser actually supports the key
-system.  If your manifest contains only PlayReady, it will need to be played on
-IE/Edge, a Chromecast, or another device with PlayReady.
-See the [DRM tutorial][drm_tutorial] for more info.
-
-This will also happen if you use `Storage` to store protected content (when
-`usePersistentLicense` is true).  Currently, persistent licenses are supported
-on Chromebooks and Chrome 64+ on Mac/Windows.  On other platforms, you can only
-store clear content or store only the content offline (i.e. set
-`usePersistentLicense` configuration to false).
-
-<hr>
-
-**Q:** I am getting `LICENSE_REQUEST_FAILED` or error code 6007.
-
-**A:** See `HTTP_ERROR`.  If you are getting a bad HTTP status, the server
-rejected the request.  Your proxy may require [wrapping][wrapping] the request
-or it may require [extra authentication][auth].
-
-<hr>
-
-**Q:** I am getting `INVALID_SERVER_CERTIFICATE` or error code 6004.
-
-**A:** You need to get the license certificate from your DRM provider.  This is
-**not** the HTTPS certificate of the proxy or any files on your proxy.  This
-should be the certificate of the license server given by your provider.
-
-The certificate can only be used for that license server, but can be used with
-different proxies so long as they use the same license server.  For Widevine,
-the certificate should be binary, so avoid fetching the response as a string
-(e.g. with `responseText`).
-
-<hr>
-
-**Q:** I am getting `LICENSE_RESPONSE_REJECTED` or error code 6008.
-
-**A:** Check the DevTools network tab for the response.  Verify that the
-response data looks correct.  For Widevine, the response should be binary.  If
-you see JSON, you will need to [unwrap the response][wrapping].
-
-<hr>
-
-**Q:** Why does it take so long to switch to HD?
-
-**A:** When Shaka Player's `AbrManager` makes a decision to adapt, we don't
-clear any of the content that has already been buffered.  (We used to, but it
-does not work consistently across browsers and created a bad experience.)
-
-This means that if you want to see the results of a new decision sooner, you
-should have a less aggressive buffering goal.  See the tutorial on [buffering
-configuration][buffering] and the docs for the {@link 
-shaka.extern.StreamingConfiguration|`.streaming.bufferingGoal`} configuration.
-
-Another factor is the segment size.  It may take up to 2 segments before Shaka
-Player has enough information to form a bandwidth estimate and make a decision.
-If your content uses 10-second segments, this means we may buffer 20 seconds
-of low quality video before we make a decision.  If it is too late to change
-the segment size in your content library, you may want to adjust the "default"
-bandwidth estimate used by Shaka Player to select the first segments.  Use the
-{@link shaka.extern.AbrConfiguration|`.abr.defaultBandwidthEstimate`} 
-configuration to control these initial decisions.
-
-<hr>
-
-**Q:** I am getting `UNSUPPORTED_SCHEME` or error code 1000 when loading from
-`file://`.
-
-**A:** In a browser environment, trying to load a file from `file://` is
-inappropriate. Therefore, we do not provide a default network plugin for such
-requests.
-
-In other environments, for example Electron, it is appropriate.
-In those cases, before Shaka Player loads a manifest, you can register the
-existing http plugin for `file://` requests:
-```js
-shaka.net.NetworkingEngine.registerScheme('file', shaka.net.HttpXHRPlugin.parse);
-```
-
-<hr>
-
-**Q:** Why do I get 404 errors with very large timescales?
-
-**A:** Some content creates timestamps too large to be represented as Numbers
-in JavaScript (2^53).  Very large timescales require very large timestamps (in
-timescale units), which means we are unable to substitute the correct values
-for `$Time$` in a `<SegmentTemplate>`.
-
-We can work around this for platforms that support [`BigInt`][], or in cases
-where we can live with a rounding error (not `$Time$` in `<SegmentTemplate>`).
-
-If you must use `$Time` in `<SegmentTemplate>` and you must play on devices
-that do not support [`BigInt`][], we recommend reducing your timescale.
-See discussion in [#1667][1667] for details.
-
-<hr>
-
-**Q:** I get logs like: `It is recommended that a robustness level be
-specified...`.
-
-**A:** This is a warning from Chrome about setting the robustness level for EME.
-For most content, this warning can be safely ignored (see
-<https://crbug.com/720013>).  If your content requires a specific robustness
-level, it is suggested to set it in the player configuration to ensure playback
-works: `.drm.advanced.<key_system>.audioRobustness` and
-`.drm.advanced.<key_system>.videoRobustness` (see {@link 
-shaka.extern.AdvancedDrmConfiguration|docs}).
-
-<hr>
-
-**Q:** Does Shaka Player support iOS?
-
-**A:** Starting in v2.5, we support it through Apple's native HLS player.  So
-you can use the same top-level APIs; but we are dependent on the browser
-handling the streaming.  So we won't support DASH on iOS since the browser
-doesn't support it.
-
-In a future version, we plan to support `ManagedMediaSource` on iOS to achieve
-control over both DASH and HLS playback on iOS.  See [#5271][] and the
-[`ManagedMediaSource` W3C spec proposal][]
-
-<hr>
-
-**Q:** The Nightly Demo isn't loading for me!
-
-**A:** Are you looking at the uncompiled build with an AdBlocker enabled?
-
-Some ad blockers decide to block requests for some of our source files simply
-because they have `ad` in the file name. This only affects the uncompiled
-build.
-
-Switch to the compiled build (add "build=compiled" to the url) or temporarily
-disable your ad blocker to see the nightly in uncompiled mode.
-
-Please note that if you want to test our ad logic, you might have to disable
-the ad blocker in compiled mode as well.
-
-<hr>
-
-**Q:** Why does some DASH content take a long time to start playback?
-
-**A:** Shaka Player honors the `minBufferTime` field in DASH.  If this field is
-set to a large value, Shaka Player will buffer that much content before
-beginning playback.  To override this behavior and ignore the `minBufferTime`
-field, we offer the following configuration:
-
-```js
-player.configure('manifest.dash.ignoreMinBufferTime', true);
-```
-
-<hr>
-
-**Q:** My HLS stream is failing on Chrome, with a chunk demuxer append failed
-error.
-
-**A:** For a stream to play properly on some browsers, we need to know ahead of
-time what the codecs of the stream are.  If no codec information is provided in
-an HLS manifest, we do our best to guess what the codecs might be, but those
-guesses might not always be accurate.  If an HLS manifest has no codec
-information provided, we default to guessing that the video codec is
-`avc1.42E01E` and the audio codec is `mp4a.40.2`, which can cause problems if
-the stream is actually video-only or audio-only.
-
-To change our default assumptions about codecs in HLS, please see
-{@link shaka.extern.HlsManifestConfiguration|`.manifest.hls`} in the player
-config.
-
-<hr>
-
-**Q:** How can I make Shaka Player work with Vue?
-
-**A:** Currently, Shaka Player does not support being made into a Vue reactive
-object. When Vue wraps an object in a reactive Proxy, it
-{@link https://v3.vuejs.org/guide/reactivity.html#proxied-objects|also wraps
-nested objects}. This results in Vue converting some of our internal values into
-Proxy objects, which causes failures at load-time.
-If you want to use Shaka Player in Vue, avoid making it into a reactive object;
-so don't declare it using a ref(), and if you put your player instance into a
-data() object, you can prefix the property name with "$" or "_" to make Vue not
-proxy them.
-
-[386]: https://github.com/shaka-project/shaka-player/issues/386#issuecomment-227898001
-[489]: https://github.com/shaka-project/shaka-player/issues/489#issuecomment-240466224
-[743]: https://github.com/shaka-project/shaka-player/issues/743
-[887]: https://github.com/shaka-project/shaka-player/issues/887
-[999]: https://github.com/shaka-project/shaka-player/issues/999
-[1667]: https://github.com/shaka-project/shaka-player/issues/1667
-[#5271]: https://github.com/shaka-project/shaka-player/issues/5271
-[BigInt]: https://caniuse.com/bigint
-[CORS]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
-[`ManagedMediaSource` W3C spec proposal]: https://github.com/w3c/media-source/issues/320
-[Shaka Player Embedded]: https://github.com/shaka-project/shaka-player-embedded
-[auth]: https://shaka-player-demo.appspot.com/docs/api/tutorial-license-server-auth.html
-[buffering]: https://shaka-player-demo.appspot.com/docs/api/tutorial-network-and-buffering-config.html
-[drm_tutorial]: https://shaka-player-demo.appspot.com/docs/api/tutorial-drm-config.html
-[eme_https]: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins
-[wrapping]: https://shaka-player-demo.appspot.com/docs/api/tutorial-license-wrapping.html
-[including mux.js]: https://github.com/shaka-project/shaka-player/blob/967f3399/demo/index.html#L39

package/docs/tutorials/index.json

@@ -1,29 +0,0 @@
-[
-  { "welcome": { "title": "Welcome to Shaka Player" } },
-  { "basic-usage": { "title": "Basic Usage" } },
-  { "debugging": { "title": "Debugging" } },
-  { "config": { "title": "Configuration" } },
-  { "network-and-buffering-config": { "title": "Network and Buffering Configuration" } },
-  { "drm-config": { "title": "DRM Configuration" } },
-  { "license-server-auth": { "title": "License Server Authentication" } },
-  { "license-wrapping": { "title": "License Wrapping" } },
-  { "ui": { "title": "UI Library" } },
-  { "ui-customization": { "title": "Configuring the UI" } },
-  { "errors": { "title": "Error Handling" } },
-  { "a11y": { "title": "Creating accessible buttons" } },
-  { "ad_monetization": { "title": "Serving ads with our IMA SDK integration" } },
-  { "plugins": { "title": "Plugins and Customizing the Build" } },
-  { "manifest-parser": { "title": "Manifest Parser Plugins" } },
-  { "architecture": { "title": "Architecture Diagrams" } },
-  { "service-worker": { "title": "Service Worker Caching" } },
-  { "offline": { "title": "Offline Storage and Playback" } },
-  { "widevine-service-certs": { "title": "Widevine Service Certificates" } },
-  { "fairplay": { "title": "FairPlay support" } },
-  { "application-level-redirects": { "title": "Application-Level Redirects" } },
-  { "blob-url": { "title": "Blob URL" } },
-  { "selenium-grid-config": { "title": "Selenium Grid Config" } },
-  { "faq": { "title": "Frequently Asked Questions" } },
-  { "upgrade": { "title": "Upgrade Guide" } },
-  { "upgrade-manifest": { "title": "ManifestParser Upgrade Guide" } },
-  { "lcevc": { "title": "LCEVC Quick Start" } }
-]

package/docs/tutorials/lcevc.md

@@ -1,118 +0,0 @@
-# LCEVC Quick Start 
- 
-#### Requirements 
- 
- - Only supported on browsers with Media Source Extensions SourceBuffer support 
- 
- - MPEG-5 Part2 LCEVC decoding support (decoding provided by [lcevc_dec.js][], 
- must be separately included) 
- 
-##### Integration documentation : [docs](../design/lcevc-integration.md) 
- 
-##### More on [MPEG-5 Part2 LCEVC][] 
- 
-[lcevc_dec.js]: https://www.npmjs.com/package/lcevc_dec.js?activeTab=readme
-[MPEG-5 Part2 LCEVC]: https://www.lcevc.org 
- 
-#### Configure LCEVC 
- 
-LCEVC Decoder library needs to be included in the HTML page: 
- 
-- Local `npm install lcevc_dec.js` 
-```html 
-<script src="../node_modules/lcevc_dec.js/dist/lcevc_dec.min.js"></script> 
-``` 
-- Or use `unpkg.com` for latest LCEVC Decoder libraries.
-```html 
-<script src="https://unpkg.com/lcevc_dec.js@1.0.1/dist/lcevc_dec.min.js"></script>
-``` 
- 
-Configuration to enable LCEVC enhancement: 
-```js 
-player.configure('lcevc.enabled', true); 
-``` 
- 
-#### LCEVC setup via UI library 
- 
-Sample setup using the Shaka Player UI library:  
- 
-```html 
-<!DOCTYPE html> 
-<html> 
-  <head> 
-    <!-- Shaka Player UI compiled library and default CSS for player controls: --> 
-    <script src="dist/shaka-player.ui.js"></script> 
-    <link rel="stylesheet" href="dist/controls.css" /> 
- 
-    <!-- LCEVC decoder compiled library --> 
-    <script src="https://unpkg.com/lcevc_dec.js@1.0.1/dist/lcevc_dec.min.js"></script>
- 
-    <!-- Application source: --> 
-    <script src="app.js"></script> 
-  </head> 
- 
-  <body> 
-    <!-- The data-shaka-player-container tag will make the UI library place the controls in this div. --> 
-    <div data-shaka-player-container style="max-width:40em"> 
-      <!-- The data-shaka-player tag will make the UI library use this video element. --> 
-      <video data-shaka-player id="video" style="width:100%;height:100%"></video> 
-    </div> 
-  </body> 
-</html> 
-``` 
- 
-```js 
-// app.js 
- 
-const manifestUri = 'https://dyctis843rxh5.cloudfront.net/vnIAZIaowG1K7qOt/master.m3u8'; 
- 
-// Initialise Shaka Player with LCEVC enhancement. 
-async function init() { 
-  // When using the UI, the player is made automatically by the UI object. 
-  const video = document.getElementById('video'); 
-  const ui = video['ui']; 
-  const controls = ui.getControls(); 
-  const player = controls.getPlayer(); 
- 
-  // Enable the LCEVC enhancement. 
-  player.configure('lcevc.enabled', true); 
- 
-  // Listen for error events. 
-  player.addEventListener('error', onError); 
-  controls.addEventListener('error', onError); 
- 
-  // 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); 
-  } 
-} 
- 
-// Handle errors. 
-function onError(error) { 
-  console.error('Error', error); 
-} 
- 
-// Listen to the custom shaka-ui-loaded event, to wait until the UI is loaded. 
-document.addEventListener('shaka-ui-loaded', init); 
-// Listen to the custom shaka-ui-load-failed event, in case Shaka Player fails 
-// to load (e.g. due to lack of browser support). 
-document.addEventListener('shaka-ui-load-failed', onError); 
- 
-``` 
- 
-#### User provided canvas 
- 
-User can also provide a canvas to the player though `attachCanvas` function: 
- 
-```js 
-player.attachCanvas(canvas); 
-``` 
- 
-Note: If external canvas is used, user is responsible for managing 
-the canvas. If no canvas is provided for Shaka UI library, the player 
-will generate and manage the canvas.