Compressing HTML5 Video Background

Hey everyone I need some assistance and advice compressing a raw, 12 second duration, 234mb, 1080p, .mov video file for use on the web as a fullwidth background. (height defined, width as cover, aka not full page just a slider)

I'm using Adobe Media Encoder CC. The video slider calls for a .mp4 and a .webm. I added a (3) gaussian blur and a smooth 29.97 frame rate to each output. The files come in at 17.3mb for the .webm, and 11mb for the .mp4. This is still at 1080p with the slight blur to bring down file size. The videos look acceptable at these settings on a full 1080p monitor.

However, I would prefer to get these videos down to roughly 5-8mb since they will be used on a website. The problem is when I compress these videos further the quality gets bad to the point that it just doesn't look good at all. I really like where they are at right now but I know the filesize is just too big.

Also keep in mind the video is replaced by an image on cell phones and tablets for quicker loading.

Any advice? I'm sure I could do some editing and compression in Adobe Premier but I just learned how to use the simpler encoder, I'm not familiar with Premier.

Thanks

 

http://bassltd.com.s50556.gridserver.com

Here's a link, just running the video in the slider. It doesn't work well in safari or firefox right now. Have to make some .htaccess edits. But if you have chrome or opera it will work fine.

As you can see it looks decent when you stretch your browser window. That's 17mb .webm file. The raw 234mb file obviously looks crisp... But to me it doesn't even look like 17mb, I would think a 17mb video would be cleaner than it is now. That's why I'm hoping there's a way to get it down to 5-8mb and still look decent.

 

I wouldn't compress that video anymore than it is.
You will lose video quality. In fact I think you can make the video bigger in size and in file size.
17mb should load on any device with speed. Even 3g connections should be able to stream that file size with no issue.
Most users have 3g or faster connection. It should not be an issue.

When you export from premiere I usually select the Youtube highest quality and export a .mp4
If you have a final output under 100mb you should be fine. If your worried about bandwidth usage.
Which you shouldn't be most hosting companies allow you tons of bandwidth . but if you are
Just upload to youtube and use that as the video host your video. There are plenty of ways to get the slider to use a youtube video in full screen.

 

Thanks for the reply.

The only thing I'm worried about is loading time on slower connections. It's going to be on the homepage and will be one of the first things visitors see.

 

lets put it this way. if they on a connection so slow not able to stream video. maybe they shouldn't be on the website.

 

Thanks a bunch for the advice. I was getting (streaming) mixed up with (downloading).

 

With the new HTML5, the developers can utilize Localstore, which is better than using cookies in most cases. WebDesigners gain more control because they can now play Videos/Music natively in the browser and because browsers nowadays feature hardware acceleration, this will probably become the ideal solution for sites such as YouTube etc (YouTube already has a HTML5 video api).

 

With the new HTML5, the developers can utilize Localstore, which is better than using cookies in most cases. WebDesigners gain more control because they can now play Videos/Music natively in the browser and because browsers nowadays feature hardware acceleration, this will probably become the ideal solution for sites such as YouTube etc (YouTube already has a HTML5 video api).