HTML5 video stutters on loop?

Question

I have an HTML5 video element on my page, it's scaled to fill the entire background with the idea being that it will loop as it plays. This works fine in Chrome but Safari and Firefox have stutter on loop. It's a good half a second in Firefox. Any ideas?

Here's 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've tried a number of things, like controlling the playback entirely with JS instead of relying on the browser to figure it out. But there's always the stutter. I don't think it's an issue with preloading because if I do it all locally the video loads instantly (obviously) but there's still the same loop. Is this just an issue inherent in these browsers?

I'm tempted to create two instances of the video and simply toggle them with JS after each finishes. It'd be really dirty but I'm not sure what my other options are.

Answer 1

I solved it by removing the audio track of the .mp4 during encoding. Not Ideal if you need the audio but it worked well in my case.

Answer 2

I had this issue and I actually fixed it by putting the webm source before the mp4 source. That way it tried to load the webm video format first, and it had less stutters when I was testing it. mp4 and ogv files both had stutters in Firefox and it drove me nuts, so I was amazed when webm files seemed to work as intended.

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