fix(hls): Support playing media playlists directly

Closes shaka-project#3536

demo/common/asset.js

@@ -77,6 +77,8 @@ const ShakaDemoAssetInfo = class {
     this.imaContentSrcId = null;
     /** @type {?string} */
     this.mimeType = null;
+    /** @type {?string} */
+    this.mediaPlaylistFullMimeType = null;
 
 
     // Offline storage values.
@@ -161,6 +163,15 @@ const ShakaDemoAssetInfo = class {
     return this.drm.length == 1 && this.drm[0] == shakaAssets.KeySystem.CLEAR;
   }
 
+  /**
+   * @param {string} mediaPlaylistFullMimeType
+   * @return {!ShakaDemoAssetInfo}
+   */
+  setMediaPlaylistFullMimeType(mediaPlaylistFullMimeType) {
+    this.mediaPlaylistFullMimeType = mediaPlaylistFullMimeType;
+    return this;
+  }
+
   /**
    * @param {!Object} extraConfig
    * @return {!ShakaDemoAssetInfo}
@@ -368,14 +379,19 @@ const ShakaDemoAssetInfo = class {
    */
   getConfiguration() {
     const config = /** @type {shaka.extern.PlayerConfiguration} */(
-      {drm: {advanced: {}}, manifest: {dash: {}}});
+      {drm: {advanced: {}}, manifest: {dash: {}, hls: {}}});
 
     if (this.extraConfig) {
       for (const key in this.extraConfig) {
         config[key] = this.extraConfig[key];
       }
     }
 
+    if (this.mediaPlaylistFullMimeType) {
+      config.manifest.hls.mediaPlaylistFullMimeType =
+          this.mediaPlaylistFullMimeType;
+    }
+
     if (this.licenseServers.size) {
       config.drm.servers = config.drm.servers || {};
       this.licenseServers.forEach((value, key) => {

demo/common/assets.js

@@ -294,6 +294,15 @@ shakaAssets.testAssets = [
       .addFeature(shakaAssets.Feature.SUBTITLES)
       .addFeature(shakaAssets.Feature.SURROUND)
       .addFeature(shakaAssets.Feature.OFFLINE),
+  new ShakaDemoAssetInfo(
+      /* name= */ 'Angel One (HLS, MP4, video media playlist only)',
+      /* iconUri= */ 'https://storage.googleapis.com/shaka-asset-icons/angel_one.png',
+      /* manifestUri= */ 'https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/playlist_v-0480p-1000k-libx264.mp4.m3u8',
+      /* source= */ shakaAssets.Source.SHAKA)
+      .addFeature(shakaAssets.Feature.HLS)
+      .addFeature(shakaAssets.Feature.MP4)
+      .addFeature(shakaAssets.Feature.OFFLINE)
+      .setMediaPlaylistFullMimeType('video/mp4; codecs="avc1.4d401f"'),
   new ShakaDemoAssetInfo(
       /* name= */ 'Angel One (HLS, MP4, multilingual, Widevine)',
       /* iconUri= */ 'https://storage.googleapis.com/shaka-asset-icons/angel_one.png',

demo/common/message_ids.js

@@ -107,6 +107,7 @@ shakaDemo.MessageIds = {
   DRM_SYSTEM: 'DEMO_DRM_SYSTEM',
   DRM_TAB: 'DEMO_DRM_TAB',
   EDIT_CUSTOM: 'DEMO_EDIT_CUSTOM',
+  FULL_MIME_TYPE: 'DEMO_FULL_MIME_TYPE',
   HEADERS_TAB: 'DEMO_HEADERS_TAB',
   ICON_URL: 'DEMO_ICON_URL',
   LICENSE_CERTIFICATE_URL: 'DEMO_LICENSE_CERTIFICATE_URL',
@@ -117,6 +118,7 @@ shakaDemo.MessageIds = {
   MAIN_TAB: 'DEMO_MAIN_TAB',
   MANIFEST_URL: 'DEMO_MANIFEST_URL',
   MANIFEST_URL_ERROR: 'DEMO_MANIFEST_URL_ERROR',
+  MEDIA_PLAYLIST_TAB: 'DEMO_MEDIA_PLAYLIST_TAB',
   NAME: 'DEMO_NAME',
   NAME_ERROR: 'DEMO_NAME_ERROR',
   EXTRA_SHAKA_PLAYER_CONFIG: 'DEMO_EXTRA_SHAKA_PLAYER_CONFIG',

demo/custom.js

@@ -245,6 +245,38 @@ shakaDemo.Custom = class {
   }
 
 
+  /**
+   * @param {!ShakaDemoAssetInfo} assetInProgress
+   * @param {!Array.<!HTMLInputElement>} inputsToCheck
+   * @return {!Element} div
+   * @private
+   */
+  makeAssetDialogContentsMediaPlaylist_(assetInProgress, inputsToCheck) {
+    const mediaPlaylistDiv = document.createElement('div');
+    const containerStyle = shakaDemo.InputContainer.Style.FLEX;
+    const container = new shakaDemo.InputContainer(
+        mediaPlaylistDiv, /* headerText= */ null, containerStyle,
+        /* docLink= */ null);
+    container.getClassList().add('wide-input');
+    container.setDefaultRowClass('wide-input');
+
+    const fullMimeTypeSetup = (input, container) => {
+      if (assetInProgress.mediaPlaylistFullMimeType) {
+        input.value = assetInProgress.mediaPlaylistFullMimeType;
+      }
+    };
+    const fullMimeTypeOnChange = (input) => {
+      assetInProgress.setMediaPlaylistFullMimeType(input.value);
+    };
+    const fullMimeTypeName = shakaDemoMain.getLocalizedString(
+        shakaDemo.MessageIds.FULL_MIME_TYPE);
+    this.makeField_(
+        container, fullMimeTypeName, fullMimeTypeSetup, fullMimeTypeOnChange);
+
+    return mediaPlaylistDiv;
+  }
+
+
   /**
    * @param {!ShakaDemoAssetInfo} assetInProgress
    * @param {!Array.<!HTMLInputElement>} inputsToCheck
@@ -674,6 +706,8 @@ shakaDemo.Custom = class {
         assetInProgress, inputsToCheck);
     const adsDiv = this.makeAssetDialogContentsAds_(
         assetInProgress, inputsToCheck);
+    const mediaPlaylistDiv = this.makeAssetDialogContentsMediaPlaylist_(
+        assetInProgress, inputsToCheck);
     const extraConfigDiv = this.makeAssetDialogContentsExtra_(
         assetInProgress, inputsToCheck);
     const finishDiv = this.makeAssetDialogContentsFinish_(
@@ -713,6 +747,9 @@ shakaDemo.Custom = class {
         shakaDemo.MessageIds.HEADERS_TAB, headersDiv, /* startOn= */ false);
     addTabButton(
         shakaDemo.MessageIds.ADS_TAB, adsDiv, /* startOn= */ false);
+    addTabButton(
+        shakaDemo.MessageIds.MEDIA_PLAYLIST_TAB, mediaPlaylistDiv,
+        /* startOn= */ false);
     addTabButton(
         shakaDemo.MessageIds.EXTRA_TAB, extraConfigDiv, /* startOn= */ false);
 
@@ -722,6 +759,7 @@ shakaDemo.Custom = class {
     this.dialog_.appendChild(drmDiv);
     this.dialog_.appendChild(headersDiv);
     this.dialog_.appendChild(adsDiv);
+    this.dialog_.appendChild(mediaPlaylistDiv);
     this.dialog_.appendChild(extraConfigDiv);
     this.dialog_.appendChild(finishDiv);
     this.dialog_.appendChild(iconDiv);

demo/locales/en.json

@@ -138,6 +138,7 @@
   "DEMO_MAX_PIXELS": "Max Pixels",
   "DEMO_MAX_SMALL_GAP_SIZE": "Maximum Small Gap Size",
   "DEMO_MAX_WIDTH": "Max Width",
+  "DEMO_MEDIA_PLAYLIST_TAB": "HLS Media Playlist",
   "DEMO_METACDN": "MetaCDN",
   "DEMO_MICROSOFT": "Microsoft",
   "DEMO_MIME_TYPE": "MIME Type",
@@ -166,6 +167,7 @@
   "DEMO_OFFLINE_SECTION_HEADER": "Offline",
   "DEMO_FAILURE_MISC": "Shaka Player failed to load! If you are using an ad blocker, try switching to compiled mode at the bottom of the page.",
   "DEMO_FAILURE_NO_BROWSER_SUPPORT": "Your browser is not supported!",
+  "DEMO_FULL_MIME_TYPE": "Full Mime Type",
   "DEMO_PLAY": "Play",
   "DEMO_PLAYREADY": "PlayReady DRM",
   "DEMO_PREFER_FORCED_SUBS": "Prefer Forced Subs",

demo/locales/source.json

@@ -555,6 +555,10 @@
     "description": "The name of a configuration value.",
     "message": "Max Width"
   },
+  "DEMO_MEDIA_PLAYLIST_TAB": {
+    "description": "The header for a tab within the custom asset creation dialog.",
+    "message": "HLS Media Playlist"
+  },
   "DEMO_METACDN": {
     "description": "Text that describes an asset that comes from the MetaCDN asset library.",
     "message": "[PROPER_NAME:MetaCDN]"
@@ -667,6 +671,10 @@
     "description": "An error displayed if Shaka Player is unable to load due to lack of browser support.",
     "message": "Your browser is not supported!"
   },
+  "DEMO_FULL_MIME_TYPE": {
+    "description": "The label on a field that allows users to provide a full mime type for a custom asset.",
+    "message": "Full Mime Type"
+  },
   "DEMO_PLAY": {
     "description": "A button to play the attached asset.",
     "message": "Play"

externs/shaka/player.js

@@ -748,7 +748,8 @@ shaka.extern.DashManifestConfiguration;
  *   ignoreImageStreamFailures: boolean,
  *   defaultAudioCodec: string,
  *   defaultVideoCodec: string,
- *   ignoreManifestProgramDateTime: boolean
+ *   ignoreManifestProgramDateTime: boolean,
+ *   mediaPlaylistFullMimeType: string
  * }}
  *
  * @property {boolean} ignoreTextStreamFailures
@@ -768,6 +769,13 @@ shaka.extern.DashManifestConfiguration;
  *   <code>EXT-X-PROGRAM-DATE-TIME</code> tags in the manifest.
  *   Meant for tags that are incorrect or malformed.
  *   <i>Defaults to <code>false</code>.</i>
+ * @property {string} mediaPlaylistFullMimeType
+ *   A string containing a full mime type, including both the basic mime type
+ *   and also the codecs. Used when the HLS parser parses a media playlist
+ *   directly.
+ *   You can use the <code>shaka.util.MimeUtils.getFullType()</code> utility to
+ *   format this value.
+ *   <i>Defaults to <code>'video/mp4; codecs="avc1.42E01E"'</code>.</i>
  * @exportDoc
  */
 shaka.extern.HlsManifestConfiguration;