feat: built-in HLS playback support (#5057)

This PR is to add HLS playback support built into video.js for 7.0 via videojs-http-streaming (shorthand VHS). VHS is the next major version of videojs-contrib-hls that removes HLS Flash playback and includes some experimental DASH support (hence the rename). The purpose is to improve the out-of-the-box experience for video.js and allow cross browser HLS compatibility. The proposed changes are to have the standard video.js browser and module scripts contain VHS and provide an alternate video.js browser script that does not contain VHS. A video.js/core export is provided for importing without VHS.
2025-02-02 11:34:50 +02:00 · 2018-03-30 14:01:16 -04:00 · 2018-03-30 14:01:16 -04:00 · d1b4768b05
commit d1b4768b05
parent 228484befc
7 changed files with 111 additions and 8 deletions
--- a/.gitignore
+++ b/.gitignore
@ -31,3 +31,5 @@ dist/*
 es5/*

 .idea/
+
+core.js
--- a/.npmignore
+++ b/.npmignore
@ -3,3 +3,4 @@
 !dist/**
 !es5/**
 !src/css/**
+!core.js
--- a/build/rollup.js
+++ b/build/rollup.js
@ -9,10 +9,12 @@ import filesize from 'rollup-plugin-filesize';
 import progress from 'rollup-plugin-progress';
 import ignore from 'rollup-plugin-ignore';
 import uglify from 'rollup-plugin-uglify';
+import alias from 'rollup-plugin-alias';
 import minimist from 'minimist';
 import _ from 'lodash';
 import pkg from '../package.json';
 import fs from 'fs';
+import path from 'path';

 const args = minimist(process.argv.slice(2), {
  boolean: ['watch', 'minify', 'progress'],
@ -43,7 +45,7 @@ const primedCjs = commonjs({
 });
 const primedBabel = babel({
  babelrc: false,
-  exclude: 'node_modules/**',
+  exclude: 'node_modules/**(!http-streaming)',
  presets: [
    ['es2015', {
      loose: true,
@ -53,7 +55,7 @@ const primedBabel = babel({
  plugins: ['external-helpers']
 });

-const es = {
+const coreEs = {
  options: {
    entry: 'src/js/video.js',
    plugins: [
@ -75,6 +77,36 @@ const es = {
  },
  banner: compiledLicense(Object.assign({includesVtt: true}, bannerData)),
  useStrict: false,
+  format: 'cjs',
+  dest: 'core.js'
+};
+
+const es = {
+  options: {
+    entry: 'src/js/index.js',
+    plugins: [
+      alias({
+        'video.js': path.resolve(__dirname, '../src/js/video.js'),
+        '@videojs/http-streaming': path.resolve(__dirname, '../node_modules/@videojs/http-streaming/dist/videojs-http-streaming.es.js')
+      }),
+      json(),
+      primedBabel,
+      args.progress ? progress() : {},
+      filesize()
+    ],
+    onwarn(warning) {
+      if (warning.code === 'UNUSED_EXTERNAL_IMPORT' ||
+          warning.code === 'UNRESOLVED_IMPORT') {
+        return;
+      }
+
+      // eslint-disable-next-line no-console
+      console.warn(warning.message);
+    },
+    legacy: true
+  },
+  banner: compiledLicense(Object.assign({includesVtt: true}, bannerData)),
+  useStrict: false,
  format: 'es',
  dest: 'dist/video.es.js'
 };
@ -86,8 +118,11 @@ const cjs = Object.assign({}, es, {

 const umd = {
  options: {
-    entry: 'src/js/video.js',
+    entry: 'src/js/index.js',
    plugins: [
+      alias({
+        'video.js': path.resolve(__dirname, '../src/js/video.js')
+      }),
      primedResolve,
      json(),
      primedCjs,
@ -165,6 +200,7 @@ if (!args.watch) {
    runRollup(cjs);
    runRollup(umd);
    runRollup(novttUmd);
+    runRollup(coreEs);
  }
 } else {
  const props = ['format', 'dest', 'banner', 'useStrict'];
--- a/package-lock.json
+++ b/package-lock.json
@ -4,6 +4,20 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
+    "@videojs/http-streaming": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-0.8.0.tgz",
+      "integrity": "sha512-ZeYLRwiArCMC7lQTARRcn+Obqzmlv+Y3BRI6TA0HQzJWklIHPMUKlYF/rgNeeLuhrS/cLZY52qn/F77AY5ogXw==",
+      "requires": {
+        "aes-decrypter": "1.0.3",
+        "global": "4.3.2",
+        "m3u8-parser": "4.2.0",
+        "mpd-parser": "0.5.0",
+        "mux.js": "4.4.1",
+        "url-toolkit": "2.1.4",
+        "video.js": "6.6.0"
+      }
+    },
    "JSONStream": {
      "version": "1.3.1",
      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
@ -169,6 +183,14 @@
      "dev": true,
      "optional": true
    },
+    "aes-decrypter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+      "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
+      "requires": {
+        "pkcs7": "0.2.3"
+      }
+    },
    "after": {
      "version": "0.8.2",
      "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
@ -4017,8 +4039,7 @@
    "es5-shim": {
      "version": "4.5.10",
      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.10.tgz",
-      "integrity": "sha512-vmryBdqKRO8Ei9LJ4yyEk/EOmAOGIagcHDYPpTAi6pot4IMHS1AC2q5cTKPmydpijg2iX8DVmCuqgrNxIWj8Yg==",
-      "dev": true
+      "integrity": "sha512-vmryBdqKRO8Ei9LJ4yyEk/EOmAOGIagcHDYPpTAi6pot4IMHS1AC2q5cTKPmydpijg2iX8DVmCuqgrNxIWj8Yg=="
    },
    "es6-iterator": {
      "version": "2.0.1",
@ -9570,6 +9591,11 @@
        "yallist": "2.1.2"
      }
    },
+    "m3u8-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.2.0.tgz",
+      "integrity": "sha512-LVHw0U6IPJjwk9i9f7Xe26NqaUHTNlIt4SSWoEfYFROeVKHN6MIjOhbRheI3dg8Jbq5WCuMFQ0QU3EgZpmzFPg=="
+    },
    "magic-string": {
      "version": "0.22.4",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.4.tgz",
@ -10114,6 +10140,15 @@
        "on-headers": "1.0.1"
      }
    },
+    "mpd-parser": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.5.0.tgz",
+      "integrity": "sha512-eexEhIcAZO7zdqLAA3qwAQqxPSnvqdWHsvskYc9RNUj7g+/OXtwO2g0iEEewkeAVkLp7zOOWaI08bjeTMWRFXg==",
+      "requires": {
+        "global": "4.3.2",
+        "url-toolkit": "2.1.4"
+      }
+    },
    "ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@ -10138,6 +10173,11 @@
      "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
      "dev": true
    },
+    "mux.js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.4.1.tgz",
+      "integrity": "sha512-KxeFqCXDWZS9ZflufC8PmPx8r3cAq+xWyPxYpgKiDmcImgwRyl/R0N5Eun4eWtxfJ98xZ7UdbBVKq0r06dFBOw=="
+    },
    "mz": {
      "version": "2.7.0",
      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@ -11419,6 +11459,11 @@
        "pinkie": "2.0.4"
      }
    },
+    "pkcs7": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
+      "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
+    },
    "pkg-up": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-1.0.0.tgz",
@ -12939,6 +12984,15 @@
      "integrity": "sha512-bH3eWh7MzbiKTQcHQN7Ievqbs/yY7T+ZcJYboBYkp7BkRlAr2DXHPfiqlvlEH/M95giEBpinHEi/s9CVIgYT6w==",
      "dev": true
    },
+    "rollup-plugin-alias": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-alias/-/rollup-plugin-alias-1.4.0.tgz",
+      "integrity": "sha512-lB094zdi19FS+1bVarVp9kBN0Zk41PdTGoCk0z8xesKO7RGjOo18cp1hUzEqrOQ4bM9+KLD9nbnu/XUxQm9pbg==",
+      "dev": true,
+      "requires": {
+        "slash": "1.0.0"
+      }
+    },
    "rollup-plugin-babel": {
      "version": "2.7.1",
      "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-2.7.1.tgz",
@ -15258,6 +15312,11 @@
        "prepend-http": "1.0.4"
      }
    },
+    "url-toolkit": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.1.4.tgz",
+      "integrity": "sha512-jAzm/85zNFfkW5Do/37GeGC7uGXBMMawToVdcf5SIpc+x9TmZDrRIUuLRPcvDMfqtt3m8VmDrYhCWh4UbsQLyg=="
+    },
    "urljoin": {
      "version": "0.1.5",
      "resolved": "https://registry.npmjs.org/urljoin/-/urljoin-0.1.5.tgz",
@ -15451,7 +15510,6 @@
      "version": "6.6.0",
      "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.6.0.tgz",
      "integrity": "sha512-jtMn0PqQSGGes5Lcb5Ste0fG4HrcOIr51LYX57wrQbbrUhj/56U8c9LGhVeGAgpi1XBebw/R16xyENxh5yPllw==",
-      "dev": true,
      "requires": {
        "babel-runtime": "6.26.0",
        "global": "4.3.2",
@ -15467,7 +15525,6 @@
          "version": "0.12.4",
          "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.4.tgz",
          "integrity": "sha1-OPJJnjHvs/qTWQ3a1MtmMnWksWE=",
-          "dev": true,
          "requires": {
            "global": "4.3.2"
          }
@ -15494,7 +15551,6 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
      "integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
-      "dev": true,
      "requires": {
        "es5-shim": "4.5.10"
      }
--- a/package.json
+++ b/package.json
@ -48,6 +48,7 @@
    "url": "https://github.com/videojs/video.js.git"
  },
  "dependencies": {
+    "@videojs/http-streaming": "^0.8.0",
    "babel-runtime": "^6.9.2",
    "global": "4.3.2",
    "safe-json-parse": "4.0.0",
@ -130,6 +131,7 @@
    "remark-validate-links": "^7.0.0",
    "replace": "^0.3.0",
    "rollup": "^0.47.5",
+    "rollup-plugin-alias": "^1.4.0",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-filesize": "^1.2.1",
@ -156,6 +158,7 @@
      "**/es5/**",
      "**/build/**",
      "!build/rollup.js",
+      "core.js",
      "**/dist/**",
      "**/docs/**",
      "**/lang/**",
--- a/src/js/index.js
+++ b/src/js/index.js
@ -0,0 +1,3 @@
+import videojs from './video';
+import '@videojs/http-streaming';
+export default videojs;
--- a/test/require/webpack.js
+++ b/test/require/webpack.js
@ -1,8 +1,10 @@
 /* eslint-disable no-var */
 /* eslint-env qunit */
 var videojs = require('../../');
+var videojsCore = require('../../core');

 QUnit.module('Webpack Require');
 QUnit.test('videojs should be requirable and bundled via webpack', function(assert) {
  assert.ok(videojs, 'videojs is required properly');
+  assert.ok(videojsCore, 'videojs core is required properly');
 });