Chrome 10: проблема с пользовательским видеоинтерфейсом

Question

У меня есть элемент видео HTML5, который воспроизводит и взаимодействует с некоторыми пользовательскими элементами управления видео, которые я сделал. Элементы управления предназначены для постепенного появления, когда видео готово к воспроизведению и отображает прогресс, текущее время и т. Д. После обновления до Chrome 10 в этой части моего сайта существует несколько странных проблем (только в Chrome 10).

Элементы управления больше не исчезают, а обновления времени больше не отображаются. Я проверил данные журнала консоли, и они все еще извлекаются из элемента video. Это больше похоже на проблему CSS. Я обнаружил, что если я открываю инструменты разработчика во время воспроизведения видео, мои элементы управления видео внезапно появляются и работают, как обычно.

Это почти как если бы что-то вроде обновления DOM или чего-то другого, возвращало все в действие. Как будто пользовательский интерфейс отстает от того, что на самом деле находится в структуре 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 - там, где элементы HTML над видео или вокруг него не обновляются визуально, несмотря на то, что DOM отражает изменения.

Я обнаружил, что принудительное изменение стиля на затронутых элементах может решить проблему - до тех пор, пока новое значение отличается от старого, и что вы не сразу его изменяете (где назначение вероятно, оптимизировано компилятором) Кажется, что Chrome внезапно возвращается в действие и обновляет элемент. Я не проверял все возможные изменения стиля, но display, opacity и backgroundColor, кажется, работают достаточно надежно.

Как тест, это работает для вас?

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