8

所以 - 我认为这是一个浏览器错误。它出现在一个更复杂的设计/站点中，但我有一个很好的可靠的小提琴，简化了我的代码和设计等，并发现了以下内容：

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

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

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

我还在其中放了一条（注释掉的）行，以表明它不仅基于点击，而且在play()通过调用时也会发生setTimeout。

不管怎样，玩一玩，告诉我你的想法。

谢谢！

韦恩

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

4

3 回答 3

11

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

这是一个错误，它在 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');
}
于 2012-03-05T21:31:49.473 回答
1

这似乎是一个错误。我已经通过手动勾选 $(document).ready 中的播放方法来解决这个问题，而不是添加自动播放标签：

('#videoId').get(0).play()
于 2013-05-22T19:25:12.060 回答
1

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

<video class="animation" preload controls>

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

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

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

于 2013-10-25T22:07:09.917 回答