Question

I have a an HTML5 video element that plays and communicates with a some custom video controls I have made. The controls are designed to fade in when the video is ready to play and show progress, current time etc. Since the upgrade to Chrome 10 a few weird problems exist around this part of my site (only in Chrome 10).

The controls no longer fade in and time updates are no longer shown. I have checked by console logging data and it is still being retrieved from the video element. It seems more like a CSS problem. I have found that if I open developer tools whilst the video is playing my Video Controls suddenly appear and work as they always used to.

It’s almost as though kind of refreshing the DOM or something kicks everything back into action. Like the UI is lagging behind what is actually in the DOM structure. Very strange!

Love some help on this!

Javascript:

videoPlayer.addEventListener('canplay',function(e){
  preloader.off();
  videoPlayer.play();
  mediaUI.fadeIn();
},false);

videoPlayer.addEventListener('timeupdate',function(e){
  var percent = (videoPlayer.currentTime/videoPlayer.duration)*100;
  playHead.css({left:percent+'%'});
  duration.text(fn.secs2Timer(videoPlayer.duration));
  currTime.text(fn.secs2Timer(videoPlayer.currentTime));
},false);

videoPlayer.addEventListener('ended',function(e){
  mediaUI.fadeOut();
  $('#videoPopup').popupBounceOut(true);    
},false);

HTML:

<div id='mediaUI'>
  <div class='currTime'></div>
  <div class='ie7Spc'></div>
  <div class='timeline'>
  <div class='btn pause'></div>
  <div id='seekBar' class='loadedBar'></div>
  </div>
  <div class='duration'></div>
</div>

CSS:

#notificationBar #mediaUI{position:absolute; left:0px; top:0px; z-index:4; width:100%; height:28px;}
#mediaUI .timeline{height:8px; margin:10px 60px; background:#555; position:relative; z-index:1;}.ie7 #mediaUI .ie7spc{height:10px;}
#mediaUI .timeline .loadedBar{width:100%; max-width:100%; height:8px; background:#888;}
#mediaUI .timeline .btn{width:34px; height:34px; background:url(../imgs/UI/sprite.png) no-repeat; position:absolute; left:0%; top:50%; z-index:1; margin:-17px 0 0 -17px; cursor:pointer;}
#mediaUI .timeline .btn.play{background-position:-25px -593px;}
#mediaUI .timeline .btn.pause{background-position:-25px -559px;}
#mediaUI .currTime{position:absolute; left:0px; top:0px; z-index:1; width:60px; padding:6px 0; text-align:center; color:#888; font-weight:bold;}
#mediaUI .duration{position:absolute; right:0px; top:0px; z-index:1; width:60px; padding:6px 0; text-align:center; color:#555; font-weight:bold;}

Answer 1

Chrome has some nasty video bugs which have appeared in version 10. I’ve actually experienced this problem myself.

http://code.google.com/p/chromium/issues/detail?id=73458

On Mac OS X and Windows, Chrome 10 often displays graphical corruption and can occasionally fail to draw text selections properly on pages with HTML5 video. Seeking through video in many cases has become jumpy and/or slow. I’ve only experienced the issue you describe above on Windows, though – where HTML elements above or around video fail to visually update, despite the DOM reflecting the changes.

I’ve found that forcing a style change on the affected elements can fix the issue – as long as the new value is different from the old one, and that you’re not immediately changing it back, (where the assignment is probably optimised out by the compiler) Chrome seems to suddenly snap back into action and update the element. I haven’t tested every possible style change, but display, opacity, and backgroundColor appear to work quite reliably.

Just as a test, does this work for you?

problemElement.style.backgroundColor = "rgba(0,0,0," + Math.random() + ")";