Video element disappears in Chrome when not using controls

Question

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

Answer 1

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');
}

Answer 2

This does seem to be a bug. I have worked around this by manually tickling the play method in $(document).ready for all my videos instead of adding the autoplay tag:

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

Answer 3

I've reported this bug to the Chromium project. In the meantime, as a workaround (still present in Chrome 30), I added controls to all video elements on the page, but applied a class called animation to those that will be triggered indirectly by events on the page (like scroll depth) rather than directly by the user.

<video class="animation" preload controls>

I then removed the controls from .animations using jQuery:

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

This solves the issue while we're waiting on a fix for the regression.