javascript - 移动设备上的奇怪行为 html5 视频

Question

我的网站 html5 视频在移动设备上有这个问题。在桌面版上一切都很好，工作正常。问题出在手机上。如果我打开侧边栏推送菜单然后将其关闭，我的视频控件就会消失。我只在 iphone 5s 上遇到过这个问题，然后我更改了一些标题和菜单位置设置，现在它也发生在我的 samsung android 上......不知道该怎么做......

我正在使用 video.js 插件。

Preserve-3d 不起作用:

video {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

我注意到，当我关闭菜单时，菜单按钮仍然处于事件状态，这可能是线索吗？

http://goo.gl/jDc4LK

Answer 1

jPushMenu.js，第 62 - 64 行

    $('video').each(function() {
      $(this).removeAttr("controls");
    });

当您点击“菜单按钮”时，这段代码将被执行。它从视频标签中删除以下属性:

controls="true"

它会导致“播放控件”消失

已编辑我检查了原始脚本，看起来这个功能是 not there

我想，您必须添加类似的“addAttr”行，在此脚本的第 70 行某处，如下所示:

jPushMenu.js，第 72 - 76 行

$('.lines, .text').show();
$(".x").hide();
$('video').each(function() { 
  $(this).attr("controls","true");
});

顺便说一句，以下也应该有效:

$('video').attr("controls","true");