javascript - 向视频元素添加/删除类

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