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