These days, displaying a video on your website can be a walk in the park. However, easy sometimes comes with a price, usually when you strive for the best. Sounds familiar? Take a seat, because in this blog we dive into the different platforms and techniques to play video on your website.
What techniques are available to play video’s on web?
1. Embed
Embedding in short, means loading content from an external website. Let’s say you see a potential video for your website on for example YouTube or Vimeo, you can simply add this video to your website in seconds by copying and pasting a snippet of code. These platforms make it very easy for you to add videos to your website and most of them are completely free! Also, when you need to upload a self made video you can do this within minutes.
Naturally, given these facts, for most users, this is the best technique. However, throughout the years web developers tend to avoid using this technique more and more. When embedding videos, your website users are not only downloading the video, but also large files to make sure the platform’s video player looks fancy and works smoothly. These files are quite bloated, because big platforms like YouTube and Vimeo have implemented a lot of features. While these scripts are loaded after main elements are loaded, your site will not feel much slower when embedding videos. However, it will heavily impact the Pagespeed score because the large files up the amount of data the browser needs to load and process.
This Pagespeed score is a tool developed by Google to test how your site grades in terms of speed and nowadays also affects how high your page indexes in Google. When this is important for your website, we advise you to avoid embedding videos on your website. In short –
Pro’s
- Free
- Fast and easy solution
- Automatic resizing and compression
- Professional video delivery that adapts to the user’s network speed (adaptive bitrate)
Cons
- Loads external scripts, that affect the speed of your website and thus your Google indexing
- You need to use the platform’s video player, with possibly branding/ advertisements
- You have to upload your video’s on the platform, which can be privacy vulnerable
2. Native web player
This technique makes use of the browsers native video player, therefore no external scripts need to load, only the video file. Also, naturally you will not see any branding/ advertisement in this video player. This technique is therefore much better quality wise but will sometimes take a bit more time because the benefits of automated platforms are not at hand. Later in this article, we will dive into the specifics on how to host the video file. In short –
Pro’s
- Free (when you host on your own server)
- No branding/ advertisements
- No external scripts, that negatively influence the Pagespeed score and thus your Google indexing
Cons
- Can take a bit more time to implement, depending on your hosting solution
- Manual resizing and compression needed for some hosting solutions
- No adaptive bitrate (you can deliver video’s for different screens however)
Which hosting solutions suits me best?
There are many solutions to easily host your videos, depending on your needs any of the 3 hosting solutions below can be suitable.
1. Webhosting server
Every website is hosted on a server, which makes it easy to just upload your video on to the same server. For example, WordPress makes it intuitive to upload a video as it is the same as uploading an image; it will take only a few clicks. When uploading videos manually to your own web hosting server, make sure to compress and if needed resize the video before upload (you can do this with online tools). There are some content management systems that do this automatically for you. But in most cases, this video hosting will therefore take a bit more of your time. When your video does not need to display full screen and is less than 10 seconds long, you can also use an animated WEBP. This is the new modern format that replaces GIF, which is basically an image and hence can be added very easily.
While hosting a video can be heavy on the server, we advise to only upload videos on your web server when you have a low traffic website with small videos. When your videos are below 1 minute and your daily traffic is only 200, it’s a minimal risk situation on most servers. When you go above that, we advise you to get in touch with a developer so they can analyse if your server is heavy enough. Feel free to contact us any time. For websites with high traffic, think about 1000 daily users we advise you to look at the two other options below so your videos are hosted on an external server.
2. Video platform
There are hundreds of different video platforms that developed their own video player so users can simply embed their videos. However, some video platforms also make it possible to just use their platform to upload videos and use them in a native web player. You simply upload your video to the platform and a URL is generated that you can paste in your native web player. The upside of this, is that the platform automates all compression and sizing. Because these platforms use servers that are heavily optimised for video delivery, video streaming will always be razor fast. The only thing you need is a paid subscription, ranging between 6 to 20 Dollars a Month. Some examples –
We advise using a video platform for most websites, because the costs are quite low and offer a solid solution. However, there are some edge cases where we advise to go the next step. These platforms have limitations when your video streaming demand goes beyond a certain point. For example – say you automatically play a video on the home page. This page has 100K monthly users who stream an average of 20 MB of video. This means your data transfer is about 2TB, which is too high for most normal subscriptions. Vimeo has a 2TB limit, when you go above that once, you are forced to upgrade your subscription to Enterprise. This means you will get a custom pricing offer, usually 100 times more expensive than the normal subscription. Sadly we’ve experienced that these enterprise limits are true for all platforms. Cloudflare uses a streaming minutes limitation, when you go for the most expensive subscription, the limit is set to 50K minutes.
3. Spaces server
While the above Enterprise subscriptions are only reasonable for multinationals, we started experimenting to find a solution with a fair monthly price. We wanted to avoid hosting videos on a specialised video platform. To do this, on our DigitalOcean servers, we are able to set up special spaces servers where we can host the video files. These servers are scalable, fast and reliable so we can live up to the video platforms server. The upside to this is that there are no limits and users just pay based on their data needs. Compared to business subscriptions, this solution can sometimes even be 100 times cheaper. To give a rough example, when there is demand for 2TB data transfer a month, the monthly price will come down to $15.
While this is quite a custom solution, a developer or IT employee needs to compress and upload the video files. At a later stage, we will develop a tool to compress, resize and upload files to the spaces server. Which will make this the most ideal solution there is for larger websites.
Conclusion
We advise you to use embedded players when Google indexing/ pagespeed is not that important for your website. In most situations, we advise to choose for quality and use the native web player. Especially in the future, these native web players will get support for adaptive bitrate, which means that you can insert one link that contains multiple sizes. Just like embed players already do, the browser will then choose what video to play based on the user’s network speed.
If you have any questions about video streaming on the web, feel free to contact us!