Chrome 10 : 맞춤 비디오 인터페이스 문제

Question

나는 내가 만든 맞춤 비디오 컨트롤과 재생되고 통신하는 HTML5 비디오 요소가 있습니다. 이 컨트롤은 동영상 재생 준비가 완료되면 사라지고 진행 상황, 현재 시간 등을 표시하도록 설계되었습니다. Chrome 10으로 업그레이드 한 후 내 사이트 (Chrome 10에서만) 주변에 몇 가지 이상한 문제가 있습니다.

컨트롤이 더 이상 사라지지 않으며 시간 업데이트가 더 이상 표시되지 않습니다. 콘솔 로깅 데이터를 점검하고 비디오 요소에서 여전히 검색 중입니다. 그것은 CSS 문제와 더 비슷합니다. 비디오가 재생되는 동안 개발자 툴을 열면 비디오 컨트롤이 갑자기 나타나고 항상 작동하는 것으로 나타났습니다.

마치 DOM을 새로 고치는 것과 같은 것이 거의 모든 것을 다시 작동시켜줍니다. UI와 마찬가지로 실제로 DOM 구조에 뒤떨어져 있습니다. 아주 이상한!

이 부분에 대한 도움이 필요하십니까?

자바 스크립트 :

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

크롬 일부 스트를 가지고 y 비디오 버그는 버전 10에 나타났습니다. 실제로이 문제를 직접 경험했습니다.

맥 OS X와 ​​Windows에서

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

, 크롬 (10)는 종종 그래픽 손상을 표시하고 때때로 HTML5 비디오가있는 페이지에서 제대로 텍스트 선택을 그리는 데 실패 할 수 있습니다. 대부분의 경우 비디오를 통해 탐색하는 것이 급격히 느려지거나 느려집니다. Windows에서 위에서 설명한 문제를 경험 한 적이 있습니다. DOM이 변경 사항을 반영하더라도 비디오 위나 주변의 HTML 요소가 시각적으로 업데이트되지 않는 경우가 있습니다.

영향을받은 요소의 스타일을 강제 변경하면 문제가 해결 될 수 있음을 알았습니다. 새 값이 이전 값과 다르면 즉시 변경하지 않을 것입니다. 아마도 컴파일러에 의해 최적화 된 것입니다.) Chrome이 갑자기 다시 작동하여 요소를 업데이트하는 것 같습니다. 가능한 모든 스타일 변경을 테스트하지는 않았지만 display, opacity 및 backgroundColor이 매우 안정적으로 작동하는 것처럼 보입니다.

테스트와 마찬가지로 효과가 있습니까?

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