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

添加/删除类到视频元素

1 个答案: