CODEWITHSUNDEEP
htmlhtml5-videofullscreen
Novice
Novice

Reputation: 411

click handler on fullscreen html5 player

I want to understand if we can have an onclick handler along with video tag in html5 when the video is playing in fullscreen. I tried on safari and chrome but it didnt work.

Any pointers will be helpful.

Thanks.

Upvotes: 0

Views: 72

Answers (1)

InfestedTaco
InfestedTaco

Reputation: 146

You can set up a simple click handler with jQuery which will work even if the video is in full screen:

$('#vid').click( function(){
  /* Do stuff */
});

If you want the click handler to work ONLY when the video is full screen, you could set a variable based on the event that gets fired when a video switches between full screen and regular. Then you could check the state in your click handler:

Take a look at this snippet:

var fullscreen = false

$('#vid').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
  var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
  var event = state ? "FullscreenOn" : "FullscreenOff";

  if (event == "FullscreenOn") {
    //set state to fullscreen
    fullscreen = true
  } else {
    fullscreen = false
  }
});


$('#vid').click(function() {
  if (fullscreen) {
    alert("You clicked a fullscreen video!");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="vid" width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />Your browser does not support HTML5 video.
</video>

Upvotes: 1

Related Questions