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.

/

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

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

• javascript
• html
• google-chrome
• video
• webm

• 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. – Trolleymusic Commented Mar 5, 2012 at 10:57
• It shows for me when I take controls out, but if I add "autoplay" the video disappears. – Ethereal Commented May 22, 2013 at 19:09
• This bug appears to still be there in Chrome 29.0. – user663031 Commented Jun 4, 2013 at 18:24
• 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 Commented Oct 25, 2013 at 21:47

4 Answers 4

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

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

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.

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

video {
    position: relative;
}