I have a webapp written in HTML5.
The Home page contains a <video>
tag.
The video is correctly played when I load the page for the first time, and if I use controls (pause, play, fullscreen) too.
In order to maintain the webapp always in the fullscreen view, I used only one html page, and when a button (or an anchor) is clicked, I hide the container div (representing the content of the logical "home page"), and show the selected one, when the "home" button is played I show again the original container div.
Originally, the video continued playing when I clicked a button to pass to another virtual page, so I pause it by jquery.
The problem is: only on iPad, when I come back to the first container (that means the home page), the video is no more available, I can't see the poster and the video itself, and the div is black screen.
Some notes I hope could restrict the problem:
- The video is statically loaded in a
<video>
tag and source attribute. - I've tried to start with an empty src and load it by jQuery (as explained in many tutorials and in stackoverflow too), it's the same.
- The same if I try to create a playlist in
which I select different videos and load the selected one in the
<video>
tag using Javascript. - I also tried to reload the page with jQuery, but doesn't work.
The constant beahviours are the following:
- Every technique I tried to implement is working well on PC with Firefox and on the Mac with Safari.
- The problem on the iPad appears only when I try to come back to the initial page.
I'm not convinced the problem depends on the technique of show/hide I used, but on the iPad behaviour. I've read some other ways to maintain the webapp in fullscreen view, but apply only to <a>
tags (such as this:), I need div stylized as buttons (and managed in jQuery) too.
Thanks if someone can help