tutorials/sample3.txt

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TurtleTube - Async Load</title>
    <!-- Load the Shaka Player library. -->
    <script src="shaka-player.compiled.js"></script>
  </head>
  <body>
    <ul id="videoTracks"></ul>
    <video id="video"
           width="640" height="480"
           crossorigin="anonymous"
           controls><!-- No autoplay attribute. -->
      Your browser does not support HTML5 video.
    </video>
  </body>
  <script>
    function initPlayer() {
      // Install polyfills.
      shaka.polyfill.installAll();

      // Find the video element.
      var video = document.getElementById('video');

      // Construct a Player to wrap around it.
      var player = new shaka.player.Player(video);

      // Attach the player to the window so that it can be easily debugged.
      window.player = player;

      // Listen for errors from the Player.
      player.addEventListener('error', function(event) {
        console.error(event);
      });

      // Construct a DashVideoSource to represent the DASH manifest.
      var mpdUrl = 'http://turtle-tube.appspot.com/t/t2/dash.mpd';
      var estimator = new shaka.util.EWMABandwidthEstimator();
      var source = new shaka.player.DashVideoSource(mpdUrl, null, estimator);

      // Load the source into the Player.
      // Then query the video tracks to display in the videoTracks list element.
      // Resize the video element to match the aspect ratio of the active track.
      // Finally, begin playback.
      player.load(source).then(function() {
        var videoTracks = player.getVideoTracks();
        var activeTrack;

        // Add track info to the DOM.
        var ul = document.getElementById('videoTracks');
        for (var i = 0; i < videoTracks.length; ++i) {
          var track = videoTracks[i];
          if (track.active) activeTrack = track;

          var text = track.width + ' x ' + track.height;
          text += ' ' + (track.bandwidth / 1024).toFixed(0) + ' kbits/s';

          var li = document.createElement('li');
          li.textContent = text;
          ul.appendChild(li);
        }

        // Correct aspect ratio.
        if (activeTrack) {
          var aspectRatio = activeTrack.width / activeTrack.height;
          video.width = video.height * aspectRatio;
        } else {
          console.error('Unable to query aspect ratio!');
        }

        // Begin playback, since autoplay is not enabled on the video tag.
        video.play();
      });
    }
    document.addEventListener('DOMContentLoaded', initPlayer);
  </script>
</html>