Like @hreinnbeck said, try WebM again. Maybe type exporting with a higher bit rate? I use it for 1080P video and it looks fine. The only issue I have found is when duplicating the video frame to a <canvas> element, the colors are different. I am guessing this is because they are operating in different color spaces? I need to look into it more.
The benefit to moving the video out of Caspar’s video player is you can do stuff like this (breaking up the video) with HTML Canvas.
Here is the reference I used when setting it all up.
I also asked this question a while ago and was wondering if anyone had any updates on injecting live video into an HTML template?