Question

所以 - 我认为这是一个浏览器错误。它来自一个更复杂的设计/网站，但我有一个很好的固定小提琴，简化我的代码和设计等，并找到了以下内容：

在Chrome中嵌入<video>没有控件属性时，触发视频以使用javascript播放会导致视频元素变为空白。

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

空白有点随机，有时通过滚出元素，它会重新出现。有时你需要点击/专注于其他内容，大部分时间暂停视频都会重新出现。

我还在其中添加了（注释掉的）一行，以表明它不仅仅基于点击，而是通过play()调用setTimeout时也会出现。

无论如何，有一个游戏并告诉我你的想法。

谢谢！

韦恩

（Ooo - 另一个视频显示除了controls属性之外的另一个元素工作正常

Answer 1

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

是一个错误，它在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

这似乎是一个错误。我通过手动勾选播放方法来解决这个问题 $（document）.ready为我的所有视频而不是添加自动播放代码：

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

Answer 3

我已经向Chromium项目报告了这个错误。与此同时，作为一种解决方法（仍然存在于Chrome 30中），我向页面上的所有视频元素添加了控件，但将一个名为animation的类应用于将由页面上的事件间接触发的类（如{滚动深度）而不是直接由用户。

<video class="animation" preload controls>

然后我使用jQuery从.animations删除了控件：

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

这可以在我们等待fix for the regression时解决问题。

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

3 个答案: