html5 플레이어를 가져 가면 크롬에서 작동하지 않습니다.

Question

mouseover에서 재생할 html 5 비디오를 얻으려고합니다. www.manart.de

이것은이다 : 그것은

이

사이트입니다 .... 내가 마우스를 가져 가면 바로 크롬에서 파이어 폭스와 사파리에서 비디오 공백을 잘 밖으로 작동하고 난 페이지의 다른 요소에 마우스를 가져 후에 만 ​​표시되기 코드 :

<div id="wrapper"> 
    <video id="video-example" width="880" height="495" poster="fileadmin/cover.png" loop> 
    <source src="fileadmin/schiffchen.ogg.ogv" type="video/ogg"></source> 
    <source src="fileadmin/schiffchen.mp4" type="video/mp4"></source> 
    </video>  
    </div><!--end wrapper--> 

    <script src="fileadmin/js.js"></script> 

는 그리고 이것은 JS이다 : 돕는

document.addEventListener('mouseover',hoverVideo,false); 
    var vid = document.getElementById('video-example'); 
    function hoverVideo(e) 
    { 
    if(e.target == vid) 
    { 
    vid.play(); 
    this.addEventListener('mouseout',hideVideo,false); 
    } 

    } 

감사합니다 !!!!

Answer 1

다소 이상하지만 포스터 프레임을 제거하면 (예외가 발생하지 않도록하기 위해 hideVideo 메서드가 정의되었음을 확인했습니다) 작동합니다 (fiddle).

포스터 프레임에 PNG 대신 JPG을 사용하여 같은 결과 (fiddle)로 시도했습니다. 그리고 비디오를 사운드로 대체하면 비디오가 재생되고 있지만 보이지는 않습니다 (fiddle).

Chrome에서 버그가있는 것처럼 보이지만 Google에서 검색했을 때 Google에서 그다지 많은 것을 포기하지 않았습니다 (내 용어가 잘못되었을 수 있음).

빠른 수정은 아마도 동영상이로드되었을 때 Chrome에서 동영상의 첫 번째 프레임을 표시하는 포스터 프레임을 제거하는 것일뿐입니다. 어쨌든 찾고있는 프레임과 거의 비슷합니다.

업데이트 :

또는 동적으로 재생이 시작되기 전에 플레이어에 컨트롤을 추가하고 즉시 (fiddle) 다시 제거 관련이 thread on a similar issue에 설명 된 해킹을 사용할 수 있습니다.

<div id="wrapper"> 
    <video id="video-example" poster="http://www.manart.de/fileadmin/cover.png" width="880" height="495" loop> 
     <source id='mp4' 
     src="http://www.manart.de/fileadmin/schiffchen.mp4" 
     type='video/mp4'> 
     <source id='ogv' 
     src="http://www.manart.de/fileadmin/schiffchen.ogg.ogv" 
     type='video/ogg'> 
    </video>  
</div> 

자바 스크립트 :

var vid = document.getElementById('video-example'); 
// add the listener directly to the video element 
vid.addEventListener('mouseover',hoverVideo,false); 

function hoverVideo(e) { 
    if (vid.getAttribute('controls') != 'true') { 
     vid.setAttribute('controls', 'true');      
    } 
    vid.play(); 
    vid.removeAttribute('controls'); 
    vid.addEventListener('mouseout',hideVideo,false); 
} 

function hideVideo(e) { 
    // do whatever you were going to do here, but omitting 
    // the method completely causes an exception 
    //vid.pause(); 

    // clean up the listener when finished 
    vid.removeEventListener('mouseout', hideVideo); 
} 

저자는 19

HTML 크롬에서 발생하지 않는 것을 확인하여 크롬의 버그 등의 문제를 확인했습니다