Video and WordPress (WordCamp 2014 presentation)

How to and why create your own HTML5 video

About the author of this presentation

Content of this presentation

All the video services are so great these days…
So why should anyone be bothered by his own video if the video services these days are so great?
 

We give you the reasons.
Plus your popular video service won’t be here forever.

Video encoding

With more power comes more responsibility, so it’s good to know something about video encoding.

The above figures are not exactly right, we often mix container with codecs, but that’s not the point.

The current situation of website video

What formats are really needed for your HTML5 video?

Mobile video is super important

The above list grows longer, as we get asked about more and more obsolete formats.

The future

The future future

Video encoding – Practical tips

Learn from the best and have a look at what Vimeo is using!

First prepare your MP4 files – use the above parameters

We recommend using a free software called HandBrake

That’s a lot of dials, but we only need to use the above

Here’s a description of the controls

Here’s a description of the controls

Audio codec is equally important – use AAC

For best compatibility also encode your video into WebM format

We will use FireFogg for WebM – the interface looks clunky…
It actually runs in Firefox as an extension and uses your computer’s processing power for encoding

…but there is less stuff to worry about than in HandBrake

A view of ready to go files in the file manager

Hosting for your video

How to get it among people and most importantly what is the fastest way?

Basic options for your own video hosting

When using your own server, there is a lot of things to look after

We had clients complains when testing our videos with 50 LoadImpact simulated users on 100Mbit server connection speed

What web servers to use. Make sure you use correct mime type

CDN is the best option for video hosting

CDN stores your videos on multiple videos around the world and the video player will pick the nearest server automatically for fastest delivery speed.

We compared video download speed on our own site and on TheGuardian.com. While their video took 1.25 seconds to buffer, our took 6.3 seconds. Looks like our server is not able to serve the video quickly in Bratislava (Europe).

We also tested Amazon S3 and Amazon CloudFront. Amazon CloudFront is as good as what a big media site like TheGuardian.com is using, so we recommend using a CDN like that.

Various video services are also interesting. They take care of video encoding as well as hosting for your. Yet allow you to use your own player.

Download protection makes sure your video can’t be hot-linked from other websites

Conclusion

Use our Amazon AWS (S3 + CloudFront) illustrated guide to get CDN hosted videos.

Vimeo Pro is also a great option, if you purchase FV Flowplayer license and install Pro extension!

What to use in WordPress

WordPress 3.9 added video playlist, so it looks better and better…

…however there is still a place for plugin like FV Flowplayer.
The shortcode is quick and easy, but so are the limited video options.

FV Flowplayer provides a video playlist and a lot more

Our shortcode is loooong.

But our plugin also has a shortcode editor!Just hit “Add Video”button and you will get the standard WordPress Media Library uploading.

Which looks like this when using a playlist.

We support multiple video formats as well.

And our video checker checks the video for you!

Amazon S3 signed protected links are supported as well.
The video URL from the shortcode gets the access keys parameters.

Basic outline of our video suite

Further reading – Resources used for presentation

• Why use your own video
• How 4K video works
• Wikipedia – Variable bitrate and multi-pass encoding
• Mozilla Developer Network – HTML5 video formats
• Apple – HTTP Live Streaming FAQ