- User Guide
- How to create playlists
- Video Encoding for HTML 5
- How to use Video Lightbox effect
- How to use YouTube with FV Flowplayer
- How to set up quality switching
- How to use Vimeo Plus/Pro
- Google Video Advertising Options
- How to incorporate Google Ads (AdSense)
- How to use video ads (pre-roll and post-roll)
- Serving Private Videos via CloudFront
- Serving Private Videos with Amazon S3
- Amazon S3 MIME Settings
- How to setup a HLS stream with Amazon Elastic Transcoder
- How to use Google Analytics with FV Flowplayer
- How to use ads in FV Flowplayer
- VTT Chapters
- How to create subtitles
- How to use RTMP streams with Flash
- Compare WP Video Plugins
- Incompatible Plugins
- VAST/VPAID Ads
- Programmer's Guide
- How to Download Your Legal Invoice
- Video Site Development
Facing a hard to solve WordPress
problem? On a tight deadline?
Let us take care of it for youFoliovision Pro Support
proper relative path and syntax for splash image
Martin: “Hello, you can just use our shortcode editor to upload the splash…”
RTMP Stream of mp3 files
Martin: “Hello Jodi, supporting CloudFront for audio files is one thing, but serving…”
Adaptive watermark size
Martin: “Hello Olexander, thank you for the feature request, it is true that…”
gbowman: “When I add more than one video to a post using…”
crossdomain.xml access denied
Alec: “Thanks for sharing your solution Ganesh! I wish Amazon Cloudfront were easier…”
How to use Flowplayer in Wordpress template?
Martin: “Hello Satri, our shortcode is primarily [fvplayer]. We also don't support the…”
Alec: “Hi John, Neat idea, especially for logged in users. I think this…”
change subtitles color
Martin: “Hello paddy, I see you are already trying to do the CSS…”
- proper relative path and syntax for splash image
- Basic Principles
- Recommended codecs
- Encoding software
- Mobile video
- Which videos should be re-encoded
Basic Principles of Encoding Video for the Web
When encoding for the web, don’t forget you always remain reliant on both the outgoing bandwidth of your server and the incoming speed of your viewer’s internet connection. The smaller you can make your files, the higher your chances for smooth playback.
Aiming for perfect playback quality can only result in choppy video. The first place to cut back on file size is with resolution. The less pixels you have to compress, the smaller your file. There’s no point in making your video larger than the device window. The first two generations of iPads had only 1024 x 768 screens. The most they need is 960px x 540px. Once you’ve picked the right target size – do your viewers really need to see you speak in 1080p full HD or even 720p’s 1280 x 720 pixel – the next big hurdle is bitrate. You want to set bitrate as low as possible while maintaining quality.
- What bitrate to use depends on size and on content. High motion scenes require much higher bitrates not to tear. VBR (Variable Bit Rate) was set up to deal with these issues. VBR takes longer to encode but produces cleaner results. VBR is most commonly used for http delivery if video content (http progressive).
- On the other hand, do not use Variable Frame Rate. It will break your video on most devices or platforms. Always choose Constant Frame Rate.
- If the input video is interlaced, apply a deinterlace filter before encoding.
- If the input video does not have a sample ratio of 1/1 (square pixels), please apply a filter enforcing a sample ratio of 1/1.
If your original video has an aspect ratio of 16/9 and keeping the above caveats in mind you could encode to:
- a resolution of 960×540 pixels
- an average video bitrate between 1500 and 4000 kilobits per second
- an average audio bitrate between 96 and 192 kilobits per second
To get your video looking its best on the web, you’ll need to experiment with encoding settings until you get it right for your particular material. We recommend you create a short clip with different short samples of your source material to test until you get it just right. At the bottom of the article, we’ll give you some screenshots of what we consider to be good settings for Handbrake. You can use them for other software as well. Don’t forget to turn on 2-pass encoding while almost always give better results for just a bit more time spent encoding the first time.
MP4, WEBM and OGG are the containers for the following video and audio codecs:
|Container||video codec||audio codec|
|MP4||H.264 aka MPEG-4 AVC or MPEG-4 Part 10||AAC|
We did not cover the MPEG-4 Visual or MPEG-4 Part 2 video codec because it is not suitable as Flash fallback and will also not play in Internet Explorer in HTML5 mode. To avoid playback failures encode to the more modern MPEG-4 AVC.
Really not required. Except for a few corner cases concerning older browsers where you can failover to MP4 playback in Flash mode, either WEBM or MP4 will do the job as well, and better. One less thing to worry about unless you happen to have a lot of out of date Firefox and Opera users. Hint: such people are probably not watching much video on the web and have other browsers or flash for that. We’ve got you covered without Ogg but if Ogg suits your particular application, FV Flowplayer 5 plays Ogg perfectly.
MP4 and metadata
H.264 encoded videos carry their metadata – duration, frame rate etc. – in the so called “moov atom”.
By default encoding programs will insert the moov atom at the end of the video file which is suitable for playback of a local file in a desktop program. However, any kind of progressive download requires the metadata to be available right away for immediate playback. Otherwise the player has to wait for the entire video to be downloaded before playback starts.
Make sure to select an option in your transcoding program which puts the moov atom at the beginning of the file!
MP4 for iOS and mobile devices
MPEG-4 AVC is a powerful codec which allows very effective compression at various profiles and levels. As higher profiles and levels are decoding intensive, they are not supported by mobile devices to ease their processor workload.
Let’s take iOS as an example: Even the latest iPads will only play videos encoded at H.264 Main profile Level 3.1. But if you want to cater for the widest audience including viewers with iPhones and iPods and iPad generation 1 as well as older iOS versions you should stick with:
- Baseline Profile
- Level 3.0
- 1 reference frame
- Maximum bitrate limited to 1.5 times the average bitrate, but not over 10000 kilobits per second.
- Buffer size of 5 times the maximum bitrate, but not over 10000 kilobits.
- Maximum resolution of 640×480 px
While much of the best free software is based on the open source FFmpeg program, we recommend using a graphical frontend for FFmpeg, like Handbrake (Windows, Linux, OS X) or ffmpegX (for OS X). There are high priced transcoding programs around which are often very capable, but which you probably don’t need for basic web encoding.
Here are some screenshots with recommended settings
MP4 encoding sample
These settings play perfectly on iPad generation one as well as older single processor Android 2.3.3 Gingerbread telephones like the HTC Desire. And they look good on desktop. You can save substantial space and get a faster start by lowering the bitrate but if you do so, picture quality degenerates rapidly. Profile High and H.264 Level 4 give better looking video at lower bitrates but will be very jumpy on older/weaker Android phones or older iOS devices (iPhone 3GS, iPad 1). The settings above are the safe ones for a single codec across different devices.
If you want your video to look best in full-screen, use 1280×720 pixel resolution and change the “Average Bitrate (kbps)” to 2600. You can use a slightly lower numbers if your video is not so sharp. In that case make sure you follow the mobile video recommendations.
Pay attention to audio tab too! Set it to use AAC, make sure it’s not “Auto Passthrough”. That way the audio stream won’t be re-encoded and your video might not play in Internet Explorer and Firefox on Linux.
If you see multiple streams, make sure only one stream stays!
WEBM encoding sample
You can use FireFogg for WebM encoding- even though the interface looks clunky. It actually runs in Firefox as an extension and uses your computer’s processing power for encoding:
The settings are similar to the ones from HandBrake.
iOS on older iPhones for older devices has a resolution limit of 640×480 px and also the connection speed is also a problem. Old Android phones (like HTC Legend) can only play videos up to 480×320 px.
- You need to first encode your video for mobile:
- in the lower resolution and lower bandwidth (you can just set the width to 480px to make it load faster on mobile connection)
- make sure you use the “baseline” h264 profile
- Then use “mobile video” field of our plugin. Enable it in Settings -> FV WordPress Flowplayer -> Post Interface Options. Then in the shortcode editor you will get a special field for mobile video.
- That video will be served for each device with screen width lower than on equal to 320px and height lower than on equal to 480px. Even if the later iPhones’ screen is in reality 640x960px, it’s true size is calculated as 320x480px as it’s the so called “retina” display.
More about Video Formats
Currently 3 major video formats are used on the web.
- MP4 gives complete cross browser support with the aid of Flash
- WEBM gives HTML5 video support for the latest Firefox, Chrome and Opera browsers
- OGG gives HTML5 video support for older versions of Firefox and Opera
FV Flowplayer 5 also supports HLS (Apple HTTP Live Streaming) from M3U8 files.
Taken from Wikipedia.
By default FV Flowplayer 5 attempts to use HTML5 video, and if it’s not supported then Flash (9.0+) and MP4 is used. MP4 is enough for complete browser support, but providing WebM and/or OGG video gives you broader support for HTML5 video which is the preferred technology. Also note that Flash does not support byte-range requests, therefore random seeking will not work with MP4 in Flash mode.
Note that browser support of video formats is subject to changes – Chrome is planning to remove MP4 support, and Firefox is planning to add MP4 support. Your best bet for reliable HTML5 video is to provide MP4 and WEBM variants for each of your videos.
Safari on Windows is capable to play HTML5 video when QuickTime is installed.
HLS support so far is confined to on-demand streams because of the lack of HTML5 live video alternatives.
Which videos should be re-encoded for best compatibility with HTML5?
This format only plays on Flash-compatible devices. So make sure you include another version of the video in MP4 format for all the iOS devices and other people without Flash.
Since MOV format is not officially supported by HTML5, we recommend that you re-encode these videos into MP4.
MOV sometimes contains codec combinations that are not supported across all browsers. MOV videos don’t always play in all versions of Google Chrome web browser, even if plays fine in all your other browsers. We continue to do active research into Google Chrome video quirks as Chrome/Chromium appear to be the most problematic with MOV and MP4 videos. Fallback to WebM might help. We will be doing our own tests. If anyone has specific insight, by all means get in touch right away.
RTMP is not a format, but a protocol for effective video streaming of Flash video. It only works on Flash-compatible devices. Make sure you include another version of your video in MP4 format for all the iOS devices and other people without Flash.
This is a special case – it probably will play on iDevices, but won’t play in normal computer browsers if Flash is not installed, with exception of Safari.