FLOWPLAYER DRIVE

Flowplayer Drive is an all-round solution for online video sharing and publishing. It makes the task of uploading, managing, sharing, and publishing videos extremely simple without sacrificing on quality and speed, and utilizing the latest web video technologies.

Sharing videos or publishing them on your site can be complex, time consuming, and costly. Flowplayer Drive aims to make it simple and quick.

Flowplayer Drive will not burden the users with technical jargon or leave them on their own to figure their way out of a jungle of checkboxes and pull-down menus with esoteric settings for various video formats. It doesn't get much easier: you shoot and upload, we stream it to your audience, whatever their device.

Flowplayer Drive caters for many needs. Upload videos directly from your smartphone for quick sharing by mail or social media; or shoot with professional gear, edit, upload and embed on your website.

You can also integrate Drive with your own applications using the Drive API.

Using Flowplayer Drive

Overview

Unless you already have a Flowplayer account, you need to create one to start using Flowplayer Drive.

Once you have an account and are logged in, you can start uploading videos by just dragging and dropping them onto the library view, or clicking "Upload videos" to select files.

After uploading the video originals, Flowplayer Drive automatically encodes them for viewing on today's web browsers and devices. The encoded files, along with the originals, are stored in your video library.

Once the videos have been uploaded and encoded, they'll show up in your video library and you can rename, unpublish, or delete them.

You can share links to video galleries, or embed them onto your own webpage.

There are no limitations to how many videos you can upload, encode, and stream to your audience.

An additional Flowplayer license enables you to add your own logo and brand name to the player.

If you are tight on budget you can cut your streaming costs by half by choosing to encode to watermarked videos: The transcoded videos will be branded with a small Flowplayer logo in the bottom left corner.

The toolbar

At the top of the main video view you can see a black toolbar. This provides access to most functionality in Drive.

IMG

  • Click 'upload' to add new videos to your account by uploading them.
  • Click on grid and list symbols at the right end of the bar to switch between the grid view and the list view

Additional functions become available when you select one or more videos by clicking on their title areas.

IMG

The "Play", "Unpublish", "Publish" and "Delete" functions are described below.

Managing videos

  • To rename a video, click on its title, type in a new one, and hit enter, or click outside the box.
  • To delete a video, select it by clicking on the thumbnail area, and click Delete on the menu ("delete" to confirm).
  • To make a video private, select it and click Unpublish. This will hide the video's public link and make it invisible from previously shared embeds. To make it public again, click "Publish".

Sharing videos

To share links to videos on Flowplayer Drive, clic the thumbnail of the video you want to share, and click "Play all" on the top menu. This opens the 'General' tab which offers you among other things a Share URL. Copy the link and paste it into an email, webpages, or social media to share. Click "x" or hit esc to close the view. - Here is a real example which will look like this on your site.

Please note that the links — though hard-to-guess — are public, i.e. viewable by everyone who knows them.

Embedding videos on websites

To embed a video on your webpage, select the video by clicking on it. A pane with details on the video opens. Then click on the 'Embed' button.

Website setup example

The Embed tab offers you several ways to grab the player embed code. We explain two of them here, just try which one fits your needs best.

Simple

Click on the 'Flowplayer' button, and you'll see the simplest embed code which looks like this:

<script async src="//flowplayer.org/6/flowplayer.js">
{"src":"202777/84049","controls":true,"shareable":true}
</script>

HTML

Simply paste the above to your page where you want to place the player.

That's all. Can't get easier than that.

Play around with custom options, looks, and branding the corresponding tabs.

view standalone page

Old syntax

If you're interested in what's going on under the hood or want to customize the player even further, click on the 'Old syntax' button.

The first snippet goes in your page's <head> section:

<link rel="stylesheet" href="//releases.flowplayer.org/6.0.5/skin/minimalist.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
<!-- Include the line below if you want to use the HLS.js plugin to avoid flash use on modern browsers -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js"></script>
<!-- Include lines below to support multiple resolutions via quality selector plugin -->
<link rel="stylesheet" href="//releases.flowplayer.org/quality-selector/flowplayer.quality-selector.css">
<script src="//releases.flowplayer.org/quality-selector/flowplayer.quality-selector.min.js"></script>

HTML

This should be copied in your page's <body>:

<div class="flowplayer minimalist"
data-rtmp="rtmp://rtmp.flowplayer.org/cfx/st/"
data-ratio="0.4167"
data-qualities="160p,260p,530p,800p"
data-default-quality="260p">
 
