fix: use legacy WebKit API when available to address Safari 12.1 issues

videojs · May 8, 2019 · 7a20e5d · 7a20e5d
1 parent 36d5f9c
commit 7a20e5d
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 47 deletions.
diff --git a/src/plugin.js b/src/plugin.js
@@ -1,4 +1,5 @@
 import videojs from 'video.js';
+import window from 'global/window';
 import { standard5July2016, getSupportedKeySystem } from './eme';
 import {
   default as fairplay,
@@ -212,56 +213,56 @@ const onPlayerReady = (player, emeError) => {
 
   setupSessions(player);
 
-  // Support EME 05 July 2016
-  // Chrome 42+, Firefox 47+, Edge
-  player.tech_.el_.addEventListener('encrypted', (event) => {
-    // TODO convert to videojs.log.debug and add back in
-    // https://github.com/videojs/video.js/pull/4780
-    // videojs.log('eme', 'Received an \'encrypted\' event');
-    setupSessions(player);
-    handleEncryptedEvent(event, getOptions(player), player.eme.sessions, player.tech_)
-      .catch(emeError);
-  });
-  // Support Safari EME with FairPlay
-  // (also used in early Chrome or Chrome with EME disabled flag)
-  player.tech_.el_.addEventListener('webkitneedkey', (event) => {
-    // TODO convert to videojs.log.debug and add back in
-    // https://github.com/videojs/video.js/pull/4780
-    // videojs.log('eme', 'Received a \'webkitneedkey\' event');
+  if (window.WebKitMediaKeys) {
+    // Support Safari EME with FairPlay
+    // (also used in early Chrome or Chrome with EME disabled flag)
+    player.tech_.el_.addEventListener('webkitneedkey', (event) => {
+      // TODO convert to videojs.log.debug and add back in
+      // https://github.com/videojs/video.js/pull/4780
+      // videojs.log('eme', 'Received a \'webkitneedkey\' event');
 
-    // TODO it's possible that the video state must be cleared if reusing the same video
-    // element between sources
-    setupSessions(player);
-    handleWebKitNeedKeyEvent(event, getOptions(player), player.tech_)
-      .catch(emeError);
-  });
+      // TODO it's possible that the video state must be cleared if reusing the same video
+      // element between sources
+      setupSessions(player);
+      handleWebKitNeedKeyEvent(event, getOptions(player), player.tech_)
+        .catch(emeError);
+    });
 
-  // EDGE still fires msneedkey, but should use encrypted instead
-  if (videojs.browser.IS_EDGE) {
-    return;
-  }
+  } else if (window.MediaKeys) {
+    // Support EME 05 July 2016
+    // Chrome 42+, Firefox 47+, Edge, Safari 12.1+ on macOS 10.14+
+    player.tech_.el_.addEventListener('encrypted', (event) => {
+      // TODO convert to videojs.log.debug and add back in
+      // https://github.com/videojs/video.js/pull/4780
+      // videojs.log('eme', 'Received an \'encrypted\' event');
+      setupSessions(player);
+      handleEncryptedEvent(event, getOptions(player), player.eme.sessions, player.tech_)
+        .catch(emeError);
+    });
 
-  // IE11 Windows 8.1+
-  // Since IE11 doesn't support promises, we have to use a combination of
-  // try/catch blocks and event handling to simulate promise rejection.
-  // Functionally speaking, there should be no discernible difference between
-  // the behavior of IE11 and those of other browsers.
-  player.tech_.el_.addEventListener('msneedkey', (event) => {
-    // TODO convert to videojs.log.debug and add back in
-    // https://github.com/videojs/video.js/pull/4780
-    // videojs.log('eme', 'Received an \'msneedkey\' event');
-    setupSessions(player);
-    try {
-      handleMsNeedKeyEvent(event, getOptions(player), player.eme.sessions, player.tech_);
-    } catch (error) {
-      emeError(error);
-    }
-  });
-  player.tech_.on('mskeyerror', emeError);
-  // TODO: refactor this plugin so it can use a plugin dispose
-  player.on('dispose', () => {
-    player.tech_.off('mskeyerror', emeError);
-  });
+  } else if (window.MSMediaKeys) {
+    // IE11 Windows 8.1+
+    // Since IE11 doesn't support promises, we have to use a combination of
+    // try/catch blocks and event handling to simulate promise rejection.
+    // Functionally speaking, there should be no discernible difference between
+    // the behavior of IE11 and those of other browsers.
+    player.tech_.el_.addEventListener('msneedkey', (event) => {
+      // TODO convert to videojs.log.debug and add back in
+      // https://github.com/videojs/video.js/pull/4780
+      // videojs.log('eme', 'Received an \'msneedkey\' event');
+      setupSessions(player);
+      try {
+        handleMsNeedKeyEvent(event, getOptions(player), player.eme.sessions, player.tech_);
+      } catch (error) {
+        emeError(error);
+      }
+    });
+    player.tech_.on('mskeyerror', emeError);
+    // TODO: refactor this plugin so it can use a plugin dispose
+    player.on('dispose', () => {
+      player.tech_.off('mskeyerror', emeError);
+    });
+  }
 };
 
 /**

diff --git a/test/plugin.test.js b/test/plugin.test.js
@@ -161,6 +161,11 @@ QUnit.test('initializeMediaKeys ms-prefix', function(assert) {
   let errors = 0;
   let keySession;
   let errorMessage;
+  const origMediaKeys = window.MediaKeys;
+  const origWebKitMediaKeys = window.WebKitMediaKeys;
+
+  window.MediaKeys = undefined;
+  window.WebKitMediaKeys = undefined;
 
   if (!window.MSMediaKeys) {
     window.MSMediaKeys = () => {};
@@ -250,6 +255,8 @@ QUnit.test('initializeMediaKeys ms-prefix', function(assert) {
     assert.equal(errors, 3, 'error called on player 3 times');
     assert.equal(this.player.error(), null,
       'no error called on player with suppressError = true');
+    window.MediaKeys = origMediaKeys;
+    window.WebKitMediaKeys = origWebKitMediaKeys;
     done();
   });
   this.clock.tick(1);
@@ -262,7 +269,14 @@ QUnit.test('tech error listener is removed on dispose', function(assert) {
   const done = assert.async(1);
   let called = 0;
   const browser = videojs.browser;
+  const origMediaKeys = window.MediaKeys;
+  const origWebKitMediaKeys = window.WebKitMediaKeys;
 
+  window.MediaKeys = undefined;
+  window.WebKitMediaKeys = undefined;
+  if (!window.MSMediaKeys) {
+    window.MSMediaKeys = noop.bind(this);
+  }
   // let this test pass on edge
   videojs.browser = {IS_EDGE: false};
 
@@ -284,6 +298,8 @@ QUnit.test('tech error listener is removed on dispose', function(assert) {
 
     this.player.error = undefined;
     videojs.browser = browser;
+    window.MediaKeys = origMediaKeys;
+    window.WebKitMediaKeys = origWebKitMediaKeys;
     done();
   });