diff --git a/src/playlist-controller.js b/src/playlist-controller.js index 9f035fe07..aed3786a7 100644 --- a/src/playlist-controller.js +++ b/src/playlist-controller.js @@ -283,7 +283,24 @@ export class PlaylistController extends videojs.EventTarget { this.subtitleSegmentLoader_ = new VTTSegmentLoader(merge(segmentLoaderSettings, { loaderType: 'vtt', - featuresNativeTextTracks: this.tech_.featuresNativeTextTracks + featuresNativeTextTracks: this.tech_.featuresNativeTextTracks, + loadVttJs: () => new Promise((resolve, reject) => { + function onLoad() { + tech.off('vttjserror', onError); + resolve(); + } + + function onError() { + tech.off('vttjsloaded', onLoad); + reject(); + } + + tech.one('vttjsloaded', onLoad); + tech.one('vttjserror', onError); + + // safe to call multiple times, script will be loaded only once: + tech.addWebVttScript_(); + }) }), options); this.setupSegmentLoaderListeners_(); diff --git a/src/videojs-http-streaming.js b/src/videojs-http-streaming.js index 2bd8f158a..08561a45d 100644 --- a/src/videojs-http-streaming.js +++ b/src/videojs-http-streaming.js @@ -1223,16 +1223,25 @@ const VhsSourceHandler = { tech.vhs.src(source.src, source.type); return tech.vhs; }, - canPlayType(type, options = {}) { - const { - vhs: { overrideNative = !videojs.browser.IS_ANY_SAFARI } = {} - } = merge(videojs.options, options); + canPlayType(type, options) { + const simpleType = simpleTypeFromSourceType(type); - const supportedType = simpleTypeFromSourceType(type); - const canUseMsePlayback = supportedType && - (!Vhs.supportsTypeNatively(supportedType) || overrideNative); + if (!simpleType) { + return ''; + } + + const overrideNative = VhsSourceHandler.getOverrideNative(options); + const supportsTypeNatively = Vhs.supportsTypeNatively(simpleType); + const canUseMsePlayback = !supportsTypeNatively || overrideNative; return canUseMsePlayback ? 'maybe' : ''; + }, + getOverrideNative(options = {}) { + const { vhs = {} } = options; + const defaultOverrideNative = !(videojs.browser.IS_ANY_SAFARI || videojs.browser.IS_IOS); + const { overrideNative = defaultOverrideNative } = vhs; + + return overrideNative; } }; diff --git a/src/vtt-segment-loader.js b/src/vtt-segment-loader.js index 0d04a7516..9f3337465 100644 --- a/src/vtt-segment-loader.js +++ b/src/vtt-segment-loader.js @@ -14,6 +14,12 @@ import {createTimeRanges} from './util/vjs-compat'; const VTT_LINE_TERMINATORS = new Uint8Array('\n\n'.split('').map(char => char.charCodeAt(0))); +class NoVttJsError extends Error { + constructor() { + super('Trying to parse received VTT cues, but there is no WebVTT. Make sure vtt.js is loaded.'); + } +} + /** * An object that manages segment loading and appending. * @@ -35,6 +41,8 @@ export default class VTTSegmentLoader extends SegmentLoader { this.featuresNativeTextTracks_ = settings.featuresNativeTextTracks; + this.loadVttJs = settings.loadVttJs; + // The VTT segment will have its own time mappings. Saving VTT segment timing info in // the sync controller leads to improper behavior. this.shouldSaveSegmentTimingInfo_ = false; @@ -298,29 +306,16 @@ export default class VTTSegmentLoader extends SegmentLoader { } segmentInfo.bytes = simpleSegment.bytes; - // Make sure that vttjs has loaded, otherwise, wait till it finished loading - if (typeof window.WebVTT !== 'function' && - this.subtitlesTrack_ && - this.subtitlesTrack_.tech_) { - - let loadHandler; - const errorHandler = () => { - this.subtitlesTrack_.tech_.off('vttjsloaded', loadHandler); - this.stopForError({ - message: 'Error loading vtt.js' - }); - return; - }; - - loadHandler = () => { - this.subtitlesTrack_.tech_.off('vttjserror', errorHandler); - this.segmentRequestFinished_(error, simpleSegment, result); - }; - + // Make sure that vttjs has loaded, otherwise, load it and wait till it finished loading + if (typeof window.WebVTT !== 'function' && typeof this.loadVttJs === 'function') { this.state = 'WAITING_ON_VTTJS'; - this.subtitlesTrack_.tech_.one('vttjsloaded', loadHandler); - this.subtitlesTrack_.tech_.one('vttjserror', errorHandler); - + // should be fine to call multiple times + // script will be loaded once but multiple listeners will be added to the queue, which is expected. + this.loadVttJs() + .then( + () => this.segmentRequestFinished_(error, simpleSegment, result), + () => this.stopForError({ message: 'Error loading vtt.js' }) + ); return; } @@ -392,6 +387,8 @@ export default class VTTSegmentLoader extends SegmentLoader { /** * Uses the WebVTT parser to parse the segment response * + * @throws NoVttJsError + * * @param {Object} segmentInfo * a segment info object that describes the current segment * @private @@ -400,6 +397,11 @@ export default class VTTSegmentLoader extends SegmentLoader { let decoder; let decodeBytesToString = false; + if (typeof window.WebVTT !== 'function') { + // caller is responsible for exception handling. + throw new NoVttJsError(); + } + if (typeof window.TextDecoder === 'function') { decoder = new window.TextDecoder('utf8'); } else { diff --git a/test/playlist-controller.test.js b/test/playlist-controller.test.js index 9d9806ea6..845134af9 100644 --- a/test/playlist-controller.test.js +++ b/test/playlist-controller.test.js @@ -1,4 +1,5 @@ import QUnit from 'qunit'; +import sinon from 'sinon'; import videojs from 'video.js'; import window from 'global/window'; import { @@ -591,6 +592,24 @@ QUnit.test('resets everything for a fast quality change', function(assert) { assert.deepEqual(removeFuncArgs, {start: 0, end: 60}, 'remove() called with correct arguments if media is changed'); }); +QUnit.test('loadVttJs should be passed to the vttSegmentLoader and resolved on vttjsloaded', function(assert) { + const stub = sinon.stub(this.player.tech_, 'addWebVttScript_').callsFake(() => this.player.tech_.trigger('vttjsloaded')); + const controller = new PlaylistController({ src: 'test', tech: this.player.tech_}); + + controller.subtitleSegmentLoader_.loadVttJs().then(() => { + assert.equal(stub.callCount, 1, 'tech addWebVttScript called once'); + }); +}); + +QUnit.test('loadVttJs should be passed to the vttSegmentLoader and rejected on vttjserror', function(assert) { + const stub = sinon.stub(this.player.tech_, 'addWebVttScript_').callsFake(() => this.player.tech_.trigger('vttjserror')); + const controller = new PlaylistController({ src: 'test', tech: this.player.tech_}); + + controller.subtitleSegmentLoader_.loadVttJs().catch(() => { + assert.equal(stub.callCount, 1, 'tech addWebVttScript called once'); + }); +}); + QUnit.test('seeks in place for fast quality switch on non-IE/Edge browsers', function(assert) { let seeks = 0; diff --git a/test/videojs-http-streaming.test.js b/test/videojs-http-streaming.test.js index d0aebe22e..5c06bb993 100644 --- a/test/videojs-http-streaming.test.js +++ b/test/videojs-http-streaming.test.js @@ -2980,12 +2980,14 @@ QUnit.test('has no effect if native HLS is available and browser is Safari', fun videojs.browser.IS_ANY_SAFARI = origIsAnySafari; }); -QUnit.test('loads if native HLS is available but browser is not Safari', function(assert) { +QUnit.test('has no effect if native HLS is available and browser is any non-safari browser on ios', function(assert) { const Html5 = videojs.getTech('Html5'); const oldHtml5CanPlaySource = Html5.canPlaySource; const origIsAnySafari = videojs.browser.IS_ANY_SAFARI; + const originalIsIos = videojs.browser.IS_IOS; videojs.browser.IS_ANY_SAFARI = false; + videojs.browser.IS_IOS = true; Html5.canPlaySource = () => true; Vhs.supportsNativeHls = true; const player = createPlayer(); @@ -2997,10 +2999,11 @@ QUnit.test('loads if native HLS is available but browser is not Safari', functio this.clock.tick(1); - assert.ok(player.tech_.vhs, 'loaded VHS tech'); + assert.ok(!player.tech_.vhs, 'did not load vhs tech'); player.dispose(); Html5.canPlaySource = oldHtml5CanPlaySource; videojs.browser.IS_ANY_SAFARI = origIsAnySafari; + videojs.browser.IS_IOS = originalIsIos; }); QUnit.test( diff --git a/test/vtt-segment-loader.test.js b/test/vtt-segment-loader.test.js index 8a86f6535..3b6a06ea3 100644 --- a/test/vtt-segment-loader.test.js +++ b/test/vtt-segment-loader.test.js @@ -12,6 +12,7 @@ import { } from './loader-common.js'; import { encryptionKey, subtitlesEncrypted } from 'create-test-data!segments'; import {merge, createTimeRanges} from '../src/util/vjs-compat'; +import sinon from 'sinon'; const oldVTT = window.WebVTT; @@ -308,6 +309,19 @@ QUnit.module('VTTSegmentLoader', function(hooks) { QUnit.test( 'waits for vtt.js to be loaded before attempting to parse cues', function(assert) { + let promiseLoadVttJs; let resolveLoadVttJs; + + loader = new VTTSegmentLoader(LoaderCommonSettings.call(this, { + loaderType: 'vtt', + loadVttJs: () => { + promiseLoadVttJs = new Promise((resolve) => { + resolveLoadVttJs = resolve; + }); + + return promiseLoadVttJs; + } + }), {}); + const vttjs = window.WebVTT; const playlist = playlistWithDuration(40); let parsedCues = false; @@ -319,22 +333,6 @@ QUnit.module('VTTSegmentLoader', function(hooks) { loader.state = 'READY'; }; - let vttjsCallback = () => {}; - - this.track.tech_ = { - one(event, callback) { - if (event === 'vttjsloaded') { - vttjsCallback = callback; - } - }, - trigger(event) { - if (event === 'vttjsloaded') { - vttjsCallback(); - } - }, - off() {} - }; - loader.playlist(playlist); loader.track(this.track); loader.load(); @@ -361,10 +359,58 @@ QUnit.module('VTTSegmentLoader', function(hooks) { window.WebVTT = vttjs; - loader.subtitlesTrack_.tech_.trigger('vttjsloaded'); + promiseLoadVttJs.then(() => { + assert.equal(loader.state, 'READY', 'loader is ready to load next segment'); + assert.ok(parsedCues, 'parsed cues'); + }); - assert.equal(loader.state, 'READY', 'loader is ready to load next segment'); - assert.ok(parsedCues, 'parsed cues'); + resolveLoadVttJs(); + } + ); + + QUnit.test( + 'parse should throw if no vtt.js is loaded for any reason', + function(assert) { + const vttjs = window.WebVTT; + const playlist = playlistWithDuration(40); + let errors = 0; + + const originalParse = loader.parseVTTCues_.bind(loader); + + loader.parseVTTCues_ = (...args) => { + delete window.WebVTT; + return originalParse(...args); + }; + + const spy = sinon.spy(loader, 'error'); + + loader.on('error', () => errors++); + + loader.playlist(playlist); + loader.track(this.track); + loader.load(); + + assert.equal(errors, 0, 'no error at loader start'); + + this.clock.tick(1); + + // state WAITING for segment response + this.requests[0].responseType = 'arraybuffer'; + this.requests.shift().respond(200, null, new Uint8Array(10).buffer); + + this.clock.tick(1); + + assert.equal(errors, 1, 'triggered error when parser emmitts fatal error'); + assert.ok(loader.paused(), 'loader paused when encountering fatal error'); + assert.equal(loader.state, 'READY', 'loader reset after error'); + assert.ok( + spy.withArgs(sinon.match({ + message: 'Trying to parse received VTT cues, but there is no WebVTT. Make sure vtt.js is loaded.' + })).calledOnce, + 'error method called once with instance of NoVttJsError' + ); + + window.WebVTT = vttjs; } ); @@ -748,25 +794,22 @@ QUnit.module('VTTSegmentLoader', function(hooks) { }); QUnit.test('loader triggers error event when vtt.js fails to load', function(assert) { + let promiseLoadVttJs; let rejectLoadVttJs; + + loader = new VTTSegmentLoader(LoaderCommonSettings.call(this, { + loaderType: 'vtt', + loadVttJs: () => { + promiseLoadVttJs = new Promise((resolve, reject) => { + rejectLoadVttJs = reject; + }); + + return promiseLoadVttJs; + } + }), {}); const playlist = playlistWithDuration(40); let errors = 0; delete window.WebVTT; - let vttjsCallback = () => {}; - - this.track.tech_ = { - one(event, callback) { - if (event === 'vttjserror') { - vttjsCallback = callback; - } - }, - trigger(event) { - if (event === 'vttjserror') { - vttjsCallback(); - } - }, - off() {} - }; loader.on('error', () => errors++); @@ -794,11 +837,13 @@ QUnit.module('VTTSegmentLoader', function(hooks) { ); assert.equal(errors, 0, 'no errors yet'); - loader.subtitlesTrack_.tech_.trigger('vttjserror'); + promiseLoadVttJs.catch(() => { + assert.equal(loader.state, 'READY', 'loader is reset to ready'); + assert.ok(loader.paused(), 'loader is paused after error'); + assert.equal(errors, 1, 'loader triggered error when vtt.js load triggers error'); + }); - assert.equal(loader.state, 'READY', 'loader is reset to ready'); - assert.ok(loader.paused(), 'loader is paused after error'); - assert.equal(errors, 1, 'loader triggered error when vtt.js load triggers error'); + rejectLoadVttJs(); }); QUnit.test('does not save segment timing info', function(assert) {