Streaming video on your WordPress site

Many questions I get are about being able to upload and stream video on your blog or site. The problems people run into are several. The most common is the ability to upload large files, which video usually is. Also classics like “I filmed and uploaded a clip with my iPad, but those on Windows can’t see it.” Or the other way around. Video is still a bit problematic, since it’s not as standardized as images or audio.

Today, with phones and tablets everywhere in the school world, the possibility of video is just a couple of button presses away. And with that, multimodality. Or just a little greeting from the class. In this short walkthrough I’ll suggest a fairly simple way to build your own video service à la YouTube. Or just to implement it directly in your WordPress installation (or your school’s WP Multisite), so your users can upload video directly into their post and let the server do the rest. Why serve your videos yourself, you ask? There are services like YouTube and Vimeo. Yes, there are plenty of arguments against this, but sometimes it’s worth the trouble. Maybe you want to own your data and store it on your own servers in Sweden? Maybe you don’t want ads embedded in your clips? Or maybe you want to lower the threshold and make it even easier to handle video by letting your users skip the extra step of uploading video to a third-party service like YouTube. Or maybe you just think it’s fun! ;)

This post requires that you (preferably) have your own server where you can install, among other things, FFMPEG, and also have access to php.ini to change upload size. Some (a few) web hosts give you this option. Since not everyone has that possibility, the post will both address those who just want to know more about the issues around video on the web (part 1) and those who can do something about it (part 2).

PART 1 | What is the problem with video on the web?

First of all we should probably look a bit at the issues with video on the web. I won’t go into depth, just skim through this a bit simplified.

File size

Video files are large. And they get larger the longer they are and even larger with high quality. Depending on where you are in the world, video runs at a number of fps - frames per second. In Sweden we most often use 25 fps. That means your video file contains 25 frames per second multiplied by the number of seconds the video lasts. That’s a lot of frames. If you roughly compare uploading an image to your blog with uploading a video that consists of thousands of images, you get the difference.

Video compression

Okay, that sounds like insanely large files. How come I can watch videos on YouTube and they start right away? Shouldn’t it take a looooong time before the video is downloaded? Partly your camera already compresses the video when you record, but this is where the server-side software does its work. What is compression? With the help of different codecs the software can “degrade” the video in different ways and thereby make the video file smaller. Simply put, removing information that we (preferably) don’t perceive, and also creating several different versions of your video in different resolutions (number of pixels). An example in audio is the mp3 format. An uncompressed audio file that takes up 30MB can, with compression to mp3, become about 3MB without you really hearing a difference (and that’s debated…). Also, for sites like YouTube, the whole video file doesn’t need to be downloaded before playback; some data is downloaded while you play the video. It’s streamed. But for that to work a small modification of your video file is also needed.

Different formats — different browsers

To make things more problematic, not all video formats work in all browsers. If we take the iPad’s Quicktime .mov, it works perfectly in Safari on a Mac, but not in Internet Explorer on a PC (unless Quicktime is installed). On the other hand, a Windows Media file will cause problems on a Mac, but works fine on a PC. Now some standardization is happening with HTML5 on the web and the biggest format is mp4. That format can be viewed in the major browsers, but there are a few more formats, for example WebM and ogg, which we’ll skip for now.

The dream scenario

What do we want? Say I have a class blog. We recorded a little greeting from the class with a phone. I write my post and upload the video directly in the post. What then happens — without me doing anything — is that the server compresses the file and makes a couple of different versions in different resolutions in mp4 format so everyone can watch the video. Someone viewing the post on a small screen (phone) gets a smaller video file, while someone sitting at their HD TV gets the largest file served automatically. The server also ensures the video can be played immediately and thus streamed without delay. Essentially the same thing Google’s servers do when you upload a video to YouTube. Another option is that you want your own YouTube — a place where you can upload videos to later embed on different blogs or sites. So… how do we do it?

PART 2 | Install FFMPEG on the server

As I wrote earlier this (basically) requires that you have your own server. Compression requires a lot of CPU power and disk space to store the files. Another thing to consider is bandwidth. We run Kunskapshubben (+ a bunch of other sites) at Årstaskolan this way with about 500–1000 served videos per day for about 500 SEK per month in server cost, so it doesn’t have to cost a fortune.

Server setup: LEMP - Linux, Nginx, MySQL and PHP.

Codecs

There’s a good guide on HWDMediaShare’s site where they go through step by step how to install all the codecs needed on your server if you run Linux, e.g. Debian/Ubuntu or similar. Follow the entire article and install everything you need. https://hwdmediashare.co.uk/learn/docs/41-advanced-documentation/176-hwdmediashare-video-conversion-tools

Php

When that’s done it’s time to fix the settings in php.ini upload_max_filesize = 2000M post_max_size = 2000M This gives us the ability to upload files up to 2GB, which should be enough for a while.

NginX

You also must change the setting in your http block in the NginX configuration client_max_body_size 2000m;

WordPress

Now it’s time to install the plugin for WordPress that will do the job - Video Embed & Thumbnail Generator. https://wordpress.org/plugins/video-embed-thumbnail-generator/ This plugin, as mentioned, also works in multisite environments.

Settings

Under Settings you’ll find “Video Embed & Thumbnail Generator” and here we have two tabs. Under “General” we can influence the display mode itself: make the player responsive, choose embed size, set generated thumbnails as the featured image and other options. Under the FFMPEG tab we find all settings related to compression. Here we must specify the path to FFMPEG on our server and that we want to use qt-faststart to set streaming headers for .h264. We can also choose how many simultaneous encodings we want to allow and that depends entirely on how much your server can handle. I’ve chosen to encode videos as 1080p, 720p, 360p and to replace the original file I uploaded with a file in the same resolution. This frees up some disk space. Also this is set to be done automatically when I upload the file. Further down the page you’ll find quality settings and the option to test the different FFMPEG settings so you can see that it works. Time to test When I upload my video file you can see that I set the upload limit to 500MB on this site (which I pay 150 SEK per month for and run a bunch of websites on). If we now go to “Tools” > “Video Encode Queue” we can see how it’s going. Then we create a post and choose the file as usual from “Add Media”. The plugin then adds a bit of shortcode and everything is ready. I’ll insert that clip below so you can see how it looks “for real”. A responsive player where I can choose the video quality according to the choices I made earlier about how the video should be encoded.

NOTE! If you choose the setting to replace the original, make sure users upload their video to the media library first and write the post afterwards and add the video. If, for example, you upload a .mov directly in the post the file will be replaced by an .mp4 when it’s done encoding and then the file won’t be found. It’s of course just a matter of adding the media again, but a tip nonetheless.

New Kunskapshubben

To wrap up, this is exactly how I built the new Kunskapshubben. After running on Joomla for many years it was time to move to WordPress. So far everything works great even though I have many hundreds of videos that need to be migrated. Good luck and feel free to ask questions in the comments!