添加/删除视频元素的类

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.

为了保持页面清洁,我想隐藏视频元素,直到通过点击实际调用视频。我用CSS类做了这个。视频全屏打开,完成后关闭并再次添加隐藏类。

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?

如果用户自己退出全屏视频,我就会遇到视频无法隐藏的问题。我尝试使用$(“#”+ m).on(“结束”||“resize”,function()...基于HTML5视频API,但这不起作用。我还考虑禁用点击次数或覆盖一个全屏div以获取任何点击并强制视频一直播放,但这对我来说似乎很阴暗。有关如何处理此问题的任何想法?

Here's a CodePen demo of the content and script

这是内容和脚本的CodePen演示

1 个解决方案

#1

Space separated list:

空格分隔列表:

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

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

为了使它工作,你可能需要这个技巧:如何检测DIV的尺寸变化?

Update: I was able to catch the fullscreen event:

更新:我能够捕获全屏事件:

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

#1