CODEWITHSUNDEEP
javascripthtmlvideo
Jizbo Jonez
Jizbo Jonez

Reputation: 1290

html5 video under image

I have a video that is underneath a png image that has a transparent part for the video to show through.

<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>

How do I go about making the video clickable so people can access the video controls?

I have looked at CSS pointer-events:none property and this works but only in Firefox and Safari browsers. I know I can make my own video control buttons and place them above the image with a higher z-index but I would prefer to use the browsers native video controls. Is there a better way to do this?

Upvotes: 0

Views: 1040

Answers (2)

apsillers
apsillers

Reputation: 115930

Unfortunately, your only option (aside from breaking up the image so it doesn't obstruct) is to make your own controls and place them over the transparent image.

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

Where togglePlay is:

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"; 
    }
}

You can style the buttons however you like, e.g., place them directly over your video, give them a higer z-index than your transparent image, make them disappear when you mouseout (or use a script that makes them disappear you mousemove outside certain x/y bounds), etc.

Upvotes: 1

net.uk.sweet
net.uk.sweet

Reputation: 12431

Support for the CSS3 pointer-events property is pretty patchy.

To achieve what you want without having to re-implement the player controls I think you have two options:

  1. Have a look at some of the available HTML5 video libraries. I'm certain one of these will allow you to style the controls to the level you require.

  2. Break up your mask image into top, right, bottom and left slices and use these to frame your element, overlaying it if necessary. As long as none of the frame elements overlay the video controls you should be okay

Upvotes: 2

Related Questions