I\'m using the following code to add click-to-play functionality to HTML5 video:
$(\'video\').click(function() {
if ($(this).get(0).paused) {
$(this).g
Torsten Walter's solution works well and it's a fairly elegant solution to the problem, and it's probably the best way to handle it, even if it doesn't handle click-to-pause. However, his solution got me thinking about a hacky way to do it, and I came up with this:
<div id="container">
<div id="videocover"> </div>
<video id="myvideo" />
</div>
$('#videocover').click(function(event) {
var video = $('#myvideo')[0];
if (video.paused) {
video.play();
}
else {
video.pause();
}
return false;
});
#container {
position: relative;
}
#videocover {
position: absolute;
z-index: 1;
height: 290px; /* Change to size of video container - 25pxish */
top: 0;
right: 0;
bottom: 0;
left;
}
Basically, it keeps the clickable cover up all the time to handle the click-to-play/click-to-pause functionality, but makes sure the cover doesn't overlap with the controls at the bottom of the video.
This is, of course a kludge, as it:
But I figured I'd put it out there.
Great answers here. Thank you for these. Here's a trick I figured out for making controls clickable, all jQuery.
$('#video_player').click(function(e){
var y = e.pageY - this.offsetTop;
//Subtract how much control space you need in y-pixels.
if(y < $(this).height() - 40)
{
//$(this).get(0).play();
//... what else?
}
});
You could try event.stopPropagation and see if that works. Though I think that would either stop the native controls from working, or just not do anything.
$('video').click(function(event) {
event.stopPropagation();
if ($(this).get(0).paused) {
$(this).get(0).play();
}
else {
$(this).get(0).pause();
}
});
If the browser considers the native controls and video all part of the same element (and I believe they do) you're probably out of luck. jQuery's event.target wouldn't allow you to tell the difference between a click on the video and a click on the controls.
So I think your best option is to build your own controls (old tutorial, still pretty straight forward). Or ask the browser devs to make a click on the video play/pause when controls are enabled. Seems like it should do that by default.
You could add a layer on top of the video that catches the click event. Then hide that layer while the video is playing.
The (simplified) markup:
<div id="container">
<div id="videocover"> </div>
<video id="myvideo" />
</div>
The script:
$("#videocover").click(function() {
var video = $("#myvideo").get(0);
video.play();
$(this).css("visibility", "hidden");
return false;
});
$("#myvideo").bind("pause ended", function() {
$("#videocover").css("visibility", "visible");
});
The CSS:
#container {
position: relative;
}
/*
covers the whole container
the video itself will actually stretch
the container to the desired size
*/
#videocover {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
I know this is an old question but I ran into the same issue and found an other solution! Playing the video on click and also pause it on click. But as the original poster I ran into problems with the controls. Solved the issue with jquery like this:
$("video").click(function (e) {
if(e.offsetY < ($(this).height() - 36)) // Check to see if controls where clicked
{
if(this.paused)
this.play();
else
this.pause();
}
});
I check the offset in the click and if it is over the controls my play/pause functions doesn't do anything.