<video>
<source type="application/x-mpegurl" src="//cdn.flowplayer.org/202777/84049-bauhaus.m3u8">
<source type="video/webm" src="//cdn.flowplayer.org/202777/84049-bauhaus.webm">
<source type="video/mp4" src="//cdn.flowplayer.org/202777/84049-bauhaus.mp4">
<source type="video/flash" src="mp4:202777/84049-bauhaus.mp4">
</video>
 
</div>

HTML

After pasting the above to your page, it will look like this:

  • The video is loaded from Flowplayer Drive: The player is not branded with the Flowplayer logo on screen and the product name in the controlbar.
  • You have opted for encoding to multiple resolutions by selecting the Premium profile: HLS is offered with adaptive bitrate and resolution switching (ABR) in 8 qualties if the browser supports it. And the player features a menu to alternatively select a quality/resolution manually to seamlessly switch from the "Auto" entry in the menu to one out of 4 resolution choices.

For further instructions on installation etc. see the setup documentation.

For a pure JavaScript installation variant of the same content refer to this demo.

view standalone page

Metrics and spend

You can see the view counts and transfer rates (MB or GB) in the Drive's list view. Click the list view icon in the black tool bar to see these.

The list shows view counts and the total amount streamed (CDN usage) for each video. Below the list you can find the total values calculated over all videos in your account. The totals are used when calculating the cost, more about this below.

IMG

Tracking your spend

In the Pay as You Go plan you will be billed every month based on the accumulated streaming and minutes of encoded video. Your current usage is shown in the "paid videos" row at the bottom of the list view.

You can find a preview of your upcoming payment statement in your account page - more about this below.

The Economy and Pro plans both include a fixed amount of streaming in their monthly subscription price. If your monthly usage exceeds this limit, you will be billed for the additional amount. You can find the limit values here.

The MB/GB values shown in the list view reset to zero when your subscription renews each month. You will receive an email when this happens.

Report emails

We send you weekly report emails. This report email contains the total values of your streaming, plus a list of your most popular videos.

Statement preview

You can view a preview of your upcoming payment in your account page. The statement is calculated using the streaming and encoding usage you have had so far during the current period.

IMG

The Player

Flowplayer Drive uses the state-of-the-art web video player, Flowplayer HTML5, for playback of the shared videos, or embeds on users' sites. The player version is always the latest, so there are no added upgrade fees along with new major version releases. We here at Flowplayer continue to invest heavily in the development of Flowplayer, we believe it's the most important factor in determining the success of Drive.

For more information about embedding Flowplayer on your site, see the player documentation.

Encoding

The uploaded files, originals as well as encoded files, are stored on Flowplayer's servers and streamed on-demand to viewers' devices. The files are downloadable at any time by the account holder for backup purposes and later use via the Drive list view.

Encoding profiles

When you upload a video to Drive, you can choose the encoding profile which determines how the video will be encoded.

Standard

What the audience sees:

  • Video in very good quality in all browsers and on every platform

What Flowplayer encodes:

  • Cross-device, cross-browser compatible resolution
  • Formats: MP4 and WebM – Flash fallback MP4 delivery over RTMP to allow for random seeking

Adaptive -- the default and recommended

What the audience sees:

  • Video in optimal quality adapted automatically to the connection speed and browser/device capability (ABR)
  • High-quality video fallback if ABR cannot be played

What Flowplayer encodes:

  • Up to eight HLS streams, in resolutions ranging from low-bandwidth to full HD
  • One cross-compatible resolution in two formats (MP4 and WebM) as fallback for browsers/devices supporting neither generic HLS nor Flash

Premium

What the audience sees:

  • A choice between video in optimal adaptive quality (ABR) and up to four resolutions for manual selection of a static quality level

What Flowplayer encodes:

  • Up to eight HLS streams in resolutions ranging from low-bandwidth to full HD
  • Up to four resolutions in two formats (MP4 and WebM) for manual selection – Flash fallback delivered via RTMP

The Adaptive profile is the default and recommended for most users. The encoding finishes relatively fast and the encoding cost is half of the cost of the Premium profile's.

For more information about the encoding process, see Transcoding in Flowplayer Drive.

Plans

Pay as you go

  • Encoding: a per-minute rate for output video.
  • Streaming: a per-GB rate for streamed video.
  • A one time setup fee.
  • Existing Flowplayer License not required.
  • Weekly email reports with streaming statistics.

Economy

  • Encoding: 120 minutes per month. A flat rate per minute for additional encoding.
  • Streaming: 150GB per month. A flat rate per GB for additional streaming.
  • Existing Flowplayer License not required.
  • Weekly email reports with streaming statistics.

Pro

  • Encoding: 1000 minutes per month. A flat rate per minute for additional encoding.
  • Streaming: 1500 GB per month. A flat rate per GB for additional streaming.
  • Existing Flowplayer License not required.
  • Weekly email reports with streaming statistics.

Enterprise

  • Encoding: 2000 minutes per month. A flat rate per minute for additional encoding.
  • Streaming: 4500 GB per month. A flat rate per GB for additional streaming.
  • Existing Flowplayer License not required.
  • Weekly email reports with streaming statistics.

Flowplayer license

To add your own branding to Flowplayer, you need a license for the player. Please check Pricing for details on licensing options. Note that the Enterprise plan contains an Unlimited Flowplayer license.

Pre-calculation of costs

Our top-priority is that you can present your videos at an optimal visual quality per transfer rate ratio. Drive transcodes every single original video with unique settings based on its content, the entire transcoding process is content-adaptive. Contrary to other services who work with fixed parameters this approach

  • avoids quality loss by unnecssary hard upper limits; as a consequence you do not waste money on ugly results
  • avoids quality loss (stuttering playback) by unnecessary high bitrates; as a consequence you do not waste money on data transfer without visual gain
  • avoids wasting bandwidth and your money by upscaling your original to a static set of dimensions - especially important when encoding to multiple resolutions: if the original is not full HD, we do not blow it up to full HD, only to suck bandwidth and money, instead let the hardware scale up if needed, for free

We firmly believe that the above advantages outweigh by far the only drawback of this approach regarding the prognosis of streaming costs as they depend on the actual content of your videos. This does not affect the transcoding costs which depend solely on duration (not submission file size!) and the amount of resolutions.

Transcoding costs

They are applied only once per video:

  1. Standard single resolution results in a transcoding duration of video duration times 2.
  2. Multiple resolution results in a transcoding duration of video duration multiplied by 4 to 16 times.

Streaming costs

They depend largely on the viewing habits of your audience combined with the bitrate of the video. The latter in turn depends on the content of the original and, in the case of multiple resolutions, the quality/resolution picked by the client (HLS) or the user.

A talking head video will result in a very low transcoded bitrate (and therefore filesize and amount of transmitted data) whereas a video containing for instance a lot of high motion scenes or pan shots will need more data (a higher bitrate) to achieve the same quality.

If you offer multiple resolutions and your audience uses mostly mobiles over mobile connections, the client is more likely to choose a lower bitrate/resolution/quality combination in comparison to an audience behind a fast connection and obsessed with HD quality. In other words: your investment reflects the wishes of your audience, and not some lump sum determined by us.

For an extremely rough calculation one could assume the medium of the targeted bitrate window for the standard resolution as average transfer rate. This would lead to a formula of 700 KB multiplied by the expected viewing duration in seconds.

Always bear in mind that the very vagueness of this calculation buys you the guarantee of an optimal quality/transmission rate ratio, in short: best value for money.

Recommendations for video uploading

The Flowplayer Drive transcoder has no restrictions regarding your original video file submissions. If you encounter an error please contact Flowplayer support.

We strongly recommend to refrain from pre-processing your originals before submission. Let the Flowplayer Drive transcoder do the hard work and give it as much information as possible. In your video editing suite pick the "Export to original quality" setting or similar, and upload the result. Any "optimized" settings will lose invaluable information which the transcoder is eager to evaluate; you might gain slightly on upload and processing speed in the short term, but lose on result quality in the long term. Because we love quality we do not charge for the size of your uploaded videos, only for their duration.

Transcoding in Flowplayer Drive

Rationale

Video transcoding can be fearsome — not only "for dummies" — because it presents the user with endless choices, many of which are at best confusing for anyone lacking special knowledge. The goal of Flowplayer Drive encoding is to relieve the user of this painful freedom and to make the best choices automatically.

We offer a solution which yields videos that can be viewed on any device and in any browser with minimal to no visible quality loss compared to what is achieved through a workflow governed by individual choices.

The target audience are users who want a quick, no-fuss out of the box solution; the only required user activity is the upload of the original.

Content-adaptive transcoding

The main criterion for a video is plain and simple: It has to look good.

Therefore we target good quality for web deployment, and adapt the more "technical" requirements, like bitrate etc., accordingly.

The bitrate used in our 2-pass encodings varies depending on the material, but the resulting visual quality is always the same.

This is achieved by first running a diagnostic program to determine the best encoding parameters specifically for your video. For the standard encoding the average bitrate will be curbed towards a range of 400 kbps to 1000 kbps. This range is considered as sensible for delivery over the wire, reasonably independent of connection speed. For encoding to multiple resolutions each bitrate is calculated based on the target resolution and the bitrate of the standard resolution.

In other words, it is conceptually the same approach as Netflix decided upon after a year of research, plus to re-encode their entire back catalog ... You may be pleased to know that Flowplayer Drive took this road all along.

Result files

Standard cross compatible resolution

Minimal requirement for showing your videos in all browsers on all platforms.

  1. MP4 at maximum 640x480 resolution
  2. WEBM at maximum 640x480 resolution

These are the result files when you have chosen the Standard profile. They are also part of the results of the Adaptive and Premium profiles.

Multiple resolutions

For brilliant and crisp quality, especially on large screens - or low bandwidth transmission.

The Adaptive and Premium profiles feature a HLS M3U8 manifest pointing to MPEG TS streams in 3 to 8 resolutions with adaptive bitrate (ABR) and dynamic resolution switching:

resolutionsource conditionh.264 profile
400x288 lo-fialways - 1/2 bitrate of 400x288, capped for slow connectionsbaseline
400x288always - bitrate lowered for slow connectionsbaseline
480x320width > 400px and/or height > 288pxbaseline
640x432alwaysmain
960x640width > 640px and/or height > 432pxmain
1024x768width > 960px and/or height > 640pxmain
1280x960width > 1024px and/or height > 768pxhigh
1920x1080width > 1280px and/or height > 960pxhigh

The Premium profile additionally provides WEBM and MP4 in up to 3 more resolutions optimized for VOD delivery beside the standard resolution, for manual or client feature based selection:

nameresolutionsource conditioncompatibility
lo-fi400x288width > 400px and/or height > 288pxall browsers, bitrate lowered for slow connections
SD640x480always, as standard encodingall browsers
HD1280x960width > 640px and/or height > 480pxdesktop browsers
full HD1920x1080 width > 1280px and/or height > 960pxdesktop browsers

resolution means maximal resolution, see general features.

width and height values assume landscape orientation, they are toggled for portrait.

If the resolution calculations result in two resolutions which do not differ at least 10 percent in size, one resolution is omitted, and only one of the two is transcoded - usually the larger one - to save resources and costs.

General features

Flowplayer encoding takes care to

  • create completely format-compliant videos
  • recognize anamorphic input and resolve it undistorted
  • transform PAL and NTSC formats without distortion to 4:3 or 16:9 aspect ratio (read more if you ever wondered why your old Camcorder movies always looked strange on a computer screen)
  • undistorted scaling of "cinema" resolutions
  • cater for (often undocumented) browser and device specific quirks
  • save on bitrate, dimensions etc. wherever possible

The average bitrate never exceeds the one of the original.

Width and height never exceed the dimensions of the original - except with anamorphic input which is stretched to fit display aspect ratio.

Example for defensive treating of platform quirks in the standard transcoding which must be cross-platform and cross-browser compatible:

h.264 profile Baseline, level 3.0 allows more than 1 reference frame. However, some videos then might show artifacts on some devices. Therefore we stick with 1 reference frame.

Video

  • display aspect ratio: same as original, undistorted PAL and NTSC conversion
  • sample aspect ratio 1/1 for MP4 and WEBM (IE does not handle anamorphic videos)
  • consistent result colorspace: yuv420p
  • frame rate: constant, same as original, 30 fps max
  • scan type: progressive - input is deinterlaced if needed
  • bitrate: average determined from original in diagnostic run to avoid waste of bandwidth and spending; maximum threshold 1500 kbps for MP4 and WEBM at standard resolution; for multiple resolution encodings it is increased or decreased according to each target resolution
  • h.264 profile and level requirements enforced
  • rotated input and generic portrait aspect ratio handled correctly

MP4 Mobile device compatibility of cross-platform standard resolution:

  • Baseline profile level 3.0
  • 1 reference frame - effectively 2 because of macroblock tree rate control
  • 640x480 max resolution

HLS streaming enhancements:

  • strict keyframe alignment across all resolutions for seamless transitions
  • display aspect ratio exactly the same as for standard resolution throughout all all resolutions (container is always filled without borders)
  • flexible segment duration depending to overall duration for best startup behaviour
  • video buffer verifier management optimized for HLS
  • unique and precise determination of the BANDWIDTH parameter values in the HLS variant playlist for extreme reliabilty at fluctuating connection speeds and on mobile platforms
  • our streams pass the strict Apple mediastreamvalidator check

Audio

  • no superfluous audio track if original has none
  • audio channels: 2 max
  • bitrate: max 64 kbps (stereo) or 32 kbps (mono)
  • sample rate: maximum allowed for codec at bitrate