Add VideojsPlayer for handling youtube and vimeo
authorymh <ymh.work@gmail.com>
Thu, 17 Oct 2024 00:58:24 +0200
changeset 1073 687133dc13cf
parent 1072 ac1eacb3aa33
child 1074 231ea5ea7de4
Add VideojsPlayer for handling youtube and vimeo
.hgignore
package-lock.json
package.json
src/js/widgets-container/defaults.js
src/js/widgets-container/widget.js
src/widgets/AdaptivePlayer.js
src/widgets/Annotation.js
src/widgets/Arrow.js
src/widgets/AutoPlayer.js
src/widgets/VideojsPlayer.js
src/widgets/VideojsPlayer.module.css
src/widgets/index.js
src/widgets/videojs_plugins/Vimeo.js
test/index.html
test/json/ldt-youtube.json
test/videojs-dist.html
test/videojs-vimeo-dist.html
test/videojs-vimeo.html
test/videojs-youtube-dist.html
test/videojs-youtube.html
test/videojs.html
--- a/.hgignore	Wed Sep 04 17:32:50 2024 +0200
+++ b/.hgignore	Thu Oct 17 00:58:24 2024 +0200
@@ -28,3 +28,4 @@
 shell.nix
 dist/*
 .envrc
+.direnv
--- a/package-lock.json	Wed Sep 04 17:32:50 2024 +0200
+++ b/package-lock.json	Thu Oct 17 00:58:24 2024 +0200
@@ -8,19 +8,23 @@
       "name": "metadataplayer",
       "version": "0.0.1",
       "dependencies": {
+        "@vimeo/player": "^2.24.0",
         "backbone": "^1.6.0",
         "backbone-relational": "^0.10.0",
         "jquery": "^3.7.1",
         "jquery-ui": "^1.14.0",
         "jwplayer": "^1.0.3",
         "lodash": "^4.17.21",
+        "mime-types": "^2.1.35",
         "mousetrap": "^1.6.5",
         "mousetrap-global-bind": "^1.1.0",
         "mustache": "^4.2.0",
         "paper": "^0.12.18",
         "popcorn-js": "github:menismu/popcorn-js",
         "processing": "^0.2.0",
-        "raphael": "^2.3.0"
+        "raphael": "^2.3.0",
+        "videojs": "^1.0.0",
+        "videojs-youtube": "^3.0.1"
       },
       "devDependencies": {
         "@rollup/plugin-inject": "^5.0.5",
@@ -29,6 +33,18 @@
         "vite-plugin-node-polyfills": "^0.22.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz",
+      "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -680,6 +696,73 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@videojs/http-streaming": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.15.0.tgz",
+      "integrity": "sha512-6rjaqEa87gVFqDFsHaLKXGrDqL3NhNZRNi6wkMw+uyt1lrLD2OFY0SfRQRNl7Vmmx0pt5FRJoRJYlnKsowyElA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.1.1",
+        "aes-decrypter": "^4.0.2",
+        "global": "^4.4.0",
+        "m3u8-parser": "^7.2.0",
+        "mpd-parser": "^1.3.1",
+        "mux.js": "7.0.3",
+        "video.js": "^7 || ^8"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "video.js": "^8.19.0"
+      }
+    },
+    "node_modules/@videojs/vhs-utils": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.1.1.tgz",
+      "integrity": "sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/xhr": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.7.0.tgz",
+      "integrity": "sha512-giab+EVRanChIupZK7gXjHy90y3nncA2phIOyG3Ne5fvpiMJzvqYwiTOnEVW2S4CoYcuKJkomat7bMXA/UoUZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
+    "node_modules/@vimeo/player": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.24.0.tgz",
+      "integrity": "sha512-oIpucg40ijdV1hGvAwHZitgbzSB/FFl1NbU82IHasG9e4EHNRYqJLetQjPk9oxMgeR06Pt/xB2wne/3jqKtLUg==",
+      "license": "MIT",
+      "dependencies": {
+        "native-promise-only": "0.8.1",
+        "weakmap-polyfill": "2.0.4"
+      }
+    },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -697,6 +780,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/aes-decrypter": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.2.tgz",
+      "integrity": "sha512-lc+/9s6iJvuaRe5qDlMTpCFjnwpkeOXp8qP3oiZ5jsj1MRg+SBVUmmICrhxHvc8OELSmc+fEyyxAuppY6hrWzw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.1.1",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -723,6 +818,15 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
+      "license": "BSD-3-Clause OR MIT",
+      "engines": {
+        "node": ">=0.4.2"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -760,6 +864,32 @@
         "node": ">=10"
       }
     },
+    "node_modules/argparse": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-0.1.16.tgz",
+      "integrity": "sha512-LjmC2dNpdn2L4UzyoaIr11ELYoLn37ZFy9zObrQFHsSuOepeUEMKnM8w5KL4Tnrp2gy88rRuQt6Ky8Bjml+Baw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "underscore": "~1.7.0",
+        "underscore.string": "~2.4.0"
+      }
+    },
+    "node_modules/argparse/node_modules/underscore": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
+      "integrity": "sha512-cp0oQQyZhUM1kpJDLdGO1jPZHgS/MpzoWYfe9+CM2h/QGDZlqwT2T3YGukuBdaNJ/CAPoeyAZRRHz8JFo176vA==",
+      "peer": true
+    },
+    "node_modules/argparse/node_modules/underscore.string": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.4.0.tgz",
+      "integrity": "sha512-yxkabuCaIBnzfIvX3kBxQqCs0ar/bfJwDnFEHJUm/ZrRVhT3IItdRF5cZjARLzEnyQYtIUhsZ2LG2j3HidFOFQ==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -1168,6 +1298,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/canvas": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
@@ -1284,6 +1423,20 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/coffee-script": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.3.3.tgz",
+      "integrity": "sha512-QjQ1T4BqyHv19k6XSfdhy/QLlIOhywz0ekBUCa9h71zYMJlfDTGan/Z1JXzYkZ6v8R+GhvL/p4FZPbPW8WNXlg==",
+      "deprecated": "CoffeeScript on NPM has moved to \"coffeescript\" (no hyphen)",
+      "peer": true,
+      "bin": {
+        "cake": "bin/cake",
+        "coffee": "bin/coffee"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1509,6 +1662,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/dateformat": {
+      "version": "1.0.2-1.2.3",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz",
+      "integrity": "sha512-AXvW8g7tO4ilk5HgOWeDmPi/ZPaCnMJ+9Cg1I3p19w6mcvAAXBuuGEXAxybC+Djj1PSZUiHUcyoYu7WneCX8gQ==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
@@ -1525,6 +1687,15 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
@@ -1639,6 +1810,11 @@
       "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
       "dev": true
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "node_modules/domain-browser": {
       "version": "4.23.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.23.0.tgz",
@@ -1803,6 +1979,19 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/esprima": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
+      "integrity": "sha512-rp5dMKN8zEs9dfi9g0X1ClLmV//WRyk/R15mppFNICIFRG5P92VP7Z04p8pk++gABo9W2tY+kHyu6P1mEHgmTA==",
+      "peer": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1822,6 +2011,13 @@
       "resolved": "https://registry.npmjs.org/eve-raphael/-/eve-raphael-0.5.0.tgz",
       "integrity": "sha512-jrxnPsCGqng1UZuEp9DecX/AuSyAszATSjf4oEcRxvfxa1Oux4KkIPKBAAWWnpdwfARtr+Q0o9aPYWjsROD7ug=="
     },
+    "node_modules/eventemitter2": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-0.4.14.tgz",
+      "integrity": "sha512-K7J4xq5xAD5jHsGM5ReWXRTFa3JRGofHiMcVgQ8PRwgWxzjHpMWCIzsmyf60+mh8KLsqYPcjUMa0AC4hd6lPyQ==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -1846,6 +2042,15 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "node_modules/exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/express": {
       "version": "4.19.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
@@ -1983,6 +2188,60 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/findup-sync": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.1.3.tgz",
+      "integrity": "sha512-yjftfYnF4ThYEvKEV/kEFR15dmtyXTAh3vQnzpJUoc7Naj5y1P0Ck7Zs1+Vroa00E3KT3IYsk756S+8WA5dNLw==",
+      "peer": true,
+      "dependencies": {
+        "glob": "~3.2.9",
+        "lodash": "~2.4.1"
+      },
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/findup-sync/node_modules/glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.11.tgz",
+      "integrity": "sha512-hVb0zwEZwC1FXSKRPFTeOtN7AArJcJlI6ULGLtrstaswKNlrTJqAA+1lYlSUop4vjA423xlBzqfVS3iWGlqJ+g==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "BSD",
+      "peer": true,
+      "dependencies": {
+        "inherits": "2",
+        "minimatch": "0.3"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/findup-sync/node_modules/lodash": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
+      "integrity": "sha512-Kak1hi6/hYHGVPmdyiZijoQyz5x2iGVzs6w9GYB/HiXEtylY7tIoYEROMjvM1d9nXJqPOrG2MNPMn01bJ+S0Rw==",
+      "engines": [
+        "node",
+        "rhino"
+      ],
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/findup-sync/node_modules/minimatch": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz",
+      "integrity": "sha512-WFX1jI1AaxNTZVOHLBVazwTWKaQjoykSzCBNXB72vDTCzopQGtyP91tKdFK5cv1+qMwPyiTu1HqUriqplI8pcA==",
+      "deprecated": "Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "lru-cache": "2",
+        "sigmund": "~1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -2135,6 +2394,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/getobject": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/getobject/-/getobject-0.1.0.tgz",
+      "integrity": "sha512-hIGEBfnHcZpWkXPsAVeVmpYDvfy/matVl03yOY91FPmnpCC12Lm5izNxCjO3lHAeO6uaTwMxu7g450Siknlhig==",
+      "peer": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
@@ -2163,6 +2431,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "license": "MIT",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "node_modules/google-closure-compiler": {
       "version": "20191027.0.0",
       "resolved": "https://registry.npmjs.org/google-closure-compiler/-/google-closure-compiler-20191027.0.0.tgz",
@@ -2247,6 +2525,304 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
+      "integrity": "sha512-iiTUZ5vZ+2ZV+h71XAgwCSu6+NAizhFU3Yw8aC/hH5SQ3SnISqEqAek40imAFGtDcwJKNhXvSY+hzIolnLwcdQ==",
+      "deprecated": "please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js",
+      "license": "BSD",
+      "peer": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/grunt": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/grunt/-/grunt-0.4.5.tgz",
+      "integrity": "sha512-1iq3ylLjzXqz/KSq1OAE2qhnpcbkF2WyhsQcavZt+YmgvHu0EbPMEhGhy2gr0FP67isHpRdfwjB5WVeXXcJemQ==",
+      "peer": true,
+      "dependencies": {
+        "async": "~0.1.22",
+        "coffee-script": "~1.3.3",
+        "colors": "~0.6.2",
+        "dateformat": "1.0.2-1.2.3",
+        "eventemitter2": "~0.4.13",
+        "exit": "~0.1.1",
+        "findup-sync": "~0.1.2",
+        "getobject": "~0.1.0",
+        "glob": "~3.1.21",
+        "grunt-legacy-log": "~0.1.0",
+        "grunt-legacy-util": "~0.2.0",
+        "hooker": "~0.2.3",
+        "iconv-lite": "~0.2.11",
+        "js-yaml": "~2.0.5",
+        "lodash": "~0.9.2",
+        "minimatch": "~0.2.12",
+        "nopt": "~1.0.10",
+        "rimraf": "~2.2.8",
+        "underscore.string": "~2.2.1",
+        "which": "~1.0.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/grunt-contrib-uglify": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/grunt-contrib-uglify/-/grunt-contrib-uglify-0.2.7.tgz",
+      "integrity": "sha512-KXKM2UNLsCiUI6/DYfAIPm3i26UJJN6Cf6KD8fFa2TKllj7yLPC853IxtWBJ/3jX66QtXHGtdCORuuA6sAFvvA==",
+      "dependencies": {
+        "grunt-lib-contrib": "~0.6.1",
+        "uglify-js": "~2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      },
+      "peerDependencies": {
+        "grunt": "~0.4.0"
+      }
+    },
+    "node_modules/grunt-legacy-log": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/grunt-legacy-log/-/grunt-legacy-log-0.1.3.tgz",
+      "integrity": "sha512-qYs/uM0ImdzwIXLhS4O5WLV5soAM+PEqqHI/hzSxlo450ERSccEhnXqoeDA9ZozOdaWuYnzTOTwRcVRogleMxg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "colors": "~0.6.2",
+        "grunt-legacy-log-utils": "~0.1.1",
+        "hooker": "~0.2.3",
+        "lodash": "~2.4.1",
+        "underscore.string": "~2.3.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/grunt-legacy-log-utils": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/grunt-legacy-log-utils/-/grunt-legacy-log-utils-0.1.1.tgz",
+      "integrity": "sha512-D0vbUX00TFYCKNZtcZzemMpwT8TR/FdRs1pmfiBw6qnUw80PfsjV+lhIozY/3eJ3PSG2zj89wd2mH/7f4tNAlw==",
+      "peer": true,
+      "dependencies": {
+        "colors": "~0.6.2",
+        "lodash": "~2.4.1",
+        "underscore.string": "~2.3.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/grunt-legacy-log-utils/node_modules/colors": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
+      "integrity": "sha512-OsSVtHK8Ir8r3+Fxw/b4jS1ZLPXkV6ZxDRJQzeD7qo0SqMXWrHDM71DgYzPMHY8SFJ0Ao+nNU2p1MmwdzKqPrw==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/grunt-legacy-log-utils/node_modules/lodash": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
+      "integrity": "sha512-Kak1hi6/hYHGVPmdyiZijoQyz5x2iGVzs6w9GYB/HiXEtylY7tIoYEROMjvM1d9nXJqPOrG2MNPMn01bJ+S0Rw==",
+      "engines": [
+        "node",
+        "rhino"
+      ],
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/grunt-legacy-log-utils/node_modules/underscore.string": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
+      "integrity": "sha512-hbD5MibthuDAu4yA5wxes5bzFgqd3PpBJuClbRxaNddxfdsz+qf+1kHwrGQFrmchmDHb9iNU+6EHDn8uj0xDJg==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/grunt-legacy-log/node_modules/colors": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
+      "integrity": "sha512-OsSVtHK8Ir8r3+Fxw/b4jS1ZLPXkV6ZxDRJQzeD7qo0SqMXWrHDM71DgYzPMHY8SFJ0Ao+nNU2p1MmwdzKqPrw==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/grunt-legacy-log/node_modules/lodash": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz",
+      "integrity": "sha512-Kak1hi6/hYHGVPmdyiZijoQyz5x2iGVzs6w9GYB/HiXEtylY7tIoYEROMjvM1d9nXJqPOrG2MNPMn01bJ+S0Rw==",
+      "engines": [
+        "node",
+        "rhino"
+      ],
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/grunt-legacy-log/node_modules/underscore.string": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.3.3.tgz",
+      "integrity": "sha512-hbD5MibthuDAu4yA5wxes5bzFgqd3PpBJuClbRxaNddxfdsz+qf+1kHwrGQFrmchmDHb9iNU+6EHDn8uj0xDJg==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/grunt-legacy-util": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-0.2.0.tgz",
+      "integrity": "sha512-cXPbfF8aM+pvveQeN1K872D5fRm30xfJWZiS63Y8W8oyIPLClCsmI8bW96Txqzac9cyL4lRqEBhbhJ3n5EzUUQ==",
+      "peer": true,
+      "dependencies": {
+        "async": "~0.1.22",
+        "exit": "~0.1.1",
+        "getobject": "~0.1.0",
+        "hooker": "~0.2.3",
+        "lodash": "~0.9.2",
+        "underscore.string": "~2.2.1",
+        "which": "~1.0.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/grunt-legacy-util/node_modules/async": {
+      "version": "0.1.22",
+      "resolved": "https://registry.npmjs.org/async/-/async-0.1.22.tgz",
+      "integrity": "sha512-2tEzliJmf5fHNafNwQLJXUasGzQCVctvsNkXmnlELHwypU0p08/rHohYvkqKIjyXpx+0rkrYv6QbhJ+UF4QkBg==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/grunt-legacy-util/node_modules/lodash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-0.9.2.tgz",
+      "integrity": "sha512-LVbt/rjK62gSbhehDVKL0vlaime4Y1IBixL+bKeNfoY4L2zab/jGrxU6Ka05tMA/zBxkTk5t3ivtphdyYupczw==",
+      "engines": [
+        "node",
+        "rhino"
+      ],
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/grunt-lib-contrib": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/grunt-lib-contrib/-/grunt-lib-contrib-0.6.1.tgz",
+      "integrity": "sha512-HdCtJuMmmkSAVrAfsG7lZWE0YabrsPWwzcCCUgWQOAaQsQSUNhw/IwD2YjCSLh5y9NXSPzHTYFLL4ro7QbAJMA==",
+      "dependencies": {
+        "zlib-browserify": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/grunt/node_modules/async": {
+      "version": "0.1.22",
+      "resolved": "https://registry.npmjs.org/async/-/async-0.1.22.tgz",
+      "integrity": "sha512-2tEzliJmf5fHNafNwQLJXUasGzQCVctvsNkXmnlELHwypU0p08/rHohYvkqKIjyXpx+0rkrYv6QbhJ+UF4QkBg==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/grunt/node_modules/colors": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-0.6.2.tgz",
+      "integrity": "sha512-OsSVtHK8Ir8r3+Fxw/b4jS1ZLPXkV6ZxDRJQzeD7qo0SqMXWrHDM71DgYzPMHY8SFJ0Ao+nNU2p1MmwdzKqPrw==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/grunt/node_modules/glob": {
+      "version": "3.1.21",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
+      "integrity": "sha512-ANhy2V2+tFpRajE3wN4DhkNQ08KDr0Ir1qL12/cUe5+a7STEK8jkW4onUYuY8/06qAFuT5je7mjAqzx0eKI2tQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "BSD",
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "~1.2.0",
+        "inherits": "1",
+        "minimatch": "~0.2.11"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/grunt/node_modules/iconv-lite": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.2.11.tgz",
+      "integrity": "sha512-KhmFWgaQZY83Cbhi+ADInoUQ8Etn6BG5fikM9syeOjQltvR45h7cRKJ/9uvQEuD61I3Uju77yYce0/LhKVClQw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/grunt/node_modules/inherits": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
+      "integrity": "sha512-Al67oatbRSo3RV5hRqIoln6Y5yMVbJSIn4jEJNL7VCImzq/kLr7vvb6sFRJXqr8rpHc/2kJOM+y0sPKN47VdzA==",
+      "peer": true
+    },
+    "node_modules/grunt/node_modules/lodash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-0.9.2.tgz",
+      "integrity": "sha512-LVbt/rjK62gSbhehDVKL0vlaime4Y1IBixL+bKeNfoY4L2zab/jGrxU6Ka05tMA/zBxkTk5t3ivtphdyYupczw==",
+      "engines": [
+        "node",
+        "rhino"
+      ],
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/grunt/node_modules/minimatch": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
+      "integrity": "sha512-zZ+Jy8lVWlvqqeM8iZB7w7KmQkoJn8djM585z88rywrEbzoqawVa9FR5p2hwD+y74nfuKOjmNvi9gtWJNLqHvA==",
+      "deprecated": "Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "lru-cache": "2",
+        "sigmund": "~1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/grunt/node_modules/nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/grunt/node_modules/rimraf": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.2.8.tgz",
+      "integrity": "sha512-R5KMKHnPAQaZMqLOsyuyUmcIjSeDm+73eoqQpaXA7AZ22BL+6C+1mcUscgOsNd8WVlJuvlgAPsegcx7pjlV0Dg==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
     "node_modules/har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -2382,6 +2958,15 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hooker": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/hooker/-/hooker-0.2.3.tgz",
+      "integrity": "sha512-t+UerCsQviSymAInD01Pw+Dn/usmz1sRO+3Zk1+lx8eg+WKpD2ulcwWqHHL0+aseRBr+3+vIhiG1K1JTwaIcTA==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -2600,6 +3185,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
+      "license": "MIT"
+    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -2688,6 +3279,23 @@
         "jquery": ">=1.12.0 <5.0.0"
       }
     },
+    "node_modules/js-yaml": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-2.0.5.tgz",
+      "integrity": "sha512-VEKcIksckDBUhg2JS874xVouiPkywVUh4yyUmLCDe1Zg3bCd6M+F1eGPenPeHLc2XC8pp9G8bsuofK0NeEqRkA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "argparse": "~ 0.1.11",
+        "esprima": "~ 1.0.2"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      },
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
@@ -2814,6 +3422,24 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lru-cache": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
+      "integrity": "sha512-WpibWJ60c3AgAz8a2iYErDrcT2C7OmKnsWhIcHOjkUHFjkXncJhtLxNSqUmxRxRunpb5I8Vprd7aNSd2NtksJQ==",
+      "license": "ISC",
+      "peer": true
+    },
+    "node_modules/m3u8-parser": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.2.0.tgz",
+      "integrity": "sha512-CRatFqpjVtMiMaKXxNvuI3I++vUumIXVVT/JpCpdU/FynV/ceVw1qpPyyBNindL+JlPMSesx+WX1QJaZEJSaMQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.1.1",
+        "global": "^4.4.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@@ -2919,6 +3545,7 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -2937,6 +3564,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -3023,6 +3658,21 @@
         "mousetrap": "^1.6.0"
       }
     },
+    "node_modules/mpd-parser": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.1.tgz",
+      "integrity": "sha512-1FuyEWI5k2HcmhS1HkKnUAQV7yFPfXPht2DnRRGtoiiAAW+ESTbtEXIDpRkwdU+XyrQuwrIym7UkoPKsZ0SyFw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "mpd-to-m3u8-json": "bin/parse.js"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3036,6 +3686,23 @@
         "mustache": "bin/mustache"
       }
     },
+    "node_modules/mux.js": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.3.tgz",
+      "integrity": "sha512-gzlzJVEGFYPtl2vvEiJneSWAWD4nfYRHD5XgxmB2gWvXraMPOYk+sxfvexmNfjQUFpmk6hwLR5C6iSFmuwCHdQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/nan": {
       "version": "2.20.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.20.0.tgz",
@@ -3059,6 +3726,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/native-promise-only": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
+      "integrity": "sha512-zkVhZUA3y8mbz652WrL5x0fB0ehrBkulWT3TomAQ9iDtyXZvzKeEA6GPxAItBYeNYl5yngKRX612qHOhvMkDeg==",
+      "license": "MIT"
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -3455,6 +4128,18 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      },
+      "bin": {
+        "pkcs7": "bin/cli.js"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
@@ -3551,7 +4236,6 @@
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -3714,6 +4398,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
     "node_modules/remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -4045,6 +4735,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha512-fCvEXfh6NWpm+YSuY2bpXb/VIihqWA6hLsgboC+0nl71Q7N7o2eaCW8mJa/NLvQhs6jpd3VZV4UiUQlV6+lc8g==",
+      "license": "ISC",
+      "peer": true
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@@ -4305,11 +5002,60 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/uglify-js": {
+      "version": "2.4.24",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.4.24.tgz",
+      "integrity": "sha512-tktIjwackfZLd893KGJmXc1hrRHH1vH9Po3xFh1XBjjeGAnN02xJ3SuoA+n1L29/ZaCA18KzCFlckS+vfPugiA==",
+      "license": "BSD",
+      "dependencies": {
+        "async": "~0.2.6",
+        "source-map": "0.1.34",
+        "uglify-to-browserify": "~1.0.0",
+        "yargs": "~3.5.4"
+      },
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/uglify-js/node_modules/async": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
+      "integrity": "sha512-eAkdoKxU6/LkKDBzLpT+t6Ff5EtfSF4wx1WfJiPEEV7WNLnDaRXk0oVysiEPm262roaachGexwUv94WhSgN5TQ=="
+    },
+    "node_modules/uglify-js/node_modules/source-map": {
+      "version": "0.1.34",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.34.tgz",
+      "integrity": "sha512-yfCwDj0vR9RTwt3pEzglgb3ZgmcXHt6DjG3bjJvzPwTL+5zDQ2MhmSzAcTy0GTiQuCiriSWXvWM1/NhKdXuoQA==",
+      "dependencies": {
+        "amdefine": ">=0.0.4"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==",
+      "license": "MIT"
+    },
     "node_modules/underscore": {
       "version": "1.13.7",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.7.tgz",
       "integrity": "sha512-GMXzWtsc57XAtguZgaQViUOzs0KTkk8ojr3/xAxXLITqf/3EMwxC0inyETfDFjH/Krbhuep0HNbbjI9i/q3F3g=="
     },
+    "node_modules/underscore.string": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-2.2.1.tgz",
+      "integrity": "sha512-3FVmhXqelrj6gfgp3Bn6tOavJvW0dNH2T+heTD38JRxIrAbiuzbqjknszoOYj3DyFB1nWiLj208Qt2no/L4cIA==",
+      "peer": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/union": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
@@ -4449,6 +5195,79 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "node_modules/video.js": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.18.1.tgz",
+      "integrity": "sha512-oQ4M/HD2fFgEPHfmVMWxGykRFIpOmVhK0XZ4PSsPTgN2jH6E6+92f/RI2mDXDb0yu+Fxv9fxMUm0M7Z2K3Zo9w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "^3.14.2",
+        "@videojs/vhs-utils": "^4.1.1",
+        "@videojs/xhr": "2.7.0",
+        "aes-decrypter": "^4.0.2",
+        "global": "4.4.0",
+        "m3u8-parser": "^7.2.0",
+        "mpd-parser": "^1.2.2",
+        "mux.js": "^7.0.1",
+        "videojs-contrib-quality-levels": "4.1.0",
+        "videojs-font": "4.2.0",
+        "videojs-vtt.js": "0.15.5"
+      }
+    },
+    "node_modules/videojs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/videojs/-/videojs-1.0.0.tgz",
+      "integrity": "sha512-FwI02jJ7d4E6goWuc/4LTN5OJlD1M0jInoIoNemo4EzMfu6IywhahMXDriLObX17ML62RsHS0oiCUE9wVB6i8A==",
+      "deprecated": "This is a placeholder package, please use the official 'video.js' package",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "grunt-contrib-uglify": "^0.2.7"
+      }
+    },
+    "node_modules/videojs-contrib-quality-levels": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz",
+      "integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=16",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "video.js": "^8"
+      }
+    },
+    "node_modules/videojs-font": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.2.0.tgz",
+      "integrity": "sha512-YPq+wiKoGy2/M7ccjmlvwi58z2xsykkkfNMyIg4xb7EZQQNwB71hcSsB3o75CqQV7/y5lXkXhI/rsGAS7jfEmQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
+    "node_modules/videojs-youtube": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/videojs-youtube/-/videojs-youtube-3.0.1.tgz",
+      "integrity": "sha512-0gKgag7Zno/dDwIdk+h48ODKDulR4IW62RxGE81PrMwi0OX/wUcKO6m1j+DFYI+7qjtWMZTKnbtQoHGxvUrFQg==",
+      "license": "MIT",
+      "dependencies": {
+        "video.js": "5.x || 6.x || 7.x || 8.x"
+      },
+      "peerDependencies": {
+        "video.js": "5.x || 6.x || 7.x || 8.x"
+      }
+    },
     "node_modules/vinyl": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",
@@ -4571,6 +5390,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/weakmap-polyfill": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.4.tgz",
+      "integrity": "sha512-ZzxBf288iALJseijWelmECm/1x7ZwQn3sMYIkDr2VvZp7r6SEKuT8D0O9Wiq6L9Nl5mazrOMcmiZE/2NCenaxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -4610,6 +5438,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/which": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.0.9.tgz",
+      "integrity": "sha512-E87fdQ/eRJr9W1X4wTPejNy9zTW3FI2vpCZSJ/HAY+TkjKVC0TUm1jk6vn2Z7qay0DQy0+RBGdXxj+RmmiGZKQ==",
+      "license": "ISC",
+      "peer": true,
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/which-typed-array": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
@@ -4637,6 +5475,14 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
+    "node_modules/window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/wordwrap": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
@@ -4705,6 +5551,27 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/yargs": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.5.4.tgz",
+      "integrity": "sha512-5j382E4xQSs71p/xZQsU1PtRA2HXPAjX0E0DkoGLxwNASMOKX6A9doV1NrZmj85u2Pjquz402qonBzz/yLPbPA==",
+      "license": "MIT/X11",
+      "dependencies": {
+        "camelcase": "^1.0.2",
+        "decamelize": "^1.0.0",
+        "window-size": "0.1.0",
+        "wordwrap": "0.0.2"
+      }
+    },
+    "node_modules/yargs/node_modules/wordwrap": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+      "integrity": "sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==",
+      "license": "MIT/X11",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -4716,6 +5583,12 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zlib-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/zlib-browserify/-/zlib-browserify-0.0.1.tgz",
+      "integrity": "sha512-fheIDCKXU0YAGZMv4FFwVTBMQRSv2ZjNqRN1VkZjetZDK/BC/hViEhasTh0kTeogcsIAl5gYE04GN53trT+cFw==",
+      "license": "MIT"
     }
   }
 }
--- a/package.json	Wed Sep 04 17:32:50 2024 +0200
+++ b/package.json	Thu Oct 17 00:58:24 2024 +0200
@@ -1,7 +1,7 @@
 {
   "name": "metadataplayer",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.1.0",
   "type": "module",
   "files": [
     "dist"
@@ -27,18 +27,22 @@
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
+    "@vimeo/player": "^2.24.0",
     "backbone": "^1.6.0",
     "backbone-relational": "^0.10.0",
     "jquery": "^3.7.1",
     "jquery-ui": "^1.14.0",
     "jwplayer": "^1.0.3",
     "lodash": "^4.17.21",
+    "mime-types": "^2.1.35",
     "mousetrap": "^1.6.5",
     "mousetrap-global-bind": "^1.1.0",
     "mustache": "^4.2.0",
     "paper": "^0.12.18",
     "popcorn-js": "github:menismu/popcorn-js",
     "processing": "^0.2.0",
-    "raphael": "^2.3.0"
+    "raphael": "^2.3.0",
+    "videojs": "^1.0.0",
+    "videojs-youtube": "^3.0.1"
   }
 }
--- a/src/js/widgets-container/defaults.js	Wed Sep 04 17:32:50 2024 +0200
+++ b/src/js/widgets-container/defaults.js	Thu Oct 17 00:58:24 2024 +0200
@@ -1,3 +1,5 @@
+import { VideojsPlayer } from "../../widgets/VideojsPlayer";
+
 /* Start of defaults.js */
 export default function (IriSP) {
 
@@ -126,6 +128,9 @@
     Shortcuts: {
       requires: ["mousetrap", "mousetrapGlobal"],
     },
+    VideojsPlayer: {
+      requires: ["videojs", "videojs-youtube", "videojs-vimeo"]
+    }
   };
 
   defaults.guiDefaults = {
--- a/src/js/widgets-container/widget.js	Wed Sep 04 17:32:50 2024 +0200
+++ b/src/js/widgets-container/widget.js	Thu Oct 17 00:58:24 2024 +0200
@@ -327,8 +327,8 @@
 
     //Generates uid
     //source : http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
-    generateUid() {
-      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+    generateUid(sep="-") {
+      return `xxxxxxxx${sep}xxxx${sep}4xxx${sep}yxxx${sep}xxxxxxxxxxxx`.replace(
         /[xy]/g,
         function (c) {
           var r = (Math.random() * 16) | 0,
--- a/src/widgets/AdaptivePlayer.js	Wed Sep 04 17:32:50 2024 +0200
+++ b/src/widgets/AdaptivePlayer.js	Thu Oct 17 00:58:24 2024 +0200
@@ -8,7 +8,7 @@
     static defaults = {
       mime_type: 'video/mp4; codecs="avc1.42E01E"',
       normal_player: "HtmlPlayer",
-      fallback_player: "HtmlPlayer",
+      fallback_player: "VideojsPlayer",
     };
 
     draw() {
--- a/src/widgets/Annotation.js	Wed Sep 04 17:32:50 2024 +0200
+++ b/src/widgets/Annotation.js	Thu Oct 17 00:58:24 2024 +0200
@@ -1,6 +1,8 @@
 // TODO: Migrate Timeupdate functions to Extract
 import annotationStyles from "./Annotation.module.css";
 
+import jQuery from "jquery";
+
 // Annotation class
 const Annotation = function (ns) {
   return class extends ns.Widgets.Widget {
@@ -132,10 +134,10 @@
           _tags.forEach(function (_tag) {
             var _trimmedTitle = _tag.title.replace(/(^\s+|\s+$)/g, "");
             if (_trimmedTitle) {
-              var _el = IriSP.jQuery(
+              var _el = jQuery(
                 '<li class="Ldt-Annotation-TagLabel"></li>'
-              ).append(IriSP.jQuery("<span>").text(_trimmedTitle));
-              _el.click(function () {
+              ).append(jQuery("<span>").text(_trimmedTitle));
+              _el.on("click",function () {
                 if (_this.search_on_tag_click) {
                   _this.source.getAnnotations().search(_trimmedTitle);
                 }
--- a/src/widgets/Arrow.js	Wed Sep 04 17:32:50 2024 +0200
+++ b/src/widgets/Arrow.js	Thu Oct 17 00:58:24 2024 +0200
@@ -114,7 +114,9 @@
     }
 
     moveToTime(_t) {
-      this.moveToX((this.width * _t) / this.media.duration);
+      if (this.media) {
+        this.moveToX((this.width * _t) / this.media.duration);
+      }
     }
 
     increment() {
--- a/src/widgets/AutoPlayer.js	Wed Sep 04 17:32:50 2024 +0200
+++ b/src/widgets/AutoPlayer.js	Thu Oct 17 00:58:24 2024 +0200
@@ -28,10 +28,6 @@
         _opts = {},
         _types = [
           {
-            regexp: /^rtmp:\/\//,
-            type: "JwpPlayer",
-          },
-          {
             regexp: /\.(mp4|m4v|mp3)$/,
             type: "AdaptivePlayer",
           },
@@ -41,23 +37,24 @@
           },
           {
             regexp: /^(https?:\/\/)?(www\.)?youtube\.com/,
-            type: "PopcornPlayer",
+            type: "VideojsPlayer",
           },
           {
             regexp: /^(https?:\/\/)?(www\.)?vimeo\.com/,
-            type: "PopcornPlayer",
+            type: "VideojsPlayer",
           },
           {
             regexp: /^(https?:\/\/)?(www\.)?dailymotion\.com/,
             type: "DailymotionPlayer",
           },
-        ],
-        _rtmprgx = /^rtmp:\/\//;
+        ]
 
-      for (var i = 0; i < _types.length; i++) {
-        if (this.video && _types[i].regexp.test(this.video.toLowerCase())) {
-          _opts.type = _types[i].type;
-          break;
+      if(this.video) {
+        for (var i = 0; i < _types.length; i++) {
+          if (_types[i].regexp.test(this.video.toLowerCase())) {
+            _opts.type = _types[i].type;
+            break;
+          }
         }
       }
 
@@ -72,11 +69,6 @@
         _opts.type = _canPlayType !== "no" ? "HtmlPlayer" : "JwpPlayer";
       }
 
-      if (_rtmprgx.test(this.video)) {
-        _opts.provider = "rtmp";
-        _opts.live = true;
-      }
-
       for (var i = 0; i < _props.length; i++) {
         if (typeof this[_props[i]] !== "undefined") {
           _opts[_props[i]] = this[_props[i]];
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/VideojsPlayer.js	Thu Oct 17 00:58:24 2024 +0200
@@ -0,0 +1,176 @@
+// VideojsPlayer
+import "videojs-youtube/dist/Youtube.js";
+import Vimeo from './videojs_plugins/Vimeo.js';
+import videojs from "video.js";
+
+import videojsStyles from "./VideojsPlayer.module.css";
+import mime from "mime-types";
+
+const alternative_types = [{ 
+    regex:/^(https?:\/\/)?((?:www|m)\.)?(?:youtube(?:-nocookie)?\.com|youtu.be)/,
+    type: "video/youtube"
+  }, {
+    regex:/^(https?:\/\/)?(www\.)?vimeo\.com/,
+    type: "video/vimeo"
+  }
+]
+
+const VideojsPlayerWidget = function (ns) {
+  return class extends ns.Widgets.Widget {
+    constructor(player, config) {
+      super(player, config);
+    }
+
+    static defaults = {};
+
+    draw() {
+      var _opts = { techOrder: [ 'html5', 'Youtube', 'Vimeo'] },
+        _seekPause = false,
+        _pauseState = true;
+
+      if (typeof this.video === "undefined") {
+        this.video = this.media.video;
+      }
+
+      let type = mime.lookup(this.video);
+
+      if(!type) {
+        for(const tdef of alternative_types) {
+          if(tdef.regex.test(this.video)) {
+            type = tdef.type;
+            break;
+          }
+        }
+      }
+      _opts.src = { type: type || false, src:this.video };
+      _opts.controls = false;
+      _opts.width = this.width;
+      if (this.height) {
+        _opts.height = this.height;
+      }
+
+      if (this.autostart) {
+        // There seems to be an autostart bug
+        _opts.autostart = true;
+//        _pauseState = false;
+//        this.media.trigger("play");
+      }
+
+      if (this.url_transform) {
+        _opts.src.src = this.url_transform(_opts.src.src);
+      }
+
+      // Binding functions to jwplayer
+      if(!this.media) {
+        return;
+      }
+      var _media = this.media;
+      const videoId = `video_${this.generateUid("_")}`;
+      this.$.append(`<video class="video-js" id="${videoId}"><source type="${_opts.src.type || 'video/mp4'}" src="${_opts.src.src}"></source></video>`)
+      const _player = videojs(videoId, _opts);
+
+      _media.on("setcurrenttime", function (_milliseconds) {
+        _seekPause = _pauseState;
+        _player.currentTime(_milliseconds/1000);
+      });
+
+      _media.on("setvolume", function (_vol) {
+        _player.volume(_vol);
+        _media.volume = _vol;
+      });
+
+      _media.on("setmuted", function (_muted) {
+        _player.muted(_muted);
+
+        _media.muted = _muted;
+      });
+
+      _media.on("setplay", function () {
+        _player.play();
+        _media.paused = false;
+      });
+
+      _media.on("setpause", function () {
+        _player.pause();
+        _media.paused = true;
+      });
+
+      // Binding jwplater events to media
+
+      function getVolume() {
+        _media.muted = _player.muted();
+        _media.volume = _player.volume();
+      }
+
+      _player.on("timeupdate", function() {
+        _media.trigger(
+          "timeupdate",
+          new ns.Model.Time(_player.currentTime()*1000)
+        );
+      })
+
+      _player.ready(function () {
+        _media.trigger(
+          "timeupdate",
+          new ns.Model.Time(_player.currentTime()*1000)
+        );
+        _pauseState = _player.paused();
+        _media.paused = _player.paused();
+        _media.trigger("loadedmetadata");
+        
+      });
+
+      _player.on("pause", function() {
+        _pauseState = true;
+        _media.trigger("pause");
+      })
+
+      _player.on("play", function() {
+        _pauseState = false;
+        _media.trigger("play");
+      })
+
+      videojs.use("*", function (player) {
+        return {
+          play: function (terminated, value) {
+            _pauseState = false;
+            _media.trigger("play");
+            return value;
+          },
+          setCurrentTime: function (value) {
+            if (_seekPause) {
+              _player.pause();
+              _seekPause = false;
+            } else {
+              if (_pauseState && !_player.paused()) {
+                _pauseState = false;
+                _media.trigger("play");
+              }
+            }
+            _media.trigger("timeupdate", new ns.Model.Time(value));
+            return value;
+          },
+          pause: function (terminated, value) {
+            _pauseState = true;
+            _media.trigger("pause");
+            return value;
+          },
+          setMuted: function (value) {
+            _media.muted = value;
+            _media.trigger("volumechange");
+            return value;
+          },
+          setVolume: function (value) {
+            _media.volume = value;
+            _media.trigger("volumechange");
+            return value;
+          },
+        };
+      });
+
+      this.videojsPlayer = _player;
+    }
+  };
+};
+
+export { VideojsPlayerWidget as VideojsPlayer, videojsStyles, Vimeo };
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/VideojsPlayer.module.css	Thu Oct 17 00:58:24 2024 +0200
@@ -0,0 +1,1 @@
+@import "video.js/dist/video-js.css"
\ No newline at end of file
--- a/src/widgets/index.js	Wed Sep 04 17:32:50 2024 +0200
+++ b/src/widgets/index.js	Thu Oct 17 00:58:24 2024 +0200
@@ -43,6 +43,7 @@
 import { Tweet, tweetStyles } from "./Tweet";
 import { AutoPlayer } from "./AutoPlayer";
 import { MultiSegments } from "./MultiSegments";
+import { VideojsPlayer, videojsStyles } from "./VideojsPlayer";
 
 export default function (ns) {
   return {
@@ -93,6 +94,7 @@
     Tooltip: Tooltip(ns),
     Transcript: Transcript(ns),
     Tweet: Tweet(ns),
+    VideojsPlayer: VideojsPlayer(ns),
     styles: {
       annotationStyles,
       helloWorldStyles,
@@ -126,6 +128,7 @@
       tooltipStyles,
       transcriptStyles,
       tweetStyles,
+      videojsStyles,
     }
   };
 }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/widgets/videojs_plugins/Vimeo.js	Thu Oct 17 00:58:24 2024 +0200
@@ -0,0 +1,285 @@
+import videojs from 'video.js';
+import VimeoPlayer from '@vimeo/player';
+
+let cssInjected = false;
+
+// Since the iframe can't be touched using Vimeo's way of embedding,
+// let's add a new styling rule to have the same style as `vjs-tech`
+function injectCss() {
+  if (cssInjected) {
+    return;
+  }
+  cssInjected = true;
+  const css = `
+    .vjs-vimeo iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+  const head = document.head || document.getElementsByTagName('head')[0];
+
+  const style = document.createElement('style');
+
+  style.type = 'text/css';
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+
+  head.appendChild(style);
+}
+
+const Tech = videojs.getTech('Tech');
+
+/**
+ * Vimeo - Wrapper for Video Player API
+ *
+ * @param {Object=} options Object of option names and values
+ * @param {Function=} ready Ready callback function
+ * @extends Tech
+ * @class Vimeo
+ */
+class Vimeo extends Tech {
+  constructor(options, ready) {
+    super(options, ready);
+    injectCss();
+    this.setPoster(options.poster);
+    this.initVimeoPlayer();
+  }
+
+  initVimeoPlayer() {
+    const options = this.options({});
+    const vimeoOptions = {
+      url: this.options_.source.src,
+      byline: false,
+      portrait: false,
+      title: false,
+      controls: false,
+    };
+
+    if (this.options_.autoplay) {
+      vimeoOptions.autoplay = true;
+    }
+    if (typeof(this.options_.controls) != "undefined") {
+      vimeoOptions.controls = this.options_.controls;
+    }
+
+    if (this.options_.height) {
+      vimeoOptions.height = this.options_.height;
+    }
+    if (this.options_.width) {
+      vimeoOptions.width = this.options_.width;
+    }
+    if (this.options_.maxheight) {
+      vimeoOptions.maxheight = this.options_.maxheight;
+    }
+    if (this.options_.maxwidth) {
+      vimeoOptions.maxwidth = this.options_.maxwidth;
+    }
+    if (this.options_.loop) {
+      vimeoOptions.loop = this.options_.loop;
+    }
+    if (this.options_.color) {
+      vimeoOptions.color = this.options_.color.replace(/^#/, '');
+    }
+    vimeoOptions.controls = false;
+
+
+    this._player = new VimeoPlayer(this.el(), vimeoOptions);
+    this.initVimeoState();
+
+    ['play', 'pause', 'ended', 'timeupdate', 'progress', 'seeked'].forEach(e => {
+      this._player.on(e, (progress) => {
+        if (this._vimeoState.progress.duration !== progress.duration) {
+          this.trigger('durationchange');
+        }
+        this._vimeoState.progress = progress;
+        this.trigger(e);
+      });
+    });
+
+    this._player.on('pause', () => (this._vimeoState.playing = false));
+    this._player.on('play', () => {
+      this._vimeoState.playing = true;
+      this._vimeoState.ended = false;
+    });
+    this._player.on('ended', () => {
+      this._vimeoState.playing = false;
+      this._vimeoState.ended = true;
+    });
+    this._player.on('volumechange', (v) => (this._vimeoState.volume = v));
+    this._player.on('error', e => this.trigger('error', e));
+
+    this.triggerReady();
+  }
+
+  initVimeoState() {
+    const state = this._vimeoState = {
+      ended: false,
+      playing: false,
+      volume: 0,
+      progress: {
+        seconds: 0,
+        percent: 0,
+        duration: 0
+      }
+    };
+
+    this._player.getCurrentTime().then(time => (state.progress.seconds = time));
+    this._player.getDuration().then(time => (state.progress.duration = time));
+    this._player.getPaused().then(paused => (state.playing = !paused));
+    this._player.getVolume().then(volume => (state.volume = volume));
+  }
+
+  createEl() {
+    const div = videojs.dom.createEl('div', {
+      id: this.options_.techId
+    });
+
+    div.style.cssText = 'width:100%;height:100%;top:0;left:0;position:absolute';
+    div.className = 'vjs-vimeo';
+
+    return div;
+  }
+
+  controls() {
+    return true;
+  }
+
+  supportsFullScreen() {
+    return true;
+  }
+
+  src() {
+    return this.options_.source;
+  }
+
+  currentSrc() {
+    return this.options_.source.src;
+  }
+
+  currentTime() {
+    return this._vimeoState.progress.seconds;
+  }
+
+  setCurrentTime(time) {
+    this._player.setCurrentTime(time);
+  }
+
+  volume() {
+    return this._vimeoState.volume;
+  }
+
+  setVolume(volume) {
+    return this._player.setVolume(volume);
+  }
+
+  duration() {
+    return this._vimeoState.progress.duration;
+  }
+
+  buffered() {
+    const progress = this._vimeoState.progress;
+
+    return videojs.createTimeRange(0, progress.percent * progress.duration);
+  }
+
+  paused() {
+    return !this._vimeoState.playing;
+  }
+
+  pause() {
+    this._player.pause();
+  }
+
+  play() {
+    this._player.play();
+  }
+
+  muted() {
+    return this._vimeoState.volume === 0;
+  }
+
+  setMuted(muted) {
+    return this._player.setMuted(muted);
+  }
+
+  ended() {
+    return this._vimeoState.ended;
+  }
+
+  playbackRate() {
+    return 1;
+  }
+
+}
+
+Vimeo.prototype.featuresTimeupdateEvents = true;
+
+Vimeo.isSupported = function () {
+  return true;
+};
+
+// Add Source Handler pattern functions to this tech
+Tech.withSourceHandlers(Vimeo);
+
+Vimeo.nativeSourceHandler = {
+};
+
+/**
+ * Check if Vimeo can play the given videotype
+ *
+ * @param  {string} source    The mimetype to check
+ * @return {string}         'maybe', or '' (empty string)
+ */
+Vimeo.nativeSourceHandler.canPlayType = function (source) {
+  if (source === 'video/vimeo') {
+    return 'maybe';
+  }
+
+  return '';
+};
+
+/*
+ * Check Vimeo can handle the source natively
+ *
+ * @param  {Object} source  The source object
+ * @return {String}         'maybe', or '' (empty string)
+ * @note: Copied over from YouTube — not sure this is relevant
+ */
+Vimeo.nativeSourceHandler.canHandleSource = function (source) {
+  if (source.type) {
+    return Vimeo.nativeSourceHandler.canPlayType(source.type);
+  } else if (source.src) {
+    return Vimeo.nativeSourceHandler.canPlayType(source.src);
+  }
+
+  return '';
+};
+
+// @note: Copied over from YouTube — not sure this is relevant
+Vimeo.nativeSourceHandler.handleSource = function (source, tech) {
+  tech.src(source.src);
+};
+
+// @note: Copied over from YouTube — not sure this is relevant
+Vimeo.nativeSourceHandler.dispose = function () { };
+
+Vimeo.registerSourceHandler(Vimeo.nativeSourceHandler);
+
+// Older versions of VJS5 doesn't have the registerTech function
+if (typeof videojs.registerTech !== 'undefined') {
+  videojs.registerTech('Vimeo', Vimeo);
+} else {
+  videojs.registerComponent('Vimeo', Vimeo);
+}
+
+// Include the version number.
+Vimeo.VERSION = '0.0.1';
+
+export default Vimeo;
--- a/test/index.html	Wed Sep 04 17:32:50 2024 +0200
+++ b/test/index.html	Thu Oct 17 00:58:24 2024 +0200
@@ -11,13 +11,14 @@
     <body>
         <h1>Metadataplayer test configurations</h1>
         <ul class="pageindex">
-            <li><h2><a href="placeholderplayer.htm">with Placeholder Player instead of video</a></h2></li>
-            <li><h2><a href="jwplayer.htm">with JwPlayer (default on Ldt Platform, uses custom player functions)</a></h2></li>
-            <li><h2><a href="oggvideo.htm">with HTML5/OGG (compatible with Firefox and Chrome)</a></h2></li>
-            <li><h2><a href="mp4video.htm">with MP4 (HTML5 with compatible browsers, JwPlayer with others)</a></h2></li>
-            <li><h2><a href="youtube.htm">with Youtube (uses Popcorn.js and the Popcorn Youtube plugin/player)</a></h2></li>
-            <li><h2><a href="vimeo.htm">with Vimeo (uses Popcorn.js and the Popcorn Vimeo plugin/player)</a></h2></li>
-            <li><h2><a href="dailymotion.htm">with Dailymotion (uses custom player functions)</a></h2></li>
+            <li><h2><a href="placeholderplayer.html">with Placeholder Player instead of video</a></h2></li>
+            <li><h2><a href="jwplayer.html">with JwPlayer (default on Ldt Platform, uses custom player functions)</a></h2></li>
+            <li><h2><a href="oggvideo.html">with HTML5/OGG (compatible with Firefox and Chrome)</a></h2></li>
+            <li><h2><a href="mp4video.html">with MP4 (HTML5 with compatible browsers, JwPlayer with others)</a></h2></li>
+            <li><h2><a href="youtube.html">with Youtube (uses Popcorn.js and the Popcorn Youtube plugin/player)</a></h2></li>
+            <li><h2><a href="vimeo.html">with Vimeo (uses Popcorn.js and the Popcorn Vimeo plugin/player)</a></h2></li>
+            <li><h2><a href="dailymotion.html">with Dailymotion (uses custom player functions)</a></h2></li>
+            <li><h2><a href="videojs.html">with Videojs (uses custom player functions)</a></h2></li>
         </ul>
     </body>
 </html>
--- a/test/json/ldt-youtube.json	Wed Sep 04 17:32:50 2024 +0200
+++ b/test/json/ldt-youtube.json	Thu Oct 17 00:58:24 2024 +0200
@@ -1034,7 +1034,7 @@
     "medias": [
         {
             "origin": "0",
-            "url": "http://www.youtube.com/watch?v=zdOuFOTT3_I",
+            "url": "https://www.youtube.com/watch?v=fSJCcDiD-zw",
             "http://advene.liris.cnrs.fr/ns/frame_of_reference/ms": "o=0",
             "meta": {
                 "dc:contributor": "IRI",
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/videojs-dist.html	Thu Oct 17 00:58:24 2024 +0200
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>Metadataplayer test with JwPlayer</title>
+    <!--        <link href='open-sans/css/fonts.css' rel='stylesheet' type='text/css'>
+-->
+    <link href='test.css' rel='stylesheet' type='text/css'>
+    <link href="/dist/LdtPlayer-core.css" rel="stylesheet" type="text/css">
+    <link href="/src/main.module.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <h1>Metadataplayer test with Videojs</h1>
+    <div id="LdtPlayer"></div>
+    <div id="AnnotationsListContainer"></div>
+    <div id="SlideShareContainer"></div>
+    <script src="/dist/LdtPlayer-core.js" type="text/javascript"></script>
+    <script>
+      //import LdtPlayerCore from "/src/main.js";
+    IriSP.language = 'fr';
+    var _metadata = {
+//        url: 'json/ldt-jwplayer.json',
+          url: 'https://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/e2f36e5c-8b26-11e2-a28d-00145ea4a2be',
+//        url: 'http://capsicum/pf/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02',
+//        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/fc0a654e-49ea-11e2-b4ad-00145ea4a2be',
+        format: 'ldt'
+    };
+    var _config = {
+        width : 550,
+        container : 'LdtPlayer',
+        default_options: {
+            metadata: _metadata
+        },
+        widgets: [
+            {
+                type: "VideojsPlayer",
+                autostart: true,
+                url_transform: function(url) {
+                    return url.replace('/ddc_player/video/','/ddc_player/mp4:video/');
+                }
+            },
+            { type: "Slider" },
+            { type: "Controller" },
+            {
+                type: "Polemic",
+                max_elements: 20,
+                annotation_type: false
+            },
+            { type: "Sparkline" },
+            { type: "MultiSegments" },
+            {
+                type: "CreateAnnotation",
+                api_endpoint_template: "post-test.php",
+                creator_name: "Metadataplayer",
+                creator_avatar: "https://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png",
+                tag_titles: ["amateur", "digital-humanities"],
+                //show_title_field: false,
+                //show_creator_field: false,
+                show_slice: false
+            },
+            {
+                type: "Tweet"
+            },
+            {
+                type: "Tagcloud"
+            },
+            {
+                type: "AnnotationsList",
+                container: "AnnotationsListContainer",
+                default_thumbnail : "https://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+                //ajax_url: "/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",
+                //ajax_granularity : 300000
+            },
+            // {
+            //     type: "Slideshare",
+            //     container: "SlideShareContainer"
+            // },
+            { type: "Mediafragment"},
+//            { type: "Trace",
+//            js_console: true }
+        ]
+    };
+    
+    var _myPlayer = new IriSP.Metadataplayer(_config);
+    </script>
+  </body>
+</html>
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/videojs-vimeo-dist.html	Thu Oct 17 00:58:24 2024 +0200
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <title>Metadataplayer test with JwPlayer</title>
+    <!--        <link href='open-sans/css/fonts.css' rel='stylesheet' type='text/css'>
+-->
+    <link href="test.css" rel="stylesheet" type="text/css" />
+    <link href="/dist/LdtPlayer-core.css" rel="stylesheet" type="text/css" />
+    <link href="/src/main.module.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Metadataplayer test with JwPlayer</h1>
+    <div id="LdtPlayer"></div>
+    <div id="AnnotationsListContainer"></div>
+    <div id="SlideShareContainer"></div>
+    <script src="/dist/LdtPlayer-core.js" type="text/javascript"></script>
+    <script>
+      IriSP.language = "fr";
+      var _metadata = {
+        url: "json/ldt-vimeo.json",
+        //url: "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/8f7e4b42-4838-11e2-ac61-00145ea4a2be",
+        //        url: 'http://capsicum/pf/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02',
+        //        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/fc0a654e-49ea-11e2-b4ad-00145ea4a2be',
+        format: "ldt",
+      };
+      var _config = {
+        width: 550,
+        container: "LdtPlayer",
+        default_options: {
+          metadata: _metadata,
+        },
+        widgets: [
+          {
+            type: "VideojsPlayer",
+            autostart: true,
+            url_transform: function (url) {
+              return url.replace(
+                "/ddc_player/video/",
+                "/ddc_player/mp4:video/"
+              );
+            },
+          },
+          { type: "Slider" },
+          { type: "Controller" },
+          {
+            type: "Polemic",
+            max_elements: 20,
+            annotation_type: false,
+          },
+          { type: "Sparkline" },
+          { type: "MultiSegments" },
+          {
+            type: "CreateAnnotation",
+            api_endpoint_template: "post-test.php",
+            creator_name: "Metadataplayer",
+            creator_avatar:
+              "https://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png",
+            tag_titles: ["amateur", "digital-humanities"],
+            //show_title_field: false,
+            //show_creator_field: false,
+            show_slice: false,
+          },
+          {
+            type: "Tweet",
+          },
+          {
+            type: "Tagcloud",
+          },
+          {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer",
+            default_thumbnail:
+              "https://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+            //ajax_url: "/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",
+            //ajax_granularity : 300000
+          },
+          // {
+          //     type: "Slideshare",
+          //     container: "SlideShareContainer"
+          // },
+          { type: "Mediafragment" },
+          //            { type: "Trace",
+          //            js_console: true }
+        ],
+      };
+
+      var _myPlayer = new IriSP.Metadataplayer(_config);
+    </script>
+  </body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/videojs-vimeo.html	Thu Oct 17 00:58:24 2024 +0200
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <title>Metadataplayer test with JwPlayer</title>
+    <!--        <link href='open-sans/css/fonts.css' rel='stylesheet' type='text/css'>
+-->
+    <link href="test.css" rel="stylesheet" type="text/css" />
+    <link href="/src/main.module.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Metadataplayer test with JwPlayer</h1>
+    <div id="LdtPlayer"></div>
+    <div id="AnnotationsListContainer"></div>
+    <div id="SlideShareContainer"></div>
+    <script type="module">
+      import LdtPlayerCore from "/src/main.js";
+      IriSP.language = "fr";
+      var _metadata = {
+        url: "json/ldt-vimeo.json",
+        //url: "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/8f7e4b42-4838-11e2-ac61-00145ea4a2be",
+        //        url: 'http://capsicum/pf/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02',
+        //        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/fc0a654e-49ea-11e2-b4ad-00145ea4a2be',
+        format: "ldt",
+      };
+      var _config = {
+        width: 550,
+        container: "LdtPlayer",
+        default_options: {
+          metadata: _metadata,
+        },
+        widgets: [
+          {
+            type: "VideojsPlayer",
+            autostart: true,
+            url_transform: function (url) {
+              return url.replace(
+                "/ddc_player/video/",
+                "/ddc_player/mp4:video/"
+              );
+            },
+          },
+          { type: "Slider" },
+          { type: "Controller" },
+          {
+            type: "Polemic",
+            max_elements: 20,
+            annotation_type: false,
+          },
+          { type: "Sparkline" },
+          { type: "MultiSegments" },
+          {
+            type: "CreateAnnotation",
+            api_endpoint_template: "post-test.php",
+            creator_name: "Metadataplayer",
+            creator_avatar:
+              "https://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png",
+            tag_titles: ["amateur", "digital-humanities"],
+            //show_title_field: false,
+            //show_creator_field: false,
+            show_slice: false,
+          },
+          {
+            type: "Tweet",
+          },
+          {
+            type: "Tagcloud",
+          },
+          {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer",
+            default_thumbnail:
+              "https://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+            //ajax_url: "/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",
+            //ajax_granularity : 300000
+          },
+          // {
+          //     type: "Slideshare",
+          //     container: "SlideShareContainer"
+          // },
+          { type: "Mediafragment" },
+          //            { type: "Trace",
+          //            js_console: true }
+        ],
+      };
+
+      var _myPlayer = new IriSP.Metadataplayer(_config);
+    </script>
+  </body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/videojs-youtube-dist.html	Thu Oct 17 00:58:24 2024 +0200
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <title>Metadataplayer test with JwPlayer</title>
+    <!--        <link href='open-sans/css/fonts.css' rel='stylesheet' type='text/css'>
+-->
+    <link href="test.css" rel="stylesheet" type="text/css" />
+    <link href="/dist/LdtPlayer-core.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Metadataplayer test with JwPlayer</h1>
+    <div id="LdtPlayer"></div>
+    <div id="AnnotationsListContainer"></div>
+    <div id="SlideShareContainer"></div>
+    <script src="/dist/LdtPlayer-core.js" type="text/javascript"></script>
+    <script>
+      IriSP.language = "fr";
+      var _metadata = {
+        url: "json/ldt-youtube.json",
+        //url: "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/8f7e4b42-4838-11e2-ac61-00145ea4a2be",
+        //        url: 'http://capsicum/pf/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02',
+        //        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/fc0a654e-49ea-11e2-b4ad-00145ea4a2be',
+        format: "ldt",
+      };
+      var _config = {
+        width: 550,
+        container: "LdtPlayer",
+        default_options: {
+          metadata: _metadata,
+        },
+        widgets: [
+          {
+            type: "VideojsPlayer",
+            autostart: true,
+            url_transform: function (url) {
+              return url.replace(
+                "/ddc_player/video/",
+                "/ddc_player/mp4:video/"
+              );
+            },
+          },
+          { type: "Slider" },
+          { type: "Controller" },
+          {
+            type: "Polemic",
+            max_elements: 20,
+            annotation_type: false,
+          },
+          { type: "Sparkline" },
+          { type: "MultiSegments" },
+          {
+            type: "CreateAnnotation",
+            api_endpoint_template: "post-test.php",
+            creator_name: "Metadataplayer",
+            creator_avatar:
+              "https://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png",
+            tag_titles: ["amateur", "digital-humanities"],
+            //show_title_field: false,
+            //show_creator_field: false,
+            show_slice: false,
+          },
+          {
+            type: "Tweet",
+          },
+          {
+            type: "Tagcloud",
+          },
+          {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer",
+            default_thumbnail:
+              "https://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+            //ajax_url: "/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",
+            //ajax_granularity : 300000
+          },
+          // {
+          //     type: "Slideshare",
+          //     container: "SlideShareContainer"
+          // },
+          { type: "Mediafragment" },
+          //            { type: "Trace",
+          //            js_console: true }
+        ],
+      };
+
+      var _myPlayer = new IriSP.Metadataplayer(_config);
+    </script>
+  </body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/videojs-youtube.html	Thu Oct 17 00:58:24 2024 +0200
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <title>Metadataplayer test with JwPlayer</title>
+    <!--        <link href='open-sans/css/fonts.css' rel='stylesheet' type='text/css'>
+-->
+    <link href="test.css" rel="stylesheet" type="text/css" />
+    <link href="/src/main.module.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Metadataplayer test with JwPlayer</h1>
+    <div id="LdtPlayer"></div>
+    <div id="AnnotationsListContainer"></div>
+    <div id="SlideShareContainer"></div>
+    <script type="module">
+      import LdtPlayerCore from "/src/main.js";
+      IriSP.language = "fr";
+      var _metadata = {
+        url: "json/ldt-youtube.json",
+        //url: "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/8f7e4b42-4838-11e2-ac61-00145ea4a2be",
+        //        url: 'http://capsicum/pf/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02',
+        //        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/fc0a654e-49ea-11e2-b4ad-00145ea4a2be',
+        format: "ldt",
+      };
+      var _config = {
+        width: 550,
+        container: "LdtPlayer",
+        default_options: {
+          metadata: _metadata,
+        },
+        widgets: [
+          {
+            type: "VideojsPlayer",
+            autostart: true,
+            url_transform: function (url) {
+              return url.replace(
+                "/ddc_player/video/",
+                "/ddc_player/mp4:video/"
+              );
+            },
+          },
+          { type: "Slider" },
+          { type: "Controller" },
+          {
+            type: "Polemic",
+            max_elements: 20,
+            annotation_type: false,
+          },
+          { type: "Sparkline" },
+          { type: "MultiSegments" },
+          {
+            type: "CreateAnnotation",
+            api_endpoint_template: "post-test.php",
+            creator_name: "Metadataplayer",
+            creator_avatar:
+              "https://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png",
+            tag_titles: ["amateur", "digital-humanities"],
+            //show_title_field: false,
+            //show_creator_field: false,
+            show_slice: false,
+          },
+          {
+            type: "Tweet",
+          },
+          {
+            type: "Tagcloud",
+          },
+          {
+            type: "AnnotationsList",
+            container: "AnnotationsListContainer",
+            default_thumbnail:
+              "https://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+            //ajax_url: "/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",
+            //ajax_granularity : 300000
+          },
+          // {
+          //     type: "Slideshare",
+          //     container: "SlideShareContainer"
+          // },
+          { type: "Mediafragment" },
+          //            { type: "Trace",
+          //            js_console: true }
+        ],
+      };
+
+      var _myPlayer = new IriSP.Metadataplayer(_config);
+    </script>
+  </body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/videojs.html	Thu Oct 17 00:58:24 2024 +0200
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta
+    http-equiv="Content-type"
+    content="text/html; charset=utf-8"
+  >
+    <title>Metadataplayer test with JwPlayer</title>
+    <!--        <link href='open-sans/css/fonts.css' rel='stylesheet' type='text/css'>
+-->
+    <link href='test.css' rel='stylesheet' type='text/css'>
+    <link href="/src/main.module.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <h1>Metadataplayer test with JwPlayer</h1>
+    <div id="LdtPlayer"></div>
+    <div id="AnnotationsListContainer"></div>
+    <div id="SlideShareContainer"></div>
+    <script type="module">
+      import LdtPlayerCore from "/src/main.js";
+    IriSP.language = 'fr';
+    var _metadata = {
+//        url: 'json/ldt-jwplayer.json',
+          url: 'https://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/e2f36e5c-8b26-11e2-a28d-00145ea4a2be',
+//        url: 'http://capsicum/pf/ldtplatform/ldt/cljson/id/f1a17368-2bc8-11e1-b21a-00145ea49a02',
+//        url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/fc0a654e-49ea-11e2-b4ad-00145ea4a2be',
+        format: 'ldt'
+    };
+    var _config = {
+        width : 550,
+        container : 'LdtPlayer',
+        default_options: {
+            metadata: _metadata
+        },
+        widgets: [
+            {
+                type: "VideojsPlayer",
+                autostart: true,
+                url_transform: function(url) {
+                    return url.replace('/ddc_player/video/','/ddc_player/mp4:video/');
+                }
+            },
+            { type: "Slider" },
+            { type: "Controller" },
+            {
+                type: "Polemic",
+                max_elements: 20,
+                annotation_type: false
+            },
+            { type: "Sparkline" },
+            { type: "MultiSegments" },
+            {
+                type: "CreateAnnotation",
+                api_endpoint_template: "post-test.php",
+                creator_name: "Metadataplayer",
+                creator_avatar: "https://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png",
+                tag_titles: ["amateur", "digital-humanities"],
+                //show_title_field: false,
+                //show_creator_field: false,
+                show_slice: false
+            },
+            {
+                type: "Tweet"
+            },
+            {
+                type: "Tagcloud"
+            },
+            {
+                type: "AnnotationsList",
+                container: "AnnotationsListContainer",
+                default_thumbnail : "https://ldt.iri.centrepompidou.fr/static/site/ldt/css/imgs/video_sequence.png",
+                //ajax_url: "/pf/ldtplatform/api/ldt/1.0/segments/bytimecode/{{media}}/{{begin}}/{{end}}",
+                //ajax_granularity : 300000
+            },
+            // {
+            //     type: "Slideshare",
+            //     container: "SlideShareContainer"
+            // },
+            { type: "Mediafragment"},
+//            { type: "Trace",
+//            js_console: true }
+        ]
+    };
+    
+    var _myPlayer = new IriSP.Metadataplayer(_config);
+    </script>
+  </body>
+</html>
\ No newline at end of file