视频元素在不使用控件时会在Chrome中消失 [英] Video element disappears in Chrome when not using controls

问题描述

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

在Chrome中嵌入<视频> 没有控制属性的情况下，触发视频播放使用javascript将导致视频元素变为空白。

'p> http://jsfiddle.net/trolleymusic/2fHTv/

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

我还放了一条（注释掉）行在那里显示它不仅仅是基于点击，它也发生在通过 setTimeout 调用 play（）时。

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

谢谢！

Wayne

- 另一个视频就是为了表明另一个与<$ c相同的元素$ c> controls 属性工作正常

解决方案

好的，我也可以回答我自己的问题任何人在将来都需要它。

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

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

检查出来： http://jsfiddle.net/trolleymusic/vhgss/

<$ P $ （$ el）{
if（！el）{return; }（$控制'，'真'）;
}
el.paused？ el.play（）：el.pause（）;
el.removeAttribute（'controls'）;
}

So - I think this is a browser bug. It came up in a much more complicated design/site, but I've had a good solid fiddle around, simplified my code and designs, etc, and have found the following:

When embedding <video> without a controls attribute in Chrome, triggering the video to play using javascript causes the video element to go blank.

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

The blankness is a bit random, sometimes by rolling out of the element, it'll reappear. Sometimes you need to click/focus on something else, most of the time pausing the video will cause it to reappear.

I've also put a (commented out) line in there to show that it's not just based on the click, it occurs when play() is called via setTimeout too.

Anyways, have a play and tell me what you think.

Thanks!

Wayne

(Ooo - and the other video is there to show that the another element which is identical apart from the controls attribute works fine

解决方案

Well I may as well answer my own question in case anyone needs it in the future.

It IS a bug, it works fine in Chrome 19.

My workaround in this case was to check if there was a control attribute, if not add it, play the video then remove the control attribute.

Check it out: 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');
}

这篇关于视频元素在不使用控件时会在Chrome中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！