Experimental closed-captions (#87)

Only supports English WebVTT at the moment.

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:
 

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']);

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;