is there a limit of video elements in an html page on ios10 safari

Question

I have a html page which is use to display gifs. I want to optimize it by converting those gifs to video. I make them muted , set 'displayinline' and 'autoplay'.

I tested it on an iphone with ios 10 safari; But it is strange that when the number of videos is large than 16(maybe) , some of them (at a random position) will become an empty square. I set every video with the same 'src' value , not thing changed.

So, I wonder is there a limit of videos in a html page in ios safari?

<html>
<body>
<style>
video{
  width:100%;
  margin-bottom: 20px;
}
</style>
<p>
<video src="http://dev.mediapool.fi/demot/iosvideo/puuvideo.mp4" muted loop playsinline  autoplay></video>
</p>
<p>
<video src="http://dev.mediapool.fi/demot/iosvideo/puuvideo.mp4" muted loop playsinline  autoplay></video>
</p>
<!--....same video repeat 20 times -->
</body>
</html>

There should be no limit, however having this much of video will sure impact the memory — Mohammad Bashir Sidani

borbulon borbulon · Accepted Answer · 2018-06-11T17:47:11

This is very old; however, the short answer is "yes, there is a limit."

It totally depends on some combination of your device, your ios version and magic, but you cannot add more than x videos to a single page in ios. the first x videos will load just fine; subsequent videos added to the page will never get a readyState past 0, and will never load, and will never play. I've seen x as low as 4 elements and as high as 16 elements.

I wish I could be more specific with you about the number of video elements, or even the why (we can assume why but there is no official answer).

is there a limit of video elements in an html page on ios10 safari

2 Answers