All you need

HTML5 video, sharing, analytics and branding made simple.

Custom context menu Documentation
<!-- share HLS stream on Facebook -->
<meta property="fb:app_id" content="491716327514547">
<meta property="og:url" content="https://flowplayer.org/demos/complete/">
<meta property="og:title" content="Flowplayer HTML5 complete setup.">
<meta property="og:description" content="HTML5 video, sharing, analytics and branding made simple.">
<meta property="og:type" content="movie">
<meta property="og:image" content="https://flowplayer.org/media/img/demos/functional.jpg">
<meta property="og:image:secure_url" content="https://flowplayer.org/media/img/demos/functional.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="982">
<meta property="og:image:height" content="409">
<meta property="og:video" content="https://edge.flowplayer.org/functional.mp4">
<meta property="og:video:secure_url" content="https://edge.flowplayer.org/functional.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="624">
<meta property="og:video:height" content="260">

HTML
#complete {
background-image: url("//flowplayer.org/media/img/demos/functional.jpg");
}
#complete .fp-logo {
/* position the logo */
left: 3%;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
#complete {
/* retina splash image */
background-image: url("//flowplayer.org/media/img/demos/functional@x2.jpg");
}
}

CSS
<!--
Commercial version of flowplayer with
- domain specific license key
- custom logo
- analytics
- custom context menu
- 4 VOD resolutions for manual quality selection
-->
<div id="complete" class="flowplayer"
data-key="$775445646737769"
data-logo="//flowplayer.org/media/img/mylogo.png"
data-qualities="160p,260p,530p,800p"
data-default-quality="260p"
data-facebook="https://flowplayer.org/demos/complete/"
data-analytics="UA-27182341-1"
data-aspect-ratio="12:5"
data-rtmp="rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st">
 
<video data-title="My Brand Promotion Video">
<source type="application/x-mpegurl"
src="//edge.flowplayer.org/functional.m3u8">
<source type="video/mp4"
src="//edge.flowplayer.org/functional.mp4">
<source type="video/flash"
src="mp4:functional"></video>
 
<div class="fp-context-menu fp-menu">
<strong>Custom context menu</strong>
 
<a href="https://flowplayer.org/docs/">Documentation</a>
</div>
</div>

HTML

view standalone page

Includes

Embedding

The audience can place your videos on their site and the viewers on these foreign sites can do the same.

Google Analytics

All there: How much video is watched? How many minutes? Which format? Where it is embedded? Which browser or continent?

Random seeking

Jump anywhere in the timeline regardless of how much video has been downloaded.

Responsive layout

Try and resize this page and the video keeps it's aspect ratio.

Splash screen

The splash image is replaced by the video when it's clicked. The page is fast to load and can contain an unlimited amount of video players.

Video

HLS provides adaptive bitrate and resolution switching (ABR) for almost all clients, and without Flash in modern browsers via the hlsjs plugin. Smooth switching HLS level selection is available via the hlsjs plugin, otherwise the quality selector offers 4 resolutions in the WebM and MP4 formats, covering all HTML5 video capable browsers, or MP4 via RTMP for older browsers.

The setup

Flowplayer is designed so that all the features listed above are available out of the box. Custom logo and brand name, license key, RTMP support and Google Analytics are just configuration variables.

Custom branding

Your custom logo is shown in the shared players and when people click the logo they will be forwarded to the page where the player originated from. No matter how deep the chain is.

Custom logo is only available with our commercial version.