Version: 11.13.0

Debug display

Tip: open your browser's developer console and use the player and THEOplayer variables to interact with this demo.

The debug display is an overlay panel in Open Video UI that shows playback diagnostics, such as the current source, the playing quality, buffer health and live latency. Start playback and click the debug button in the control bar to show or hide it.

The debug display is a separate entry point of @theoplayer/web-ui, available from version 2.6.0 and only as an ES module. Import it next to the main Open Video UI module:

import '@theoplayer/web-ui';
import '@theoplayer/web-ui/debug';

Then place a <theoplayer-debug-display> in the overlay slot, and optionally a <theoplayer-debug-button> in the control bar to toggle it. Leave out the hidden attribute to show the panel from the start.

<theoplayer-default-ui configuration="..." source="...">
  <theoplayer-debug-display slot="overlay" hidden></theoplayer-debug-display>
  <theoplayer-debug-button slot="bottom-control-bar"></theoplayer-debug-button>
</theoplayer-default-ui>

This example loads the packages from a CDN with an import map. In your application, install @theoplayer/web-ui from npm and bundle it instead.

Code

demo.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Debug display</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }

      theoplayer-default-ui:not(:defined) {
        display: inline-block;
        box-sizing: border-box;
      }

      theoplayer-default-ui {
        width: 100%;
        aspect-ratio: 16 / 9;
        font-family: 'Noto Sans', sans-serif;
        background: #000;
      }
    </style>
    <!--
      The debug display is only available as an ES module, so this example loads Open Video UI as an ES module too.
      The import map tells the browser where to find each package.
      For production use, install the packages from npm and bundle them with your application instead.
    -->
    <script type="importmap">
      {
        "imports": {
          "theoplayer/chromeless": "https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.chromeless.esm.js",
          "@theoplayer/web-ui": "https://ga.jspm.io/npm:@theoplayer/web-ui@2.6.1/dist/THEOplayerUI.mjs",
          "@theoplayer/web-ui/debug": "https://ga.jspm.io/npm:@theoplayer/web-ui@2.6.1/dist/THEOplayerUI.debug.mjs",
          "lit": "https://ga.jspm.io/npm:lit@3.3.1/index.js",
          "lit/decorators.js": "https://ga.jspm.io/npm:lit@3.3.1/decorators.js",
          "lit/directives/": "https://ga.jspm.io/npm:lit@3.3.1/directives/"
        },
        "scopes": {
          "https://ga.jspm.io/": {
            "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.1.1/reactive-element.js",
            "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.1.1/decorators/",
            "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.2.1/lit-element.js",
            "lit-html": "https://ga.jspm.io/npm:lit-html@3.3.1/lit-html.js",
            "lit-html/": "https://ga.jspm.io/npm:lit-html@3.3.1/"
          }
        }
      }
    </script>
    <script type="module">
      import * as THEOplayerUI from '@theoplayer/web-ui';
      import '@theoplayer/web-ui/debug';
      // Expose the UI and the player library for use from the browser's developer console.
      window.THEOplayerUI = THEOplayerUI;
      window.THEOplayer = await import('theoplayer/chromeless');
    </script>
  </head>
  <body>
    <!--
      libraryLocation: For demonstration purposes, we use the THEOplayer CDN.
      For production use, host the library yourself and update this URL and the import map above.

      licenseUrl: Point this to your license file, or replace it with a license property.

      <theoplayer-debug-display> shows the diagnostics in the overlay slot. It starts hidden.
      <theoplayer-debug-button> shows or hides the debug display from the control bar.
    -->
    <theoplayer-default-ui
      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt","mutedAutoplay":"all"}'
      source='{"sources":{"src":"https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8","type":"application/x-mpegurl"},"poster":"https://cdn.theoplayer.com/video/big_buck_bunny/poster.jpg","metadata":{"title":"Big Buck Bunny"}}'
    >
      <theoplayer-debug-display slot="overlay" hidden></theoplayer-debug-display>
      <theoplayer-debug-button slot="bottom-control-bar"></theoplayer-debug-button>
    </theoplayer-default-ui>
    <script src="../utils.js"></script>
  </body>
</html>

Bookmarklet

To inspect an Open Video UI player on any website without changing its code, create a bookmark with the following URL:

javascript:(()=>{const s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/@theoplayer/web-ui@2/dist/THEOplayerUI.debug.bookmarklet.js';document.head.append(s)})()

Click the bookmark on a page with an Open Video UI player to show the debug display, and click it again to hide it. The bookmarklet doesn't work on pages whose Content Security Policy blocks scripts from other origins, or on players inside a cross-origin iframe.

See the debug display guide of Open Video UI for more details.

Bookmarklet​

Bookmarklet