不使用控件时，视频元素在 Chrome 中消失

Question

所以 - 我认为这是一个浏览器错误。它出现在一个更复杂的设计/网站中，但我已经进行了很好的扎实的摆弄，简化了我的代码和设计等，并发现了以下内容：

在 Chrome 中嵌入没有控件属性的

<video>

时，使用 JavaScript 触发视频播放会导致视频元素变为空白。

http://jsfiddle.net/trolleymusic/2fHTv/

空白有点随机，有时通过滚出元素，它会重新出现。有时您需要单击/关注其他内容，大多数时候暂停视频会导致它重新出现。

我还在其中放置了一条（注释掉的）行，以表明它不仅仅基于点击，它也发生在通过

play()

调用

setTimeout

时。

无论如何，玩一下并告诉我你的想法。

谢谢！

韦恩

（哦 - 另一个视频显示除了

controls

属性之外，另一个相同的元素工作正常

Answer 1

好吧，我也可以回答我自己的问题，以防将来有人需要它。

它IS是一个错误，它在 Chrome 19 中运行良好。

我在这种情况下的解决方法是检查是否有控制属性，如果没有添加，则播放视频，然后删除控制属性。

查看一下：http://jsfiddle.net/trolleymusic/vhgss/

playVideo = function(el) {
    if (!el) { return; }
    if (el.getAttribute('controls') !== 'true') {
        el.setAttribute('controls', 'true');                    
    }
    el.paused ? el.play() : el.pause();
    el.removeAttribute('controls');
}

Answer 2

这似乎确实是一个错误。 我通过手动勾选 play 方法解决了这个问题 $(document).准备好我的所有视频，而不是添加自动播放标签：

('#videoId').get(0).play()

Answer 3

我已向 Chromium 项目报告了此错误。与此同时，作为一种解决方法（Chrome 30 中仍然存在），我向页面上的所有视频元素添加了控件，但将一个名为

animation

的类应用于那些将由页面上的事件间接触发的类（例如滚动深度） ）而不是由用户直接执行。

<video class="animation" preload controls>

然后我使用 jQuery 从

.animations

中删除了控件：

$( document ).ready(function() {
  $('video.animation').removeAttr('controls');
});

这解决了我们等待回归修复时的问题。

Answer 4

要解决此“问题”，您应该对视频标签使用相对定位：

video {
    position: relative;
}