Javascript 向视频元素添加/删除类

我正在制作一个信息亭样式的网页，以显示选项菜单。点击一个标题会打开一个全屏视频，视频结束后，该视频将关闭回菜单

为了保持页面整洁，我想隐藏

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）。在（“ended”| |“resize”，function（）…

）上，但没有成功。我还考虑过禁用单击或覆盖全屏

div

，以抓取任何单击并强制播放整个视频，但这对我来说似乎是不明确的。有什么办法解决这个问题吗

空格分隔列表：

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

要使其发挥作用，您可能需要以下技巧：

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

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

---

不，那不行。我想知道进入/退出全屏是否算不上调整大小…？也许如果你设置了一个代码片段或JSFIDLE，你会自己看到它，或者至少我们可以更容易地帮助你，只是把它添加到问题中。在同一个函数中使用带有

结束的
和
全屏更改
的空格分隔列表仍然不起作用我很忙，但是我可以运行两个不同的jQuery选择器。谢谢你的帮助。