@videojs/http-streaming - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

docs/supported-features.md

@@ -67,2 +67,3 @@ # Supported Features
 * [AES-128] segment encryption
+* DASH In-manifest EventStream and Event tags are automatically translated into HTML5 metadata cues
 
@@ -69,0 +70,0 @@ ## Notable Missing Features

package.json

 {
   "name": "@videojs/http-streaming",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Play back HLS and DASH with Video.js, even where it's not natively supported",
@@ -65,3 +65,3 @@ "main": "dist/videojs-http-streaming.cjs.js",
     "m3u8-parser": "^6.0.0",
-    "mpd-parser": "^1.0.1",
+    "mpd-parser": "^1.1.1",
     "mux.js": "6.3.0",
@@ -74,2 +74,4 @@ "video.js": "^7 || ^8"
   "devDependencies": {
+    "@babel/cli": "^7.21.0",
+    "@popperjs/core": "^2.11.7",
     "@rollup/plugin-replace": "^2.3.4",
@@ -91,3 +93,3 @@ "@rollup/plugin-strip": "^2.0.1",
     "videojs-contrib-eme": "^5.0.1",
-    "videojs-contrib-quality-levels": "^2.0.4",
+    "videojs-contrib-quality-levels": "^4.0.0",
     "videojs-generate-karma-config": "^8.0.1",
@@ -94,0 +96,0 @@ "videojs-generate-rollup-config": "^7.0.0",

README.md

@@ -12,3 +12,3 @@ <img width=300 src="./logo.svg" alt="VHS Logo consisting of a VHS tape, the Video.js logo and the words VHS" />
 
-Included in video.js 7 by default! See the [video.js 7 blog post](https://blog.videojs.com/video-js-7-is-here/)
+**Included in video.js 7 by default!** See the [video.js 7 blog post](https://blog.videojs.com/video-js-7-is-here/)
 
@@ -61,2 +61,3 @@ Maintenance Status: Stable
       - [useDtsForTimestampOffset](#usedtsfortimestampoffset)
+      - [useForcedSubtitles](#useforcedsubtitles)
       - [captionServices](#captionservices)
@@ -99,4 +100,9 @@ - [Format](#format)
 ## Installation
+
+In most cases **it is not necessary to separately install http-streaming**, as it has been included in the default build of Video.js since version 7.
+
+Only install if you need a specifc combination of video.js and http-streaming versions. If installing separately, use the "core" version of Video.js without the bundled version of http-streaming. 
+
 ### NPM
-To install `videojs-http-streaming` with npm run
+To install `videojs-http-streaming` with npm, run
 
@@ -123,8 +129,9 @@ ```bash
 ## Talk to us
-Drop by our slack channel (#playback) on the [Video.js slack][slack-link].
+Drop by the [Video.js slack][slack-link].
 
 ## Getting Started
-This library is included in video.js 7 by default, if you are using an older version of video.js then
-get a copy of [videojs-http-streaming](#installation) and include it in your page along with video.js:
+This library is included in Video.js 7 by default.
 
+**Only if need a specific combination of versions of Video.js and VHS** you can get a copy of [videojs-http-streaming](#installation) and include it in your page along with video.js. In this case, you should use the "core" build of Video.js, without a bundled VHS:
+
 ```html
@@ -136,3 +143,4 @@ <video-js id=vid1 width=600 height=300 class="vjs-default-skin" controls>
 </video-js>
-<script src="video.js"></script>
+<!-- "core" version of Video.js -->
+<script src="video.core.min.js"></script>
 <script src="videojs-http-streaming.min.js"></script>
@@ -145,4 +153,2 @@ <script>
 
-Check out our [live example](https://jsbin.com/gejugat/edit?html,output) if you're having trouble.
-
 Is it recommended to use the `<video-js>` element or load a source with `player.src(sourceObject)` in order to prevent the video element from playing the source natively where HLS is supported.
@@ -160,3 +166,3 @@
 
-These browsers have some level of native HLS support, which will be used unless the [overrideNative](#overridenative) option is used:
+These browsers have some level of native HLS support, however by default the [overrideNative](#overridenative) option is set to `true` except on Safari, so MSE playback is used:
 
@@ -172,8 +178,4 @@ - Chrome Android
 
-Mac Safari does have MSE support, but native HLS is recommended 
+Mac and iPad Safari do have MSE support, but native HLS is recommended 
 
-### Flash Support
-This plugin does not support Flash playback. Instead, it is recommended that users use the [videojs-flashls-source-handler](https://github.com/brightcove/videojs-flashls-source-handler) plugin as a fallback option for browsers that don't have a native
-[HLS](https://caniuse.com/#feat=http-live-streaming)/[DASH](https://caniuse.com/#feat=mpeg-dash) player or support for [Media Source Extensions](http://caniuse.com/#feat=mediasource).
-
 ### DRM
@@ -472,2 +474,10 @@
 
+##### useForcedSubtitles
+* Type: `boolean`
+* Default: `false`
+* can be used as a source option
+* can be used as an initialization option
+
+If true, this option allows the player to display forced subtitles. When available, forced subtitles allow to translate foreign language dialogues or images containing foreign language characters.
+
 ##### captionServices
@@ -474,0 +484,0 @@ * Type: `object`

scripts/index.js

@@ -454,3 +454,4 @@ /* global window document */
     'preload',
-    'mirror-source'
+    'mirror-source',
+    'forced-subtitles'
   ].forEach(function(name) {
@@ -507,3 +508,4 @@ stateEls[name] = document.getElementById(name);
       'dts-offset',
-      'exact-manifest-timings'
+      'exact-manifest-timings',
+      'forced-subtitles'
     ].forEach(function(name) {
@@ -590,3 +592,4 @@ stateEls[name].addEventListener('change', function(event) {
               useNetworkInformationApi: getInputValue(stateEls['network-info']),
-              useDtsForTimestampOffset: getInputValue(stateEls['dts-offset'])
+              useDtsForTimestampOffset: getInputValue(stateEls['dts-offset']),
+              useForcedSubtitles: getInputValue(stateEls['forced-subtitles'])
             }
@@ -593,0 +596,0 @@ }

src/dash-playlist-loader.js

@@ -315,2 +315,3 @@ import videojs from 'video.js';
     this.withCredentials = withCredentials;
+    this.addMetadataToTextTrack = options.addMetadataToTextTrack;
 
@@ -777,2 +778,4 @@ if (!srcUrlOrPlaylist) {
 
+    this.addEventStreamToMetadataTrack_(newMain);
+
     return Boolean(newMain);
@@ -906,2 +909,22 @@ }
   }
+
+  /**
+   * Takes eventstream data from a parsed DASH manifest and adds it to the metadata text track.
+   *
+   * @param {manifest} newMain the newly parsed manifest
+   */
+  addEventStreamToMetadataTrack_(newMain) {
+    // Only add new event stream metadata if we have a new manifest.
+    if (newMain && this.mainPlaylistLoader_.main.eventStream) {
+      // convert EventStream to ID3-like data.
+      const metadataArray = this.mainPlaylistLoader_.main.eventStream.map((eventStreamNode) => {
+        return {
+          cueTime: eventStreamNode.start,
+          frames: [{ data: eventStreamNode.messageData }]
+        };
+      });
+
+      this.addMetadataToTextTrack('EventStream', metadataArray, this.mainPlaylistLoader_.main.duration);
+    }
+  }
 }

src/media-groups.js

@@ -549,3 +549,3 @@ import videojs from 'video.js';
       for (const variantLabel in mediaGroups[type][groupId]) {
-        if (mediaGroups[type][groupId][variantLabel].forced) {
+        if (!vhs.options_.useForcedSubtitles && mediaGroups[type][groupId][variantLabel].forced) {
           // Subtitle playlists with the forced attribute are not selectable in Safari.
@@ -552,0 +552,0 @@ // According to Apple's HLS Authoring Specification:

src/media-segment-request.js

@@ -500,34 +500,33 @@ import { createTransferableMessage } from './bin-utils';
         }
-
-        // Run through the CaptionParser in case there are captions.
-        // Initialize CaptionParser if it hasn't been yet
-        if (!tracks.video || !data.byteLength || !segment.transmuxer) {
-          finishLoading();
-          return;
-        }
-
         workerCallback({
-          action: 'pushMp4Captions',
-          endAction: 'mp4Captions',
+          action: 'probeEmsgID3',
+          data: bytesAsUint8Array,
           transmuxer: segment.transmuxer,
-          data: bytesAsUint8Array,
-          timescales: segment.map.timescales,
-          trackIds: [tracks.video.id],
-          callback: (message) => {
+          offset: startTime,
+          callback: ({emsgData, id3Frames}) => {
             // transfer bytes back to us
-            bytes = message.data.buffer;
-            segment.bytes = bytesAsUint8Array = message.data;
-            message.logs.forEach(function(log) {
-              onTransmuxerLog(merge(log, {stream: 'mp4CaptionParser'}));
-            });
+            bytes = emsgData.buffer;
+            segment.bytes = bytesAsUint8Array = emsgData;
 
+            // Run through the CaptionParser in case there are captions.
+            // Initialize CaptionParser if it hasn't been yet
+            if (!tracks.video || !data.byteLength || !segment.transmuxer) {
+              finishLoading(undefined, id3Frames);
+              return;
+            }
+
             workerCallback({
-              action: 'probeEmsgID3',
+              action: 'pushMp4Captions',
+              endAction: 'mp4Captions',
+              transmuxer: segment.transmuxer,
               data: bytesAsUint8Array,
-              transmuxer: segment.transmuxer,
-              offset: startTime,
-              callback: ({emsgData, id3Frames}) => {
+              timescales: segment.map.timescales,
+              trackIds: [tracks.video.id],
+              callback: (message) => {
                 // transfer bytes back to us
-                bytes = emsgData.buffer;
-                segment.bytes = bytesAsUint8Array = emsgData;
+                bytes = message.data.buffer;
+                segment.bytes = bytesAsUint8Array = message.data;
+                message.logs.forEach(function(log) {
+                  onTransmuxerLog(merge(log, {stream: 'mp4CaptionParser'}));
+                });
                 finishLoading(message.captions, id3Frames);
@@ -534,0 +533,0 @@ }

src/source-updater.js

@@ -471,7 +471,5 @@ /**
   canRemoveSourceBuffer() {
-    // IE reports that it supports removeSourceBuffer, but often throws
-    // errors when attempting to use the function. So we report that it
-    // does not support removeSourceBuffer. As of Firefox 83 removeSourceBuffer
-    // throws errors, so we report that it does not support this as well.
-    return !videojs.browser.IE_VERSION && !videojs.browser.IS_FIREFOX && window.MediaSource &&
+    // As of Firefox 83 removeSourceBuffer
+    // throws errors, so we report that it does not support this.
+    return !videojs.browser.IS_FIREFOX && window.MediaSource &&
       window.MediaSource.prototype &&
@@ -478,0 +476,0 @@ typeof window.MediaSource.prototype.removeSourceBuffer === 'function';

src/util/text-tracks.js

@@ -162,2 +162,7 @@ /**
 
+    // If we have no frames, we can't create a cue.
+    if (!metadata.frames || !metadata.frames.length) {
+      return;
+    }
+
     metadata.frames.forEach((frame) => {
@@ -289,24 +294,14 @@ const cue = new Cue(
 
-  for (let i = 0; i < cues.length; i++) {
-    const duplicates = [];
-    let occurrences = 0;
+  const uniqueCues = {};
 
-    for (let j = 0; j < cues.length; j++) {
-      if (
-        cues[i].startTime === cues[j].startTime &&
-        cues[i].endTime === cues[j].endTime &&
-        cues[i].text === cues[j].text
-      ) {
-        occurrences++;
+  for (let i = cues.length - 1; i >= 0; i--) {
+    const cue = cues[i];
+    const cueKey = `${cue.startTime}-${cue.endTime}-${cue.text}`;
 
-        if (occurrences > 1) {
-          duplicates.push(cues[j]);
-        }
-      }
+    if (uniqueCues[cueKey]) {
+      track.removeCue(cue);
+    } else {
+      uniqueCues[cueKey] = cue;
     }
-
-    if (duplicates.length) {
-      duplicates.forEach(dupe => track.removeCue(dupe));
-    }
   }
 };

src/videojs-http-streaming.js

@@ -290,4 +290,4 @@ /**
   // Since PSSH values are interpreted as initData, EME will dedupe any duplicates. The
-  // only place where it should not be deduped is for ms-prefixed APIs, but the early
-  // return for IE11 above, and the existence of modern EME APIs in addition to
+  // only place where it should not be deduped is for ms-prefixed APIs, but
+  // the existence of modern EME APIs in addition to
   // ms-prefixed APIs on Edge should prevent this from being a concern.
@@ -597,2 +597,3 @@ // initializeMediaKeys also won't use the webkit-prefixed APIs.
         this.options_.useBandwidthFromLocalStorage || false;
+    this.options_.useForcedSubtitles = this.options_.useForcedSubtitles || false;
     this.options_.useNetworkInformationApi = this.options_.useNetworkInformationApi || false;
@@ -650,2 +651,3 @@ this.options_.useDtsForTimestampOffset = this.options_.useDtsForTimestampOffset || false;
       'llhls',
+      'useForcedSubtitles',
       'useNetworkInformationApi',
@@ -1064,5 +1066,3 @@ 'useDtsForTimestampOffset',
 
-    // In IE11 this is too early to initialize media keys, and IE11 does not support
-    // promises.
-    if (videojs.browser.IE_VERSION === 11 || !didSetupEmeOptions) {
+    if (!didSetupEmeOptions) {
       // If EME options were not set up, we've done all we could to initialize EME.
@@ -1069,0 +1069,0 @@ this.playlistController_.sourceUpdater_.initializedEme();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6177398

increased by0.13%

Lines of code

119719

increased by0.12%

Number of lines in readme file

1003

increased by1.01%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

25

increased by8.7%

Dependency changes

• Updatedmpd-parser@^1.1.1