Video element disappears in Chrome when not using controls

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.