fix: focus the play toggle instead of the tech element on Edge to avoid a black frame with hardware-accelerated protected playback (#9217)

Author: BCovePW

src/js/big-play-button.js

@@ -3,6 +3,7 @@
  */
 import Button from './button.js';
 import Component from './component.js';
+import * as browser from './utils/browser.js';
 import {isPromise, silencePromise} from './utils/promise';
 
 /**
@@ -45,21 +46,30 @@ class BigPlayButton extends Button {
    */
   handleClick(event) {
     const playPromise = this.player_.play();
+    const cb = this.player_.getChild('controlBar');
+    const playToggle = cb && cb.getChild('playToggle');
 
     // exit early if tapped or clicked via the mouse
     if (event.type === 'tap' || this.mouseused_ && 'clientX' in event && 'clientY' in event) {
       silencePromise(playPromise);
 
-      if (this.player_.tech(true)) {
+      // On Microsoft Edge, moving focus to the <video> (tech) element as playback
+      // starts prevents a protected (DRM/EME) video surface from being presented:
+      // audio plays but the frame stays black until a later repaint or focus change.
+      // Focus the control-bar play toggle instead of the tech on Edge, mirroring the
+      // keyboard branch below. This is the pointer-path counterpart to the fix for
+      // https://github.com/videojs/video.js/issues/6270 (#6318/#6508 redirected only
+      // the keyboard path; the mouse/tap tech.focus() survived and regressed on
+      // Chromium Edge with hardware-accelerated DRM).
+      if (browser.IS_EDGE) {
+        (playToggle || this.player_).focus();
+      } else if (this.player_.tech(true)) {
         this.player_.tech(true).focus();
       }
 
       return;
     }
 
-    const cb = this.player_.getChild('controlBar');
-    const playToggle = cb && cb.getChild('playToggle');
-
     if (!playToggle) {
       this.player_.tech(true).focus();
       return;

src/js/poster-image.js

@@ -4,6 +4,7 @@
 import ClickableComponent from './clickable-component.js';
 import Component from './component.js';
 import * as Dom from './utils/dom.js';
+import * as browser from './utils/browser.js';
 import {silencePromise} from './utils/promise';
 
 /** @import Player from './player' */
@@ -166,7 +167,17 @@ class PosterImage extends ClickableComponent {
       return;
     }
 
-    if (this.player_.tech(true)) {
+    // On Microsoft Edge, moving focus to the <video> (tech) element as playback
+    // starts prevents a protected (DRM/EME) video surface from being presented:
+    // audio plays but the frame stays black until a later repaint or focus change.
+    // Focus the control-bar play toggle instead of the tech on Edge. See
+    // https://github.com/videojs/video.js/issues/6270.
+    const cb = this.player_.getChild('controlBar');
+    const playToggle = cb && cb.getChild('playToggle');
+
+    if (browser.IS_EDGE) {
+      (playToggle || this.player_).focus();
+    } else if (this.player_.tech(true)) {
       this.player_.tech(true).focus();
     }
 

test/unit/big-play-button.test.js

@@ -0,0 +1,51 @@
+/* eslint-env qunit */
+import TestHelpers from './test-helpers.js';
+import * as browser from '../../src/js/utils/browser.js';
+
+QUnit.module('BigPlayButton', {
+  beforeEach() {
+    this.player = TestHelpers.makePlayer();
+    this.bigPlayButton = this.player.getChild('BigPlayButton');
+    this.playToggle = this.player.getChild('ControlBar').getChild('PlayToggle');
+    this.tech = this.player.tech(true);
+
+    // Focus-only tests: avoid real play() promises/side effects.
+    this.player.play = () => {};
+
+    // Count focus targets instead of relying on document.activeElement.
+    this.techFocus = 0;
+    this.toggleFocus = 0;
+    this.tech.focus = () => {
+      this.techFocus++;
+    };
+    this.playToggle.focus = () => {
+      this.toggleFocus++;
+    };
+
+    this.origEdge = browser.IS_EDGE;
+  },
+  afterEach() {
+    browser.stub_IS_EDGE(this.origEdge);
+    this.player.dispose();
+  }
+});
+
+QUnit.test('mouse/tap click focuses the tech on non-Edge browsers', function(assert) {
+  browser.stub_IS_EDGE(false);
+
+  this.bigPlayButton.handleClick({type: 'tap'});
+
+  assert.strictEqual(this.techFocus, 1, 'the tech (video element) is focused');
+  assert.strictEqual(this.toggleFocus, 0, 'the play toggle is not focused');
+});
+
+// Regression guard for videojs/video.js#6270: focusing the <video> element as
+// playback starts on Edge leaves protected (DRM/EME) video as a black frame.
+QUnit.test('mouse/tap click focuses the play toggle, not the tech, on Edge', function(assert) {
+  browser.stub_IS_EDGE(true);
+
+  this.bigPlayButton.handleClick({type: 'tap'});
+
+  assert.strictEqual(this.toggleFocus, 1, 'the play toggle is focused on Edge');
+  assert.strictEqual(this.techFocus, 0, 'the tech is NOT focused on Edge');
+});

test/unit/poster.test.js

@@ -1,6 +1,7 @@
 /* eslint-env qunit */
 import PosterImage from '../../src/js/poster-image.js';
 import TestHelpers from './test-helpers.js';
+import * as browser from '../../src/js/utils/browser.js';
 import document from 'global/document';
 
 QUnit.module('PosterImage', {
@@ -76,6 +77,41 @@ QUnit.test('should remove itself from the document flow when there is no poster'
   posterImage.dispose();
 });
 
+// Regression guard for videojs/video.js#6270: on Edge, focusing the <video>
+// element when the poster is clicked leaves protected (DRM/EME) video black.
+QUnit.test('handleClick focuses the play toggle, not the tech, on Edge', function(assert) {
+  const player = this.mockPlayer;
+
+  player.controls(true);
+  player.play = () => {};
+
+  const tech = player.tech(true);
+  const playToggle = player.getChild('ControlBar').getChild('PlayToggle');
+  let techFocus = 0;
+  let toggleFocus = 0;
+
+  tech.focus = () => {
+    techFocus++;
+  };
+  playToggle.focus = () => {
+    toggleFocus++;
+  };
+
+  const origEdge = browser.IS_EDGE;
+
+  browser.stub_IS_EDGE(true);
+  player.posterImage.handleClick({type: 'tap'});
+  assert.strictEqual(toggleFocus, 1, 'play toggle focused on Edge');
+  assert.strictEqual(techFocus, 0, 'tech not focused on Edge');
+
+  browser.stub_IS_EDGE(false);
+  player.posterImage.handleClick({type: 'tap'});
+  assert.strictEqual(techFocus, 1, 'tech focused on non-Edge');
+  assert.strictEqual(toggleFocus, 1, 'play toggle not focused again on non-Edge');
+
+  browser.stub_IS_EDGE(origEdge);
+});
+
 QUnit.test('should hide the poster in the appropriate player states', function(assert) {
   const posterImage = new PosterImage(this.mockPlayer);
   const playerDiv = document.createElement('div');