Playback speed

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

player.playbackRate	1

This example shows how to change the playback speed of a video with player.playbackRate. A value of 1 plays the video at normal speed, lower values slow it down and higher values speed it up. You can also change the playback speed from the settings menu in the player.

Code

demo.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Playback speed</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>
    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
    <script nomodule src="https://unpkg.com/@theoplayer/web-ui@2/polyfills"></script>
    <script async src="https://unpkg.com/@theoplayer/web-ui@2"></script>
  </head>
  <body>
    <!--
      libraryLocation: For demonstration purposes, we use the theoplayer.com CDN.
      For production use, we recommend hosting THEOplayer yourself
      and changing this (as well as the <script> tags above)
      to point to THEOplayer's location on your own website.

      licenseUrl: Change this to point to your THEOplayer license file.
      Alternatively, replace it with a "license" property whose value is your THEOplayer license itself.
    -->
    <theoplayer-default-ui
      configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","licenseUrl":"../../../../theoplayer-license.txt"}'
      source='{"sources":{"src":"https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8","type":"application/x-mpegurl"},"poster":"https://cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/poster.jpg","metadata":{"title":"Star Wars: The Force Awakens (Comic-Con 2015 reel)"}}'
    ></theoplayer-default-ui>
    <script src="../utils.js"></script>
    <script>
      onPlayerReady((player) => {
        function reportPlaybackRate() {
          sendToParent('ratechange', { playbackRate: player.playbackRate });
        }
        player.addEventListener('ratechange', reportPlaybackRate);

        onParentMessage('playback-rate', ({ playbackRate }) => {
          player.playbackRate = playbackRate;
        });

        reportPlaybackRate();
      });
    </script>
  </body>
</html>