diff --git a/README.md b/README.md index 037e3bb..ee49fda 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ Where `opts` is an optional object with properties * `classes` [`Array`] Classes to add to the video (and placeholder) element * `advertising` [`Boolean`] whether or not to show ads on the video * `allProgress` [`Boolean`] set to true to send all native video progress events to spoor (defaults to sending at 25%/50%/75%) + * `captionsUrl` [`String`] The URL of a [WebVTT](https://w3c.github.io/webvtt/) closed-caption file. The config options can also be set as data attribute to instantiate the module declaratively: diff --git a/src/js/video.js b/src/js/video.js index a1e1cac..21689df 100644 --- a/src/js/video.js +++ b/src/js/video.js @@ -91,7 +91,6 @@ function getOptionsFromDataAttributes(attributes) { } } }); - return opts; } @@ -220,6 +219,19 @@ class Video { this.videoEl.autoplay = this.videoEl.autostart = true; } + if (this.opts.captionsUrl) { + // FIXME this is all hardcoded as English captions at the moment + const trackEl = document.createElement('track'); + trackEl.setAttribute('label', 'English'); + trackEl.setAttribute('kind', 'captions'); + trackEl.setAttribute('srclang', 'en'); + trackEl.setAttribute('src', this.opts.captionsUrl); + trackEl.setAttribute('crossorigin', 'true'); + this.videoEl.setAttribute('crossorigin', 'true'); + this.videoEl.appendChild(trackEl); + } + + this.containerEl.appendChild(this.videoEl); addEvents(this, ['playing', 'pause', 'ended', 'progress', 'seeked']); diff --git a/test/video.test.js b/test/video.test.js index 8d6619c..d1f975a 100644 --- a/test/video.test.js +++ b/test/video.test.js @@ -55,12 +55,14 @@ describe('Video', () => { containerEl.setAttribute('data-o-video-optimumwidth', 300); containerEl.setAttribute('data-o-video-placeholder', true); containerEl.setAttribute('data-o-video-classes', 'a-class another-class'); + containerEl.setAttribute('data-o-video-captions-url', 'https://foo.com/a.vtt'); const video = new Video(containerEl); video.opts.optimumwidth.should.eql(300); video.opts.placeholder.should.eql(true); video.opts.classes.should.contain('a-class'); video.opts.classes.should.contain('another-class'); + video.opts.captionsUrl.should.eql('https://foo.com/a.vtt'); }); }); @@ -152,6 +154,14 @@ describe('Video', () => { Element.prototype.addEventListener = realAddEventListener; }); + it('should add a track element', () => { + containerEl.setAttribute('data-o-video-captions-url', 'https://foo.com/a.vtt'); + const video = new Video(containerEl); + video.addVideo(); + containerEl.querySelector('video > track').getAttribute('kind').should.equal('captions'); + containerEl.querySelector('video > track').getAttribute('src').should.equal('https://foo.com/a.vtt'); + }); + describe('`watched` Event', () => { let mochaOnbeforeunloadHandler;