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

Seville

Also! Just to show you, if you go to html5rocks.com/en/tutorials/video/basics/#toc-markup and modify the .webm one to take the controls attribute out, then click run code, then right-click on the video and select Play (from the browser context menu!) and the same thing happens. – Seville

It shows for me when I take controls out, but if I add "autoplay" the video disappears. – Acaulescent

This bug appears to still be there in Chrome 29.0. – Communal

Still seeing this bug in Chrome 30 (as part of a script which calls .play() on a video when a certain scroll depth is reached). Scroll past the waypoint and it starts playing as normal. – Banditry

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

Seville

It seems that it is enough to merely add and then remove the controls attribute once when the page is loaded. – Communal

Is this bug still a problem? – Blow

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()

Acaulescent

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.

Banditry

Answer 4

To fix this "issue" you should use relative positioning for video tag:

video {
    position: relative;
}

Conceit