Flowplayer · Multiple players · Poster

<head/>

<style>

.flowplayer {
background-color: #bbb; /* background-color triggers poster setup */
width: 70%;
margin: 20px;
}

CSS

<script>

// global configuration
flowplayer.conf = {
ratio: 5/12,
rtmp: "rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st"
};

JavaScript

<body/>

<div class="flowplayer">
<video>
<source type="video/webm" src="//edge.flowplayer.org/functional.webm">
<source type="video/mp4" src="//edge.flowplayer.org/functional.mp4">
<source type="video/flash" src="mp4:functional.mp4">
</video>
</div>
 
<div class="flowplayer">
<video>
<source type="video/webm" src="//edge.flowplayer.org/bauhaus.webm">
<source type="video/mp4" src="//edge.flowplayer.org/bauhaus.mp4">
<source type="video/flash" src="mp4:bauhaus.mp4">
</video>
</div>
 
<div class="flowplayer">
<video>
<source type="video/webm" src="//edge.flowplayer.org/playful.webm">
<source type="video/mp4" src="//edge.flowplayer.org/playful.mp4">
<source type="video/flash" src="mp4:playful.mp4">
</video>
</div>
 
<div class="flowplayer">
<video>
<source type="video/webm" src="//edge.flowplayer.org/functional.webm">
<source type="video/mp4" src="//edge.flowplayer.org/functional.mp4">
<source type="video/flash" src="mp4:functional.mp4">
</video>
</div>

HTML