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.