html5 이미지 아래의 이미지

Question

나는 비디오가 보이게하는 투명한 부분이있는 png 이미지 아래에있는 비디오를 가지고 있습니다.

<div id="Layer2" style="position:absolute; z-index:2; left: 0px; top: 0px; width: 960px; height: 640px; visibility: visible"> 
<div align="left"><img src="http://www.mysite.com/wp-content/uploads/picture.png" width="960" height="640" /></div> 
</div> 
<div id="Layer1" style="position:absolute; z-index:1; left: 251px; top: 91px; width: 640px; height: 360px; overflow: hidden; visibility: visible; "> 
<div align="left" >[FMP poster="http://www.mysite.com/wp-content/uploads/thumb.jpg" width="640" height="360"]http://www.mysite.com/wp-content/uploads/movie.webm[/FMP]</div> 
</div> 

사람들이 비디오 컨트롤에 액세스 할 수 있도록 비디오를 클릭 할 수있게 만드는 방법은 무엇입니까?

나는 CSS 포인터 이벤트를 보았습니다 : none 속성이며이 기능은 Firefox 및 Safari 브라우저에서만 작동합니다. 내 자신의 비디오 컨트롤 버튼을 만들고 더 높은 z- 인덱스로 이미지 위에 놓을 수는 있지만 브라우저의 기본 비디오 컨트롤을 사용하는 것을 선호합니다. 이 작업을 수행하는 더 좋은 방법이 있습니까?

Answer 1

Support for the CSS3 pointer-events property은 꽤 고르지 않습니다.

1. 가능한 HTML5 비디오 라이브러리의 일부에서보세요 :
   난 당신이 두 가지 옵션이 생각하는 플레이어 컨트롤을 다시 구현하지 않고 당신이 원하는 것을 달성하기 위해. 나는이 중 하나가 당신이 요구하는 수준으로 컨트롤을 스타일 할 수 있도록 해줄 것이라고 확신합니다.

2. 마스크 이미지를 위쪽, 오른쪽, 아래쪽 및 왼쪽 슬라이스로 분할하고 요소를 프레임에 넣고 필요한 경우 겹쳐서 표시하십시오. 한 프레임 요소 중 어느 것도 비디오 컨트롤을 중첩하지 않기 때문에 당신은 괜찮을 것 같네요

Answer 2

불행하게도, (옆으로는 방해가되지 않도록 이미지를 깨는에서) 당신의 유일한 옵션은 자신의 컨트롤과 장소를 만드는 것입니다 투명 이미지 위에. togglePlay이

<video controls="false" id="myVid"> 
    ... 
</video> 
... 
<img src="play.png" id="playButton" onclick="togglePlay()" /> 

:

function togglePlay() { 
    var vid = document.getElementById("myVid"); 
    var button = document.getElementById("playButton"); 
    if(vid.paused) { 
     vid.play(); 
     playButton.src = "pause.png"; 
    } else { 
     vid.pause(); 
     playButton.src = "play.png"; 
    } 
} 

당신은 당신이 좋아하지만, 직접 영상을 통해 그들을 배치, 예를 들어, 버튼의 스타일을 그들에게 당신의 투명한 이미지보다 higer Z- 색인을 줄 수있는, 그들을 만들 mouseout (또는 특정 x/y 경계 밖으로 벗어나게하는 스크립트를 사용하면) 등이 사라집니다.