Table of contents

Flowplayer 7 quick start

The two ways to present your videos to a world wide audience:

  • If you are a WordPress blogger, check out the [Flowplayer HTML5 WordPress plugin][wordpress].
  • Read on.

One

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

<!DOCTYPE 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="{{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/skin/skin.css">
  <script src="{{ config.flowplayer7.jquery }}"></script>
  <script src="{{ config.flowplayer7.releases }}/{{ config.flowplayer7.version }}/flowplayer.min.js"></script>
</head>
  • 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 script 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>
  • 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!

That's it. Done.

Watch the "view standalone page" links. Whenever you encounter a demo that 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.

Results