javascriptjquerycsshtmlvideo

Strange behaviour html5 video on mobile

I have this problem with my website html5 video on mobile devices. On desktop version it's all good, it works fine. The problem is on mobile. If i open sidebar push menu and then close it, my video controls disappears. I had this problem only on iphone 5s, then i changed some header and menu position settings, and now it happens on my samsung android too...No idea what to do..

I'm using video.js plugin.

Preserve-3d doesn't work:

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

I noticed, when i close the menu, the menu button remains active, could this be a lead?

Solution

  • jPushMenu.js, lines 62 - 64

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

    This chunk of code gets executed, when you hit "Menu button". It removes following attribute from video tag:

    controls="true"

    And it causes "playback controls" getting disappeared

    EDITED I've checked the original script, and looks like this functionality is not there

    I guess, you have to add similar "addAttr" lines, somewhere in the line #70 of this script, something like this:

    jPushMenu.js, lines 72 - 76

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

    btw, following should also work:

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