Youtube/vimeo/any 호버에서 재생되는 비디오 축소판 (팝업 없음)

마우스를 올리면 재생되는 youtube/vimeo/모든 비디오 축소판을 만들어야합니다. 누군가 이걸하는 법을 제게 가르쳐 주시겠습니까? 나는 자바 스크립트를 추측하지만, 연구를 통해 어디에도 가지 않았다. 팝업을 원하지 않습니다. 단순히 비디오가 미리보기 및 재생과 동일한 크기로 유지됩니다.Youtube/vimeo/any 호버에서 재생되는 비디오 축소판 (팝업 없음)

마지막으로 10x5 격자로 전체 페이지가 표시됩니다.

당신이/재생 유혹에 비디오를 일시 중지 할 수 있습니다 mouseleave mouseenter를 사용

출처

2014-02-11 user3277125

이와 비슷한? http://stackoverflow.com/questions/15556552/auto-pause-or-play-html5-video-on-hover –

안녕하세요, 게시하기 전에 이걸 보았습니다.하지만 필요한 것은 미리보기 이미지 위에 올려 놓고 동영상을로드하는 것입니다. 미리보기 이미지의 정확한 크기 따라서 미리보기 이미지는 링크이며 동영상의 자리 표시 자입니다. 이 자습서에는 별도의 텍스트 링크가 있습니다. – user3277125

그럼 왜 그냥 같은 코드를 사용하지 않고 마우스를 올리면 동영상의 컨테이너를 타겟팅할까요? –

감사하고 ... 이런 식으로 뭔가 작업을해야합니다 :

$("#video-holder").mouseenter(function(){ 
    document.getElementById('video1').play(); 
}); 
$("#video-holder").mouseleave(function(){ 
    document.getElementById('video1').pause(); 
});

HTML

<div id="video-holder"> 
    <video id="video1"> 
     <source src="..." type="video/ogg"> 
    </video> 
</div>

자바 스크립트를

http://jsfiddle.net/yD49P/

출처

2014-02-11 21:19:55

안녕하세요 덕분에 훌륭하게 작동했습니다. 동영상을 배경으로 마우스를 가져 가면 배경 변경도 할 수 있습니다. 죄송합니다. – user3277125

@ user3277125 비디오의 배경이 혼란 스럽습니다. 당신은 그것을 볼 수 없을 것입니다 ... –

div를 추가했거나 기존 비디오 홀더를 더 크게 만들면 그냥 의미 할 것입니다 – user3277125

Youtube/vimeo/any 호버에서 재생되는 비디오 축소판 (팝업 없음)

답변

관련 문제