Flowplayer designer

00:00 -00:44 01:44

Invalid URL

http://invalid.url/com/my-video.mp4

Paste this HTML code to your site.

spaceplay / pause

escstop

ffullscreen

shift + ←→slower / faster

↑↓volume

mmute

←→seek

. seek to previous

12…6 seek to 10%, 20%, …60%

This is the first line

And the second one.

Video size

12:5 16:9 other

Video size

Proportional

Fixed

x px

Proportional size works on all screen sizes whereas fixed size is set in stone.

Background

Features

Playlist Keyboard shortcuts Google analytics Subtitles

Playback

Start with a splash image Preload video Loop

Branding

Remove Flowplayer logo or use your own

License key (removes Flowplayer logo) Custom logo (optional)

Buy a Commercial license to get the license key.

Your custom player

Setting up

Copy the above code to your clipboard
Create an blank HTML page with your text editor and paste the code
Open the page with your favorite browser and verify the look and feel
Insert your own video URLs and adjust data-ratio accordingly
Copy the player to your website with all the required scripts and css declarations

<!doctype html>

<head>

<link rel="stylesheet" type="text/css"
      href="//releases.flowplayer.org/5.4.2/{commercial}skin/{skin}.css">
   {playlist_css}
   <style>
   /* site specific styling */
   body {
      font: 12px "Myriad Pro", "Lucida Grande", "Helvetica Neue", sans-serif;
      text-align: center;
      padding-top: 1%;
      color: #999;
      background-color: {bg};
   }

/* custom player skin */
   .flowplayer { width: 80%; background-color: #222; background-size: cover; max-width: 800px; }
   {style}
   </style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="//releases.flowplayer.org/5.4.2/{commercial}flowplayer.min.js"></script>

</head>

<body>

<p>Video dimensions won't probably match your player</p>

<div data-swf="//releases.flowplayer.org/5.4.2/{commercial}flowplayer.swf"
      class="flowplayer{klass}"
      {attr}>
      <video{videoAttr}>
         <source type="video/webm" src="http://stream.flowplayer.org/bauhaus/624x260.webm">
         <source type="video/mp4" src="http://stream.flowplayer.org/bauhaus/624x260.mp4">
         <source type="video/ogv" src="http://stream.flowplayer.org/bauhaus/624x260.ogv">{track}
      </video>
      {playlist}
   </div>

</body>

Less but better. More about us.

Flowplayer designer

Invalid URL

Video size

Video size

Background

Controlbar

Background

Timeline

Progress

Buffer

UI

Features

Playback

Branding

Your custom player

Setting up