javascript - Chrome 中可能存在的错误 - 使用背面可见性时视频控件仍然可见 :hidden on HTML5 videos

Question

我在 Chrome 中发现了一个可能的错误。

基本上，当在 HTML5 视频标签上使用 backface-visibility:hidden 时，HTML5 native 视频控件仍然可见。

要重现它，请单击下面示例中的按钮 12 次。

问题可见于:

• Chrome 浏览器版本 56.0.2924.87(64 位)
• Google Chrome 版本 59.0.3033.0 canary(64 位)(CANARY)

测试用例适用于:

• Firefox 52.0(64 位)
• Firefox 53.0a2 (2017-03-06)(64 位)

我想知道您以前是否遇到过这个问题以及可能的解决方法。

PS:我知道可以创建一些自定义视频控件，但我更喜欢使用 native 控件。

let elmBtn = document.getElementById('btn');
let elmVideo = document.getElementById('video');
let elmBox = document.getElementById('box');
let rotateY = 0;
// start style
elmVideo.style.transform = `scaleZ(1) translateZ(-500px) rotateY(${rotateY}deg)`;
elmVideo.style.backfaceVisibility = 'hidden';

elmBox.style.transform = `scaleZ(1) translateZ(-500px) rotateY(${rotateY}deg)`;
elmBox.style.backfaceVisibility = 'hidden';

elmBtn.addEventListener('click', event => {
  rotateY += 10;
  elmVideo.style.transform = `scaleZ(1) translateZ(-500px) rotateY(${rotateY}deg)`;
  elmBox.style.transform = `scaleZ(1) translateZ(-500px) rotateY(${rotateY}deg)`;
});

#wrapper {
  perspective: 1000px;
}

#box {
  width: 150px;
  height: 50px;
  background-color: red;
}

#btn {
  position: fixed;
  top: 0;
  left: 0;
}

<div id="wrapper">
  <video id="video" preload="metadata" controls>
    <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
    <source src="http://html5demos.com/assets/dizzy.webm" type="video/webm">
    <source src="http://html5demos.com/assets/dizzy.ogv" type="video/ogg">
  </video>
  <div id="box"></div>
</div>
<button id="btn">Click me to rotate</button>

Answer 1

您可以使用这个小 JavaScript 隐藏控件:

var vid = document.getElementById(id);
vid.controls = false;

这样可以让它们再次可见:

vid.controls = true;

我希望您可以使用此解决方法。