diff --git a/tutorials/offline.html b/tutorials/offline.html new file mode 100644 index 0000000000..0944a78d81 --- /dev/null +++ b/tutorials/offline.html @@ -0,0 +1,183 @@ + + +

+Offline Playback +

+ +

+Shaka Player supports offline playback since v1.3.0. Offline streams are handled +by {@link shaka.player.OfflineVideoSource}. The offline API works similarily to +the other video source APIs, but adds the functionality to store a group, +retrieve a list of all stored groups and to delete a group from storage. +

+ +

+A group refers to one video stream and one audio stream, if present, from +a DASH MPD. Storage of text content is not yet supported. Each group will +have a unique ID, which should be persisted by the application for later +playback. +

+ +

+Storing Content +

+ +

+If you have not familiarized yourself with the the Player, please start +with {@tutorial player}. In order to store content you need to install the +polyfills and initialize the player, but do not need to load the video source. +

+ +

+Here is a simple page which demonstrates basic offline storage: +

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>TurtleTube - Offline</title>
+    <!-- Load the Shaka Player library. -->
+    <script src="shaka-player.compiled.js"></script>
+  </head>
+  <body>
+    <video id="video"
+           width="640" height="480"
+           crossorigin="anonymous"
+           controls>
+      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');
+
+      // Attach the player to the window so that it can be easily debugged.
+      window.player = new shaka.player.Player(video);
+
+      // Listen for errors from the Player.
+      player.addEventListener('error', function(event) {
+        console.error(event);
+      });
+    }
+
+    function chooseTracks(videoSource) {
+      var ids = [];
+
+      var videoTracks = videoSource.getVideoTracks();
+      if (videoTracks.length) {
+        videoTracks.sort(shaka.player.VideoTrack.compare);
+        // Choosing the smallest track.
+        var track = videoTracks[0];
+        ids.push(track.id);
+      }
+
+      var audioTracks = videoSource.getAudioTracks();
+      if (audioTracks.length) {
+        // The video source gives you the preferred language first.
+        // Remove any tracks from other languages first.
+        var lang = audioTracks[0].lang;
+        audioTracks = audioTracks.filter(function(track) {
+          return track.lang == lang;
+        });
+        // From what's left, choose the middle stream.  If we have high, medium,
+        // and low quality audio, this is medium.  If we only have high and low,
+        // this is high.
+        var index = Math.floor(audioTracks.length / 2);
+        ids.push(audioTracks[index].id);
+      }
+
+      // Return IDs of chosen tracks.
+      return Promise.resolve(ids);
+    }
+
+    function storeContent() {
+      if (!window.player) {
+        initPlayer();
+      }
+
+      // Construct an OfflineVideoSource.
+      var estimator = new shaka.util.EWMABandwidthEstimator();
+      var offlineSource = new shaka.player.OfflineVideoSource(
+          null, // groupId, not used when storing content.
+          estimator);
+
+      // Listen for progress events from the OfflineVideoSource.
+      offlineSource.addEventListener('progress', function(event) {
+        // Percentage complete is the detail field of the event.
+        console.log(
+            'Content storage is ' + event.detail.toFixed(2) + '% complete.');
+      });
+
+      // Store content from MPD url.
+      var mpdUrl = 'http://turtle-tube.appspot.com/t/t2/dash.mpd';
+      var preferredLanguage = 'en-US';
+      offlineSource.store(
+          mpdUrl,
+          preferredLanguage,
+          null, // interpretContentProtection, not needed for clear content.
+          chooseTracks.bind(null, offlineSource)
+      ).then(
+          function(groupId) {
+            window.groupId = groupId;
+            console.log('Stored content under group ID ' + window.groupId);
+          }
+      ).catch(
+          function(e) {
+            console.error(e);
+          });
+    }
+
+    document.addEventListener('DOMContentLoaded', storeContent);
+  </script>
+</html>
+
+ +

+Playing Stored Content +

+ +

+TODO +

+ +

+Deleting Stored Content +

+ +

+TODO +

+ +

+Offline Caveats +

+ +

+{@link shaka.player.OfflineVideoSource} can only store encrypted streams on +platforms that support persistent licenses. +

+ +

+Offline playback relies on the {@link http://goo.gl/TFHaXL Indexed Database +API} for storage of content. Indexed Database is currently supported by most +web browsers. +

diff --git a/tutorials/sample7.txt b/tutorials/sample7.txt new file mode 100644 index 0000000000..fbe0b343a2 --- /dev/null +++ b/tutorials/sample7.txt @@ -0,0 +1,103 @@ + + + + + TurtleTube - Offline + + + + + + + +