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

Question

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

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

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

空白有点随机,有时通过滚出元素,它会再次出现.有时您需要点击/专注于其他内容,大多数时候暂停视频会使其重新出现.

我还在其中放了一条(注释掉的)线,表明它不仅仅基于点击,而是在play()通过调用时发生setTimeout.

无论如何,玩一玩,告诉我你的想法.

谢谢!

韦恩

(噢 - 另一个视频是为了表明另一个与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');
}