向视频元素添加/删除类

Add/remove class to video element

本文关键字：删除 添加 视频 元素      更新时间：2023-09-26

我正在开发一个亭式网页来显示选项菜单。单击标题将打开全屏视频，然后在视频结束时关闭回菜单。

为了保持页面干净，我想隐藏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以抓取任何点击并强制视频一直播放，但这对我来说似乎很阴暗。关于如何处理这个问题的任何想法？

这是内容和脚本的 CodePen 演示

空格分隔列表：

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

要使其正常工作，您可能需要此技巧：如何检测DIV的维度更改？

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

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