From 3f3e5e6da5ce13f4d955e4a13d9a23bc9d8f0e63 Mon Sep 17 00:00:00 2001 From: Andrew Mahone Date: Fri, 27 Sep 2019 10:52:15 -0400 Subject: [PATCH 1/5] Use JavascriptSubtitlesOctopus if canvas and web workers are available. --- package.json | 3 +- src/bundle.js | 4 +++ src/components/htmlvideoplayer/plugin.js | 40 +++++++++++++++++++++++- src/components/htmlvideoplayer/style.css | 4 +++ webpack.common.js | 17 +++++++--- 5 files changed, 62 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index bcbdd3dacc..0a3cd85085 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "libjass": "^0.11.0", "shaka-player": "^2.5.5", "sortablejs": "^1.9.0", - "swiper": "^3.4.2" + "swiper": "^3.4.2", + "libass-wasm": "^2.1.1" }, "scripts": { "serve": "webpack-dev-server --config webpack.dev.js --open", diff --git a/src/bundle.js b/src/bundle.js index 86e10aab7d..cf01bc5f1c 100644 --- a/src/bundle.js +++ b/src/bundle.js @@ -42,3 +42,7 @@ _define("sortable", function() { return sortable; }); var libjass = require("libjass"); require("libjass/libjass.css"); _define("libjass", function() { return libjass; }); + +// libass-wasm +var libass_wasm = require("libass-wasm"); +_define("JavascriptSubtitlesOctopus", function() { return libass_wasm; }); diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index 27e02349c0..938668ef72 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -27,6 +27,14 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa return _supportsTextTracks; } + function supportsCanvas() { + return !!document.createElement('canvas').getContext; + } + + function supportsWebWorkers() { + return !!window.Worker; + } + function enableNativeTrackSupport(currentSrc, track) { if (track) { @@ -185,6 +193,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa var lastCustomTrackMs = 0; var currentClock; + var currentSubtitlesOctopus; var currentAssRenderer; var customTrackIndex = -1; @@ -960,6 +969,12 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa currentClock = null; self._currentAspectRatio = null; + var octopus = currentSubtitlesOctopus; + if (octopus) { + octopus.dispose(); + } + currentSubtitlesOctopus = null; + var renderer = currentAssRenderer; if (renderer) { renderer.setEnabled(false); @@ -1024,6 +1039,21 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa lastCustomTrackMs = 0; } + function renderWithSubtitlesOctopus(videoElement, track, item) { + var options = { + video: videoElement, + subUrl: getTextTrackUrl(track, item), + fonts: [], + workerUrl: appRouter.baseUrl() + "/JavascriptSubtitlesOctopus/subtitles-octopus-worker.js", + onError: function() { + htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror') + } + }; + require(['JavascriptSubtitlesOctopus'], function(SubtitlesOctopus) { + currentSubtitlesOctopus = new SubtitlesOctopus(options); + }); + } + function renderWithLibjass(videoElement, track, item) { var rendererSettings = {}; @@ -1071,6 +1101,14 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa }); } + function renderSsaAss(videoElement, track, item) { + if (supportsCanvas() && supportsWebWorkers()) { + renderWithSubtitlesOctopus(videoElement, track, item); + } else { + renderWithLibjass(videoElement, track, item); + } + } + function onVideoResize() { if (browser.iOS) { // the new sizes will be delayed for about 500ms with wkwebview @@ -1181,7 +1219,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa var format = (track.Codec || '').toLowerCase(); if (format === 'ssa' || format === 'ass') { // libjass is needed here - renderWithLibjass(videoElement, track, item); + renderSsaAss(videoElement, track, item); return; } diff --git a/src/components/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css index 9550f2c873..32c090eeae 100644 --- a/src/components/htmlvideoplayer/style.css +++ b/src/components/htmlvideoplayer/style.css @@ -24,6 +24,10 @@ z-index: 1000; } +.videoPlayerContainer .libassjs-canvas-parent { + order: -1; +} + video::-webkit-media-controls { display: none !important; } diff --git a/webpack.common.js b/webpack.common.js index 05b2b0cb46..00b3d0dea8 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -10,9 +10,18 @@ module.exports = { ] }, plugins: [ - new CopyPlugin([{ - from: "**/*", - to: "." - }]) + new CopyPlugin([ + { + from: "**/*", + to: "." + }, + { + from: "../node_modules/libass-wasm/dist/subtitles-octopus-worker.*", + to: "JavascriptSubtitlesOctopus", + transformPath(targetPath, absolutePath) { + return Promise.resolve(path.join("JavascriptSubtitlesOctopus", path.basename(targetPath))); + } + } + ]) ] }; From 6eed80c863416ff54f13fa64b9d08c6e524f6b14 Mon Sep 17 00:00:00 2001 From: Andrew Mahone Date: Tue, 22 Oct 2019 12:07:43 -0400 Subject: [PATCH 2/5] Use embedded fonts with JavascriptSubtitlesOctopus renderer. --- src/components/htmlvideoplayer/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index 938668ef72..ca081e6d50 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -1043,7 +1043,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa var options = { video: videoElement, subUrl: getTextTrackUrl(track, item), - fonts: [], + fonts: self._currentPlayOptions.mediaSource.MediaAttachments.map(i => i.DeliveryUrl), workerUrl: appRouter.baseUrl() + "/JavascriptSubtitlesOctopus/subtitles-octopus-worker.js", onError: function() { htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror') From 1abc7283ab4a2a9fd7c4768bd550a49651b44d35 Mon Sep 17 00:00:00 2001 From: Andrew Mahone Date: Mon, 28 Oct 2019 09:49:43 -0400 Subject: [PATCH 3/5] Remove use of transformPath when copying libass worker files. --- src/components/htmlvideoplayer/plugin.js | 2 +- webpack.common.js | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index ca081e6d50..19e3a365fa 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -1044,7 +1044,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa video: videoElement, subUrl: getTextTrackUrl(track, item), fonts: self._currentPlayOptions.mediaSource.MediaAttachments.map(i => i.DeliveryUrl), - workerUrl: appRouter.baseUrl() + "/JavascriptSubtitlesOctopus/subtitles-octopus-worker.js", + workerUrl: appRouter.baseUrl() + "/node_modules/libass-wasm/dist/subtitles-octopus-worker.js", onError: function() { htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror') } diff --git a/webpack.common.js b/webpack.common.js index 00b3d0dea8..26a38394cf 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -16,11 +16,8 @@ module.exports = { to: "." }, { - from: "../node_modules/libass-wasm/dist/subtitles-octopus-worker.*", - to: "JavascriptSubtitlesOctopus", - transformPath(targetPath, absolutePath) { - return Promise.resolve(path.join("JavascriptSubtitlesOctopus", path.basename(targetPath))); - } + context: path.resolve(__dirname), + from: "node_modules/libass-wasm/dist/subtitles-octopus-worker.*", } ]) ] From 0880f36dabc6bbd6c74d313e8e86ffd463f858ad Mon Sep 17 00:00:00 2001 From: Andrew Mahone Date: Fri, 8 Nov 2019 08:38:21 -0500 Subject: [PATCH 4/5] Fallback to empty fonts list when server doesn't send MediaAttachments. --- src/components/htmlvideoplayer/plugin.js | 3 ++- yarn.lock | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index 74cb0c4bf1..d040c03bda 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -1038,10 +1038,11 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa } function renderWithSubtitlesOctopus(videoElement, track, item) { + var attachments = self._currentPlayOptions.mediaSource.MediaAttachments || []; var options = { video: videoElement, subUrl: getTextTrackUrl(track, item), - fonts: self._currentPlayOptions.mediaSource.MediaAttachments.map(i => i.DeliveryUrl), + fonts: attachments.map(i => i.DeliveryUrl), workerUrl: appRouter.baseUrl() + "/node_modules/libass-wasm/dist/subtitles-octopus-worker.js", onError: function() { htmlMediaHelper.onErrorInternal(self, 'mediadecodeerror') diff --git a/yarn.lock b/yarn.lock index cb8cd3e4f4..074c848cf7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2510,6 +2510,11 @@ levn@^0.3.0, levn@~0.3.0: prelude-ls "~1.1.2" type-check "~0.3.2" +libass-wasm@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/libass-wasm/-/libass-wasm-2.1.1.tgz#f12f4fdb9579dd422dcbc348bc3bd61097f4d07d" + integrity sha512-d45bHQ7tFVsLW3QstQDrDog2m+0D6Cja4GTrkGi70R9A5+aeLunPSUz3G4CVB+sKffNgiWjK4QI5NZLHQKZ9oQ== + libjass@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/libjass/-/libjass-0.11.0.tgz#bff1f464a2428c3bddfb68e4503b2d52afe3d6e6" From 1be3b13ba0e753e99cde32542853309fa7d06943 Mon Sep 17 00:00:00 2001 From: dkanada Date: Sat, 28 Dec 2019 19:30:22 +0900 Subject: [PATCH 5/5] add logging for libjass usage --- src/components/htmlvideoplayer/plugin.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/htmlvideoplayer/plugin.js b/src/components/htmlvideoplayer/plugin.js index 5b56649011..a8d1b15f85 100644 --- a/src/components/htmlvideoplayer/plugin.js +++ b/src/components/htmlvideoplayer/plugin.js @@ -1104,6 +1104,7 @@ define(['browser', 'require', 'events', 'apphost', 'loading', 'dom', 'playbackMa if (supportsCanvas() && supportsWebWorkers()) { renderWithSubtitlesOctopus(videoElement, track, item); } else { + console.log('rendering subtitles with libjass'); renderWithLibjass(videoElement, track, item); } }