问题
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>回答1:
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).
回答2:
Playing videos is a CPU intensive task, and also will use memory, as Mohammad notes, and network bandwidth.
Many devices will have hardware support for video playback to help speed it up and reduce processing and battery usage. However, this will generally not be designed to support many videos playing at the same time.
Most devices will demonstrate some issues with the type of test page you are describing - the symptoms may be different on different browsers and different machines, but pretty much all are going to struggle to play this many videos simultaneously.
A typical approach to this type of page, although it may not meet your needs, is to have thumbnails for all the videos and to start playing them when one is selected or hovered over.
来源：https://stackoverflow.com/questions/45435424/is-there-a-limit-of-video-elements-in-an-html-page-on-ios10-safari