HTML5 video disappearing in Safari after clicking back button

Question

A client of mine is reporting an issue in OSX/Safari 6.2 where a MaxCDN-hosted video loads fine on initial page load, but after clicking away from the page and returning using the browser’s “back” button, the video is blank.

I’ve tried extensively to replicate the issue, but having tested this on three separate Macs and also with Browserstack I just don’t see it. However it seems to be affecting all computers in the client’s office.

Here is an isolated test which exhibits the same problem: http://artworking.uk/tmp/video.html

When my client clicks on the link at the top of the page and then hits back, the video just won’t show up.

Googling the issue didn't shed any light unfortunately.

Full code is here:

<video loop autoplay>
    <source type="video/mp4" src="http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/background.mp4">
    <source type="video/webm" src="http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/background.webm">
    <object class="background__video" type="application/x-shockwave-flash" data="http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/flashmediaelement-cdn.swf">
        <param name="movie" value="http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/flashmediaelement-cdn.swf">
        <param name="wmode" value="opaque">
        <param name="flashvars" value="file=http://p.epoch-vod-cdn.epochdesign.netdna-cdn.com/vod/epoch-vod-cdn.epochdesign/background.flv&amp;isvideo=true&amp;controls=false&amp;autoplay=true">
    </object>
</video>

Answer 1

I am not a technical expert on this. I had a similar problem and from my research I think I have found a solution. It is working for me and perhaps you can try it out and let the forum know the outcome.

My problem: when I clicked back button, the video was not loading. My observation: it is not an issue with video. Its a browser issue on triggering page load. It is based on the fact that my init functions were not being triggered.

Solution

    $(window).bind("pageshow", function(event) {
      if (event.originalEvent.persisted) {
          window.location.reload();
      }
    });

On applying the solution, the page was loaded properly

Reference: Mobile Safari back button

Hope this helps.