Question

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

使用背面可见性时，基本上HTML5原生视频控件仍然可见：隐藏在HTML5视频标签上。

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

问题可见：

Google 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：我知道可以创建一些自定义视频控件，但我更喜欢使用原生视频控件。

＆＃13;

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)`;
});

＆＃13;

#wrapper {
  perspective: 1000px;
}

#box {
  width: 150px;
  height: 50px;
  background-color: red;
}

#btn {
  position: fixed;
  top: 0;
  left: 0;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

这使他们再次可见：

vid.controls = true;

我希望你能使用这种解决方法。

Chrome中可能存在的错误 - 使用背面可见性时，视频控件仍然可见：隐藏在HTML5视频

1 个答案: