Add/remove class to video element

Question

I'm working on a kiosk-style web page to display a menu of options. Clicking on a title opens a fullscreen video which then closes back to the menu when the video ends.

To keep the page clean, I'd like to hide the video element until the video is actually called by a click. I did this with a CSS class. The video opens fullscreen and when finished, closes and adds the hide class again.

Working script

$(document).ready(function() {
  $('.cell').on('click', function() {
    var element = this.getElementsByTagName('video');
    var m = element[0].getAttribute('id');

    console.log(m);
    var v = document.getElementById(m);
    if (v.webkitRequestFullscreen) {
      v.className = "";
      v.webkitRequestFullscreen();
    }
    v.play();

    $("#" + m).on("ended", function() {
      this.webkitExitFullscreen();
      this.className = "hide";
    });
  })
})

I'm running into a problem of the video not hiding if the user exits full screen video on their own. I tried using $("#" + m).on("ended" || "resize", function()... based on the HTML5 video API, but that didn't work. I'd also considered disabling clicks or overlaying a full-screen div to grab any clicks and force the video to play all the way through, but that seems shady to me. Any ideas on how to approach this?

Here's a CodePen demo of the content and script

score 0 · Accepted Answer · edited May 23 '17 at 12:30

0

Space separated list:

$("#" + m).on("ended resize"

To make it work you might need this trick: How to detect DIV's dimension changed?

Update: I was able to catch the fullscreen event:

$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e){
    console.log("fullscreen change");
});

edited May 23 '17 at 12:30

Community

1
1

answered Feb 07 '16 at 21:13

Gavriel

18,880
12
68
105

Nope, that doesn't do it. I'm wondering if going in/out of fullscreen doesn't count as a resize...? – Brian Feb 07 '16 at 21:17
maybe if you set up a snippet or jsfiddle, you'll see it for yourself, or at least we can easier help – Gavriel Feb 07 '16 at 21:20
Just added to the question. – Brian Feb 07 '16 at 21:33
Using a space separated list with `ended` and `fullscreenchange` in the same function still didn't work for me, but I can run two different jQuery selectors. Thanks for the help. – Brian Feb 08 '16 at 02:21

Add/remove class to video element

1 Answers1