iPad HTML web page issue

问题

I am trying to get to the bottom of an issue on a 4th generation iPad issue we are having. We keep getting the following error and the page refreshes so there is no way to debug this in developer tools on a mac:

"A problem occurred with this webpage so it was reloaded"

The page uses fullpage.js and renders 22 separate html5 (mp4) videos that run in the background of each full page/section.

Weirdly, if we change the code to only render say 15 videos the page works fine!

The videos are between 500KB and 3MB each. The videos are 33MB in total.

They are embedded like this:

<video id="video-transport" class="video-bg">
  <source src="videos/videoname.mp4" type="video/mp4">  
  <source src="videos/videoname.webm" type="video/webm">
  <p class="vjs-no-js"></p> 
</video>

Does anyone have any suggestions of what is wrong with the page? Is there some kind of upper memory limit or page size we are exceeding.

Is there an easy way of debugging this?

Thanks,

Phil

回答1:

No idea why it's breaking, but...

Have you tried using the preload property for the videos to prevent loading them on page load ? Related question

Or, if that doesn't workf for you, have you though a about using the fullpage.js lazy loading option the videos?

<video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
</video>

来源：https://stackoverflow.com/questions/39495679/ipad-html-web-page-issue

标签

javascript

ios

html5

ipad

fullpage.js