All geek questions in one place

HTML5 video stutters in a loop?

I have an HTML5 video element on my page, it scales to fill the whole background with the idea that it will loop in playback. This works fine in Chrome, but Safari and Firefox stutter in a loop. This is a good half second in Firefox. Any ideas?

Here is my markup for the video player:

<video id="vid" preload="auto" autoplay loop onended="this.play();">
  <source src="vid.mp4" type="video/mp4"/>
  <source src="vid.webm" type="video/webm"/>
</video>

I tried several things, for example, to fully control JS playback instead of relying on the browser to figure this out. But she always stutters. I don’t think that this is a problem with preloading, because if I do it all locally, the video loads instantly (obviously), but the same loop is there. Is this just a problem with these browsers?

I am tempted to create two instances of the video and just switch them using JS after each completion. That would be really dirty, but I'm not sure what other options I have.

+4
source share
1 answer

I had this problem and I really fixed it by setting the webm source to mp4 source. So he tried to download the webm video format first, and I had fewer stuttering when I tested it. The mp4 and ogv files were stuttering in Firefox, and it infuriated me, so I was amazed when the web files worked as intended.

<video id="vid" preload="auto" autoplay loop>
  <source src="vid.webm" type="video/webm"/>
  <source src="vid.mp4" type="video/mp4"/>
</video>
0
source

Source: https://habr.com/ru/post/1532358/

More articles:


All Articles