Flowplayer for the impatient

3 quick and easy ways to present your videos to a world wide audience. Pick one:

One

Open a new document in your favourite editor and write or copy this line:

<!DOCTYPE html>

HTML

It will tell the browser which type of document it is loading and how to treat it. You want to show your audience HTML5 video in a HTML5 video player, so this is the HTML5 doctype.

Two

Create a HEAD section, and load 3 assets - 1 stylesheet and 2 scripts:

<head>
<title>Flowplayer quick start</title>
<link rel="stylesheet" href="//releases.flowplayer.org/7.0.4/skin/skin.css">
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//releases.flowplayer.org/7.0.4/flowplayer.min.js"></script>
</head>

HTML

  • The TITLE tag is mandatory for HTML5; if missing Internet Explorer will not display the page.
  • The CSS stylesheet contains the player skin: everything you need to interact with the player and how the player is designed.
  • The jQuery script provides a library of helper tools.
  • The flowplayer will tell the browser how to build and run the player.

You don't need to download and move around files on your server. Of course you can if you want to, but, hey, this is the world wide web, and here we fast load all prerequisites for free.

Three

Add the BODY section for the actual content:

<body>
<div class="flowplayer">
<video>
<source type="video/webm"
src="//edge.flowplayer.org/drive.webm">
<source type="video/mp4"
src="//edge.flowplayer.org/drive.mp4">
</video>
</div>
</body>

HTML

  • Inside the BODY create a DIV (divisor) element. It will serve as container for the player.
  • Give the DIV element the CSS class "flowplayer". This magic class tells Flowplayer to install a player inside the container.
  • Insert a VIDEO tag into the container - think DVD player.
  • Add the video itself: a SOURCE tag with the type attribute telling the browser the video format and the src attribute pointing to where it can find the video file.
  • For safety add a variant of the same video in a different format.

Now load the document in your browser, and ...

Flowplayer!

view standalone page

That's it. Done.

Hang on. That's only the beginning. Start exploring our demos and dive into the detailed documentation to discover the sheer endless possibilities. Look forward to creating the optimal stage to present your videos. The perfect way to bring joy to your audience: The Flowplayer way!

  • Tip Watch the "view standalone page" links. Whenever you encounter a demo which strikes your interest, follow the link and download the source of that page. You have now got your hands on a working minimal sample, the optimal starting point for customization. Start tweaking the sample, for example by first replacing the video locations with those of your own, and verify the result at each step. - We encourage you to steal working code and base your own setup on it: the short route to a satisfying Flowplayer experience.