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.
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 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
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
Martin graduated as an engineer in Computer Science from Slovak Technical University in Bratislava. He grew up in Liptovský Mikuláš in northern Slovakia next to the beautiful Tatra mountains. He is the developer behind our FV Player.
Leave a Reply