Chrome 10：自定义视频接口问题

Question

我有一个 HTML5 视频元素，可以播放并与我制作的一些自定义视频控件进行通信。这些控件设计为在视频准备好播放时淡入并显示进度、当前时间等。自从升级到 Chrome 10 后，我的网站的这一部分存在一些奇怪的问题（仅在 Chrome 10 中）。

控件不再淡入，时间更新不再显示。我已经通过控制台记录数据进行了检查，并且仍在从视频元素中检索它。这似乎更像是一个 CSS 问题。 我发现，如果我在播放视频时打开开发者工具，我的视频控件会突然出现并像往常一样工作。

这几乎就像是刷新 DOM 或什么东西让一切重新开始行动。就像 UI 落后于 DOM 结构中的实际情况一样。很奇怪！

喜欢这方面的帮助！

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 在版本 10 中出现了一些令人讨厌的视频错误。实际上我自己也遇到过这个问题。

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

在 Mac OS X 和 Windows 上，Chrome 10 经常显示图形损坏，并且有时无法在包含 HTML5 视频的页面上正确绘制文本选择。在许多情况下，通过视频搜索变得神经质和/或缓慢。不过，我只在 Windows 上遇到过您在上面描述的问题 - 尽管 DOM 反映了更改，但视频上方或周围的 HTML 元素无法视觉更新。

我发现，对受影响的元素强制更改样式可以解决问题 - 只要新值与旧值不同，并且您不会立即将其改回，（分配在可能由编译器优化）Chrome似乎突然恢复行动并更新元素。我还没有测试过所有可能的样式更改，但display、opacity 和backgroundColor 似乎工作得相当可靠。

作为一个测试，这对你有用吗？

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