From 274a7037fd8a0e6c05590c64cb66ef4b9f7fb93f Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 13 Dec 2016 18:42:07 -0500 Subject: [PATCH 01/12] feat: ingest a player div for videojs If the videojs embed code (a video element) is wrapped in a div with the 'data-vjs-player' attribute on it, that element will be used for the player div and a new one will not be created. In addition, on browsers like iOS that don't support moving the media element inside the DOM, we will not need to clone the element and we could continue to re-use the same video element give to us in the embed code. This could also be extended in the future to change our embed code to a div-only approach if we so choose. --- src/js/player.js | 14 +++++++++++--- src/js/tech/html5.js | 3 ++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/js/player.js b/src/js/player.js index a943e193fe..0f9e3d2e67 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -490,8 +490,15 @@ class Player extends Component { * The DOM element that gets created. */ createEl() { - const el = this.el_ = super.createEl('div'); const tag = this.tag; + let el; + const playerElIngest = this.playerElIngest_ = tag.parentNode.hasAttribute('data-vjs-player'); + + if (playerElIngest) { + el = this.el_ = tag.parentNode; + } else { + el = this.el_ = super.createEl('div'); + } // Remove width/height attrs from tag so CSS can make it 100% width/height tag.removeAttribute('width'); @@ -505,7 +512,7 @@ class Player extends Component { // workaround so we don't totally break IE7 // http://stackoverflow.com/questions/3653444/css-styles-not-applied-on-dynamic-elements-in-internet-explorer-7 if (attr === 'class') { - el.className = attrs[attr]; + el.className += ' ' + attrs[attr]; } else { el.setAttribute(attr, attrs[attr]); } @@ -555,7 +562,7 @@ class Player extends Component { tag.initNetworkState_ = tag.networkState; // Wrap video tag in div (el/box) container - if (tag.parentNode) { + if (tag.parentNode && !playerElIngest) { tag.parentNode.insertBefore(el, tag); } @@ -836,6 +843,7 @@ class Player extends Component { 'muted': this.options_.muted, 'poster': this.poster(), 'language': this.language(), + 'playerElIngest': this.playerElIngest_, 'vtt.js': this.options_['vtt.js'] }, this.options_[techName.toLowerCase()]); diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index 32037828eb..e2295fe43f 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -185,7 +185,8 @@ class Html5 extends Tech { // Check if this browser supports moving the element into the box. // On the iPhone video will break if you move the element, // So we have to create a brand new element. - if (!el || this.movingMediaElementInDOM === false) { + // If we ingested the player div, we do not need to move the media element. + if (!el || !this.options_.playerElIngest || this.movingMediaElementInDOM === false) { // If the original tag is still there, clone and remove it. if (el) { From 0c14c97c84c734962b86b38b52f372572c117d1b Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 14 Dec 2016 11:27:23 -0500 Subject: [PATCH 02/12] null-check parentNode before using --- src/js/player.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/player.js b/src/js/player.js index 0f9e3d2e67..aa891ee714 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -492,7 +492,7 @@ class Player extends Component { createEl() { const tag = this.tag; let el; - const playerElIngest = this.playerElIngest_ = tag.parentNode.hasAttribute('data-vjs-player'); + const playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute('data-vjs-player'); if (playerElIngest) { el = this.el_ = tag.parentNode; From 4b61a4ab271be5e84ce67c9b5f8bc75097123436 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 14 Dec 2016 13:05:50 -0500 Subject: [PATCH 03/12] check for property presence before checking value --- src/js/tech/html5.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index e2295fe43f..bd82b9e2c0 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -186,7 +186,9 @@ class Html5 extends Tech { // On the iPhone video will break if you move the element, // So we have to create a brand new element. // If we ingested the player div, we do not need to move the media element. - if (!el || !this.options_.playerElIngest || this.movingMediaElementInDOM === false) { + if (!el || + ('playerElIngest' in this.options_ && !this.options_.playerElIngest) || + this.movingMediaElementInDOM === false) { // If the original tag is still there, clone and remove it. if (el) { From 0d07943f759d678c09a6583c916dbd567e90551c Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 14 Dec 2016 14:03:37 -0500 Subject: [PATCH 04/12] do a null check for el.parentNode --- src/js/tech/html5.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index bd82b9e2c0..6c51e161c2 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -194,9 +194,12 @@ class Html5 extends Tech { if (el) { const clone = el.cloneNode(true); - el.parentNode.insertBefore(clone, el); + if (el.parentNode) { + el.parentNode.insertBefore(clone, el); + } Html5.disposeMediaElement(el); el = clone; + } else { el = document.createElement('video'); From 0d9a1806a01ae32323f120de7725feb053a24651 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 14 Dec 2016 14:04:16 -0500 Subject: [PATCH 05/12] simply new tag logic and create tests for movingMediaElementInDOM and playerElIngest flags --- src/js/player.js | 2 +- src/js/tech/html5.js | 4 +- test/unit/player.test.js | 87 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+), 3 deletions(-) diff --git a/src/js/player.js b/src/js/player.js index aa891ee714..57355fc250 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -843,7 +843,7 @@ class Player extends Component { 'muted': this.options_.muted, 'poster': this.poster(), 'language': this.language(), - 'playerElIngest': this.playerElIngest_, + 'playerElIngest': this.playerElIngest_ || false, 'vtt.js': this.options_['vtt.js'] }, this.options_[techName.toLowerCase()]); diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index 6c51e161c2..2f739bb0bc 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -187,8 +187,8 @@ class Html5 extends Tech { // So we have to create a brand new element. // If we ingested the player div, we do not need to move the media element. if (!el || - ('playerElIngest' in this.options_ && !this.options_.playerElIngest) || - this.movingMediaElementInDOM === false) { + !(this.options_.playerElIngest || + this.movingMediaElementInDOM)) { // If the original tag is still there, clone and remove it. if (el) { diff --git a/test/unit/player.test.js b/test/unit/player.test.js index 8d325a67c2..c374776219 100644 --- a/test/unit/player.test.js +++ b/test/unit/player.test.js @@ -830,6 +830,93 @@ QUnit.test('should restore attributes from the original video tag when creating assert.equal(el.getAttribute('webkit-playsinline'), '', 'webkit-playsinline attribute was set properly'); }); +QUnit.test('if tag exists and movingMediaElementInDOM, re-use the tag', function(assert) { + // simulate attributes stored from the original tag + const tag = Dom.createEl('video'); + + tag.setAttribute('preload', 'auto'); + tag.setAttribute('autoplay', ''); + tag.setAttribute('webkit-playsinline', ''); + + const html5Mock = { + options_: { + tag, + playerElIngest: false + }, + movingMediaElementInDOM: true + }; + + // set options that should override tag attributes + html5Mock.options_.preload = 'none'; + + // create the element + const el = Html5.prototype.createEl.call(html5Mock); + + assert.equal(el.getAttribute('preload'), 'none', 'attribute was successful overridden by an option'); + assert.equal(el.getAttribute('autoplay'), '', 'autoplay attribute was set properly'); + assert.equal(el.getAttribute('webkit-playsinline'), '', 'webkit-playsinline attribute was set properly'); + + assert.equal(el, tag, 'we have re-used the tag as expected'); +}); + +QUnit.test('if tag exists and *not* movingMediaElementInDOM, create a new tag', function(assert) { + // simulate attributes stored from the original tag + const tag = Dom.createEl('video'); + + tag.setAttribute('preload', 'auto'); + tag.setAttribute('autoplay', ''); + tag.setAttribute('webkit-playsinline', ''); + + const html5Mock = { + options_: { + tag, + playerElIngest: false + }, + movingMediaElementInDOM: false + }; + + // set options that should override tag attributes + html5Mock.options_.preload = 'none'; + + // create the element + const el = Html5.prototype.createEl.call(html5Mock); + + assert.equal(el.getAttribute('preload'), 'none', 'attribute was successful overridden by an option'); + assert.equal(el.getAttribute('autoplay'), '', 'autoplay attribute was set properly'); + assert.equal(el.getAttribute('webkit-playsinline'), '', 'webkit-playsinline attribute was set properly'); + + assert.notEqual(el, tag, 'we have not re-used the tag as expected'); +}); + +QUnit.test('if tag exists and *not* movingMediaElementInDOM, but playerElIngest re-use tag', function(assert) { + // simulate attributes stored from the original tag + const tag = Dom.createEl('video'); + + tag.setAttribute('preload', 'auto'); + tag.setAttribute('autoplay', ''); + tag.setAttribute('webkit-playsinline', ''); + + const html5Mock = { + options_: { + tag, + playerElIngest: true + }, + movingMediaElementInDOM: false + }; + + // set options that should override tag attributes + html5Mock.options_.preload = 'none'; + + // create the element + const el = Html5.prototype.createEl.call(html5Mock); + + assert.equal(el.getAttribute('preload'), 'none', 'attribute was successful overridden by an option'); + assert.equal(el.getAttribute('autoplay'), '', 'autoplay attribute was set properly'); + assert.equal(el.getAttribute('webkit-playsinline'), '', 'webkit-playsinline attribute was set properly'); + + assert.equal(el, tag, 'we have re-used the tag as expected'); +}); + QUnit.test('should honor default inactivity timeout', function(assert) { const clock = sinon.useFakeTimers(); From fb053b71f24b9b53f60b6ec7ef0911a7a3c773de Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 14 Dec 2016 14:30:39 -0500 Subject: [PATCH 06/12] add videojs tests for this --- test/unit/video.test.js | 71 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/test/unit/video.test.js b/test/unit/video.test.js index 0ba89af735..e1f326130d 100644 --- a/test/unit/video.test.js +++ b/test/unit/video.test.js @@ -166,3 +166,74 @@ QUnit.test('should expose DOM functions', function(assert) { `videojs.${vjsName} is a reference to Dom.${domName}`); }); }); + +QUnit.test('ingest player div if data-vjs-player attribute is present on video parentNode', function(assert) { + const fixture = document.querySelector('#qunit-fixture'); + + fixture.innerHTML = ` +
+ +
+ `; + + const playerDiv = document.querySelector('.foo'); + const vid = document.querySelector('#test_vid_id'); + + const player = videojs(vid, {}); + + assert.equal(player.el(), playerDiv, 'we re-used the given div'); + assert.ok(player.hasClass('foo'), 'keeps any classes that were around previously'); +}); + +QUnit.test('ingested player div should not create a new tag for movingMediaElementInDOM', function(assert) { + const Html5 = videojs.getTech('Html5'); + const oldMoving = Html5.prototype.movingMediaElementInDOM; + const fixture = document.querySelector('#qunit-fixture'); + + fixture.innerHTML = ` +
+ +
+ `; + Html5.prototype.movingMediaElementInDOM = false; + + const playerDiv = document.querySelector('.foo'); + const vid = document.querySelector('#test_vid_id'); + + const player = videojs(vid, {}); + + assert.equal(player.el(), playerDiv, 'we re-used the given div'); + assert.equal(player.tech_.el(), vid, 'we re-used the video element'); + assert.ok(player.hasClass('foo'), 'keeps any classes that were around previously'); + + Html5.prototype.movingMediaElementInDOM = oldMoving; +}); + +QUnit.test('should create a new tag for movingMediaElementInDOM', function(assert) { + const Html5 = videojs.getTech('Html5'); + const oldMoving = Html5.prototype.movingMediaElementInDOM; + const fixture = document.querySelector('#qunit-fixture'); + + fixture.innerHTML = ` +
+ +
+ `; + Html5.prototype.movingMediaElementInDOM = false; + + const playerDiv = document.querySelector('.foo'); + const vid = document.querySelector('#test_vid_id'); + + const player = videojs(vid, {}); + + assert.notEqual(player.el(), playerDiv, 'we used a new div'); + assert.notEqual(player.tech_.el(), vid, 'we a new video element'); + + Html5.prototype.movingMediaElementInDOM = oldMoving; +}); From d0ce7890b28febbe411c6f4a121088df8c2602f2 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Wed, 14 Dec 2016 15:00:06 -0500 Subject: [PATCH 07/12] tech order --- test/unit/video.test.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/test/unit/video.test.js b/test/unit/video.test.js index e1f326130d..4cb2f97da1 100644 --- a/test/unit/video.test.js +++ b/test/unit/video.test.js @@ -181,7 +181,9 @@ QUnit.test('ingest player div if data-vjs-player attribute is present on video p const playerDiv = document.querySelector('.foo'); const vid = document.querySelector('#test_vid_id'); - const player = videojs(vid, {}); + const player = videojs(vid, { + techOrder: ['html5'] + }); assert.equal(player.el(), playerDiv, 'we re-used the given div'); assert.ok(player.hasClass('foo'), 'keeps any classes that were around previously'); @@ -204,7 +206,9 @@ QUnit.test('ingested player div should not create a new tag for movingMediaEleme const playerDiv = document.querySelector('.foo'); const vid = document.querySelector('#test_vid_id'); - const player = videojs(vid, {}); + const player = videojs(vid, { + techOrder: ['html5'] + }); assert.equal(player.el(), playerDiv, 'we re-used the given div'); assert.equal(player.tech_.el(), vid, 'we re-used the video element'); @@ -230,7 +234,9 @@ QUnit.test('should create a new tag for movingMediaElementInDOM', function(asser const playerDiv = document.querySelector('.foo'); const vid = document.querySelector('#test_vid_id'); - const player = videojs(vid, {}); + const player = videojs(vid, { + techOrder: ['html5'] + }); assert.notEqual(player.el(), playerDiv, 'we used a new div'); assert.notEqual(player.tech_.el(), vid, 'we a new video element'); From a85eb5bfbd07ddad218d7ace14eea2ca111778d0 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 15 Dec 2016 11:30:10 -0500 Subject: [PATCH 08/12] dispose players --- test/unit/video.test.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/test/unit/video.test.js b/test/unit/video.test.js index 4cb2f97da1..acea6ff170 100644 --- a/test/unit/video.test.js +++ b/test/unit/video.test.js @@ -173,7 +173,7 @@ QUnit.test('ingest player div if data-vjs-player attribute is present on video p fixture.innerHTML = `
`; @@ -187,6 +187,8 @@ QUnit.test('ingest player div if data-vjs-player attribute is present on video p assert.equal(player.el(), playerDiv, 'we re-used the given div'); assert.ok(player.hasClass('foo'), 'keeps any classes that were around previously'); + + player.dispose(); }); QUnit.test('ingested player div should not create a new tag for movingMediaElementInDOM', function(assert) { @@ -197,7 +199,7 @@ QUnit.test('ingested player div should not create a new tag for movingMediaEleme fixture.innerHTML = `
`; @@ -214,6 +216,7 @@ QUnit.test('ingested player div should not create a new tag for movingMediaEleme assert.equal(player.tech_.el(), vid, 'we re-used the video element'); assert.ok(player.hasClass('foo'), 'keeps any classes that were around previously'); + player.dispose(); Html5.prototype.movingMediaElementInDOM = oldMoving; }); @@ -225,7 +228,7 @@ QUnit.test('should create a new tag for movingMediaElementInDOM', function(asser fixture.innerHTML = `
`; @@ -241,5 +244,6 @@ QUnit.test('should create a new tag for movingMediaElementInDOM', function(asser assert.notEqual(player.el(), playerDiv, 'we used a new div'); assert.notEqual(player.tech_.el(), vid, 'we a new video element'); + player.dispose(); Html5.prototype.movingMediaElementInDOM = oldMoving; }); From 49632d93090e8b42fcea442e6fbbee90c322a4b6 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 15 Dec 2016 16:37:02 -0500 Subject: [PATCH 09/12] force html5 on --- test/unit/video.test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/test/unit/video.test.js b/test/unit/video.test.js index acea6ff170..2d8d3c7ec1 100644 --- a/test/unit/video.test.js +++ b/test/unit/video.test.js @@ -193,6 +193,7 @@ QUnit.test('ingest player div if data-vjs-player attribute is present on video p QUnit.test('ingested player div should not create a new tag for movingMediaElementInDOM', function(assert) { const Html5 = videojs.getTech('Html5'); + const oldIS = Html5.isSupported; const oldMoving = Html5.prototype.movingMediaElementInDOM; const fixture = document.querySelector('#qunit-fixture'); @@ -204,6 +205,7 @@ QUnit.test('ingested player div should not create a new tag for movingMediaEleme `; Html5.prototype.movingMediaElementInDOM = false; + Html5.isSupported = () => true; const playerDiv = document.querySelector('.foo'); const vid = document.querySelector('#test_vid_id'); @@ -218,12 +220,14 @@ QUnit.test('ingested player div should not create a new tag for movingMediaEleme player.dispose(); Html5.prototype.movingMediaElementInDOM = oldMoving; + Html5.isSupported = oldIS; }); QUnit.test('should create a new tag for movingMediaElementInDOM', function(assert) { const Html5 = videojs.getTech('Html5'); const oldMoving = Html5.prototype.movingMediaElementInDOM; const fixture = document.querySelector('#qunit-fixture'); + const oldIS = Html5.isSupported; fixture.innerHTML = `
@@ -233,6 +237,7 @@ QUnit.test('should create a new tag for movingMediaElementInDOM', function(asser
`; Html5.prototype.movingMediaElementInDOM = false; + Html5.isSupported = () => true; const playerDiv = document.querySelector('.foo'); const vid = document.querySelector('#test_vid_id'); @@ -246,4 +251,5 @@ QUnit.test('should create a new tag for movingMediaElementInDOM', function(asser player.dispose(); Html5.prototype.movingMediaElementInDOM = oldMoving; + Html5.isSupported = oldIS; }); From cd443d32e8d0cc28270a91283e2348f58c0dd602 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 15 Dec 2016 16:51:52 -0500 Subject: [PATCH 10/12] dispose players --- test/unit/video.test.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/test/unit/video.test.js b/test/unit/video.test.js index 2d8d3c7ec1..e194d8734e 100644 --- a/test/unit/video.test.js +++ b/test/unit/video.test.js @@ -40,6 +40,9 @@ QUnit.test('should return a video player instance', function(assert) { const player2 = videojs(tag2, { techOrder: ['techFaker'] }); assert.ok(player2.id() === 'test_vid_id2', 'created player from element'); + + player.dispose(); + player2.dispose(); }); QUnit.test('should return a video player instance from el html5 tech', function(assert) { @@ -66,6 +69,9 @@ QUnit.test('should return a video player instance from el html5 tech', function( const player2 = videojs(tag2, { techOrder: ['techFaker'] }); assert.ok(player2.id() === 'test_vid_id2', 'created player from element'); + + player.dispose(); + player2.dispose(); }); QUnit.test('should return a video player instance from el techfaker', function(assert) { @@ -91,6 +97,9 @@ QUnit.test('should return a video player instance from el techfaker', function(a const player2 = videojs(tag2, { techOrder: ['techFaker'] }); assert.ok(player2.id() === 'test_vid_id2', 'created player from element'); + + player.dispose(); + player2.dispose(); }); QUnit.test('should add the value to the languages object', function(assert) { From 6b3ebece3d3722a1c6071f5dee22c2c37ad30068 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Fri, 16 Dec 2016 11:27:23 -0500 Subject: [PATCH 11/12] query --- test/unit/video.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/unit/video.test.js b/test/unit/video.test.js index e194d8734e..92c8f074db 100644 --- a/test/unit/video.test.js +++ b/test/unit/video.test.js @@ -224,7 +224,7 @@ QUnit.test('ingested player div should not create a new tag for movingMediaEleme }); assert.equal(player.el(), playerDiv, 'we re-used the given div'); - assert.equal(player.tech_.el(), vid, 'we re-used the video element'); + assert.equal(player.$('.vjs-tech'), vid, 'we re-used the video element'); assert.ok(player.hasClass('foo'), 'keeps any classes that were around previously'); player.dispose(); @@ -256,7 +256,7 @@ QUnit.test('should create a new tag for movingMediaElementInDOM', function(asser }); assert.notEqual(player.el(), playerDiv, 'we used a new div'); - assert.notEqual(player.tech_.el(), vid, 'we a new video element'); + assert.notEqual(player.$('.vjs-tech'), vid, 'we a new video element'); player.dispose(); Html5.prototype.movingMediaElementInDOM = oldMoving; From fdcee156e4f893218cfb88342caa4d6de225f617 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Fri, 16 Dec 2016 12:37:25 -0500 Subject: [PATCH 12/12] stub native canPlayType --- test/unit/video.test.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/test/unit/video.test.js b/test/unit/video.test.js index 92c8f074db..c9252613c1 100644 --- a/test/unit/video.test.js +++ b/test/unit/video.test.js @@ -204,6 +204,7 @@ QUnit.test('ingested player div should not create a new tag for movingMediaEleme const Html5 = videojs.getTech('Html5'); const oldIS = Html5.isSupported; const oldMoving = Html5.prototype.movingMediaElementInDOM; + const oldCPT = Html5.nativeSourceHandler.canPlayType; const fixture = document.querySelector('#qunit-fixture'); fixture.innerHTML = ` @@ -215,6 +216,7 @@ QUnit.test('ingested player div should not create a new tag for movingMediaEleme `; Html5.prototype.movingMediaElementInDOM = false; Html5.isSupported = () => true; + Html5.nativeSourceHandler.canPlayType = () => true; const playerDiv = document.querySelector('.foo'); const vid = document.querySelector('#test_vid_id'); @@ -224,17 +226,19 @@ QUnit.test('ingested player div should not create a new tag for movingMediaEleme }); assert.equal(player.el(), playerDiv, 'we re-used the given div'); - assert.equal(player.$('.vjs-tech'), vid, 'we re-used the video element'); + assert.equal(player.tech_.el(), vid, 'we re-used the video element'); assert.ok(player.hasClass('foo'), 'keeps any classes that were around previously'); player.dispose(); Html5.prototype.movingMediaElementInDOM = oldMoving; Html5.isSupported = oldIS; + Html5.nativeSourceHandler.canPlayType = oldCPT; }); QUnit.test('should create a new tag for movingMediaElementInDOM', function(assert) { const Html5 = videojs.getTech('Html5'); const oldMoving = Html5.prototype.movingMediaElementInDOM; + const oldCPT = Html5.nativeSourceHandler.canPlayType; const fixture = document.querySelector('#qunit-fixture'); const oldIS = Html5.isSupported; @@ -247,6 +251,7 @@ QUnit.test('should create a new tag for movingMediaElementInDOM', function(asser `; Html5.prototype.movingMediaElementInDOM = false; Html5.isSupported = () => true; + Html5.nativeSourceHandler.canPlayType = () => true; const playerDiv = document.querySelector('.foo'); const vid = document.querySelector('#test_vid_id'); @@ -256,9 +261,10 @@ QUnit.test('should create a new tag for movingMediaElementInDOM', function(asser }); assert.notEqual(player.el(), playerDiv, 'we used a new div'); - assert.notEqual(player.$('.vjs-tech'), vid, 'we a new video element'); + assert.notEqual(player.tech_.el(), vid, 'we a new video element'); player.dispose(); Html5.prototype.movingMediaElementInDOM = oldMoving; Html5.isSupported = oldIS; + Html5.nativeSourceHandler.canPlayType = oldCPT; });