向视频元素添加/删除类

Question

我正在开发一个自助服务终端式网页以显示选项菜单。单击标题会打开一个全屏视频，然后在视频结束时关闭返回菜单。

为了保持页面整洁，我想隐藏video 元素，直到视频真正被点击调用。我用 CSS 类做到了这一点。视频全屏打开，完成后关闭并再次添加 hide 类。

工作脚本

$(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";
    });
  })
})

如果用户自行退出全屏视频，我会遇到视频不隐藏的问题。我尝试使用基于 HTML5 视频 API 的$("#" + m).on("ended" || "resize", function()...，但没有奏效。我还考虑禁用点击或覆盖全屏div 以获取任何点击并强制视频一直播放，但这对我来说似乎很可疑。关于如何解决这个问题的任何想法？

Here's a CodePen demo of the content and script

Answer 1

空格分隔列表：

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

要让它发挥作用，你可能需要这个技巧：How to detect DIV's dimension changed?

更新：我能够捕捉到全屏事件：

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