Self hosting videos

I asked this question yesterday on the Google+ RW group but there have been no answers, so I thought I would try here:

Last night I casually checked a Vimeo hosted video on my site and it looked like soft mush, even though I had a preference in my account to always show HD.

After checking on the Vimeo site I discovered they have created a new adaptive quality setting that sounds clever in theory but in practice there are a lot of complaints. In my own case the video looked reasonable on the Vimeo site but horrible when embedded elsewhere and I have a fast 76mbps connection.

The only way now to see a video in HD is to physically click on the HD button and then scroll to 720 for it to play, otherwise it appears to be playing at the lowest 270 setting so it looks something like a French impressionist painting. It’s horrible and I bet most people will never look for the option to manually select HD.

Vimeo has already been a source of annoyance because their callouts are slowing down the page loading so for the first time I am considering self-hosting the video and I wondered if there are any best practices here.

The video on my website is 695px wide at present on desktops and tablets but if I add a self-hosted video at that size I am concerned it will be unnecessarily heavy on some devices.

The only stack I have at present that could do this is Joe’s HTML5 video stack and it looks like I would have to prepare various format versions of the same video. Are there any other video stacks that are worth considering?

I purchased Hype a few years ago but I have never used it, however I seem to recall that it could output different sized versions and automatically serve the most appropriate size, so I wonder if that is a feasible option. Any thoughts or suggestions would be appreciated because the quality of the Vimeo video is just awful and I need to change this but I would rather not go the YouTube route.

EDIT: It worked fine before when fixed on HD with no buffering and Vimeo really seems to have this wrong with the latest changes that cannot be reversed by the user.

@ashleykaryl

Check the forums, as I recall, there is a thread that shows how to adjust the code to force HD on your video’s from Vimeo I believe…

You don’t have to do the different formats for the HTML 5 video stack, you just need the MP4 version as all modern browsers support MP4 format. But if you want older browser support then you must do the OGG and other format.

Joe’s Impact Stack will show video’s on any page.

HTH
Brad

Hi Ashley

I’m using Joe’s HTML5 stack to build (redesign) a creative video guys site . Originally we used vimeo & youtube but are ditching them because Vimeo in Indonesia is banned and Youtube is not happening for folks in china .

I had concerns about the weight of using screens with HTML5 videos 21 of em - phew , but seams to behave fairly well ,

Test site here we opted to build a Web and Mobile version , currently the desktop site is the one with videos working . We have opted to use only MP4 files and will be adding a download link with each video -

Desktop we opted for 720P 1280x720 and Mobile will be 480 x 270 -

Although it can be time consuming uploading the videos & doing poster frames , we felt it was worth it , the site has about 21 30’ videos & 9 Micro Films 2 to 3 minutes -

still working on it and may eventually add or drop a few videos

How long are your videos ?

Its also kind of an interesting time for videos as some peoples mobile phones pack more power than a typical desktop computer

Thanks @Turtle I really need to look at all the options here but this change at Vimeo is something that has occurred within the last week or so and they have effectively eliminated the HD setting unless the site visitor deliberately chooses it. You can see a forum post here https://vimeo.com/forums/help/topic:278740

The new auto setting should automatically stream at the highest resolution that the visitor’s browser can manage but it just isn’t working on my site or many others. I can manually choose the HD setting, but even then it isn’t remembered so if I refresh the page and come back the video will play again at 270 on the computers I have tested, so it looks awful.

@ianbeattie My site is at https://colourmanagementpro.com and I have just one short video there that is about a minute long. I am using CloudFlare but they do not cache video so this would either have to come from my server or through a service like Amazon.

On an old site I had a self hosted video that worked fine even when there was lots of traffic, however it was smaller in size and done before anybody had even thought much about smartphones or responsive sites, so I was a bit concerned that this might cause problems.

One of the good things about Vimeo was that it did at least resize automatically and serve up different versions depending on the visitor’s browser and I would almost like an option where I could upload one file for desktop and another for mobile as I believe Hype does. It doesn’t look like Joe’s HTML5 stack provides this option but I just found one called HTML5 Video stack that does.

In terms of traffic the site tends to have bursts of traffic when newsletters go out from different companies I am working with and that’s not been a problem up to now so I am just trying to assess what could be handled if the video is self-hosted. It’s a VPS with 5 gigs of Ram and an SSD so it should manage fairly well but I wouldn’t want it to affect other areas of the site if 500 people arrive at the same time.

There are two other points about using Vimeo that have caused me to question whether it makes sense anymore. The first is that I have had to do backflips to avoid major changes in saturated colours and YouTube or Facebook are better in this regard. The second is that callouts to their servers have a serious impact on page loading speed regardless of whether they choose to watch a video, so that will affect both sales and SEO.

You might want to check out the Player stack from Will Woodgate. It has a demo so you can test it out first, and its extremely customizable.