html5 video under image

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 pointer-events: none, и это работает, но только в браузерах Firefox и Safari. Я знаю, что могу создавать свои собственные кнопки управления видео и размещать их выше изображения с более высоким индексом z, но я бы предпочел использовать собственные средства управления видео браузерами. Есть лучший способ сделать это?

Answer 1

Support for the CSS3 pointer-events property довольно неоднородный.

Чтобы достичь того, чего вы хотите без необходимости повторного осуществления контроля игрока, я думаю, у вас есть два варианта:

1. взглянуть на некоторых из доступных библиотек видео HTML5. Я уверен, что один из них позволит вам настроить элементы управления на требуемый уровень.

2. Разбейте изображение маски в верхнем, правом, нижнем и левом срезах и используйте их для создания элемента, накладывая его, если необходимо. Пока ни один из элементов каркаса не перекрывают управления видео, вы должны быть хорошо

Answer 2

К сожалению, единственный вариант (кроме разбивая изображение, чтобы он не затруднять), чтобы сделать свои собственные элементы управления и место их над прозрачным изображением.

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

Где 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 г-индекс, чем ваш прозрачный образ, сделать их исчезают, когда вы нажимаете мыши (или используете скрипт, который заставляет их исчезать, вы выходите за пределы определенных границ x/y) и т. д.