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

Video element disappears in Chrome when not using controls

本文关键字：Chrome 消失 元素 视频 控件      更新时间：2023-09-26

所以-我认为这是一个浏览器错误。它出现在一个更复杂的设计/网站上，但我做了很好的工作，简化了我的代码和设计等，并发现了以下内容：

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

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

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

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

不管怎样，表演一下，告诉我你的想法。

谢谢！

Wayne

（Ooo-另一个视频显示，除了controls属性之外，另一个相同的元素运行良好。

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

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

这似乎是一个错误。我已经通过手动挠痒痒的方式解决了这个问题$（文档）。准备好观看我的所有视频，而不是添加自动播放标签：

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

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

<video class="animation" preload controls>

然后，我使用jQuery:从.animations中删除了控件

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

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

相关文章：