Folyamatban

<!doctype html>

<head>

<!– player skin –>
<link rel=”stylesheet” type=”text/css”
href=”//releases.flowplayer.org/5.4.2/skin/playful.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: #333333;
}

/* custom player skin */
.flowplayer { width: 80%; background-color: #222; background-size: cover; max-width: 800px; }
.flowplayer .fp-controls { background-color: rgba(17, 17, 17, 1)}
.flowplayer .fp-timeline { background-color: rgba(230, 218, 218, 0.44)}
.flowplayer .fp-progress { background-color: rgba(30, 53, 97, 1)}
.flowplayer .fp-buffer { background-color: rgba(249, 249, 249, 1)}
.flowplayer { background-image: url(http://farm5.staticflickr.com/4117/4870052004_c0997bcf8d_b.jpg)}

</style>

<!– flowplayer depends on jQuery 1.7.1+ –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

<!– flowplayer javascript component –>
<script src=”//releases.flowplayer.org/5.4.2/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/flowplayer.swf”
class=”flowplayer fixed-controls no-toggle play-button”
data-ratio=”0.4285″>
<video>
<source type=”video/webm” src=”http://stream.flowplayer.org/bauhaus/624×260.webm”>
<source type=”video/mp4″ src=”http://stream.flowplayer.org/bauhaus/624×260.mp4″>
<source type=”video/ogv” src=”http://stream.flowplayer.org/bauhaus/624×260.ogv”>
</video>

</div>

</body>

 

 

Setting up

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

 

http://flowplayer.org/