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

Also! Just to show you, if you go to http://www.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. — Trolleymusic, Mar 05 '12 at 10:57
It shows for me when I take controls out, but if I add "autoplay" the video disappears. — Ethereal, May 22 '13 at 19:09
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. — Eric Tjossem, Oct 25 '13 at 21:47

score 11 · Accepted Answer · answered Mar 05 '12 at 21:31

11

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

answered Mar 05 '12 at 21:31

Trolleymusic

2,162
3
19
26

1

It seems that it is enough to merely add and then remove the `controls` attribute once when the page is loaded. – Jun 06 '13 at 04:47
Is this bug still a problem? – fraxture May 21 '15 at 15:17

Ethereal · Answer 2 · 2013-05-24T12:24:06.280

1

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

edited May 24 '13 at 12:24

answered May 22 '13 at 19:25

Ethereal

2,604
1
20
20

Eric Tjossem · Answer 3 · 2013-10-25T22:45:03.887

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.

Video element disappears in Chrome when not using controls

3 Answers3

Linked