<!doctype
html>
<head>
<!-- player skin -->
<link rel="stylesheet"
type="text/css" href="
skin/minimalist.css">
<style>
/* site specific styling */
body {
font: 12px "Myriad Pro", "Lucida Grande", "Helvetica
Neue", sans-serif;
text-align: center;
padding-top: 1%;
color:
#444444;
background-color:
#ffffff;
}
/* custom player skin */
.flowplayer { width: 80%; background-color:
#222; background-size: cover;
max-width: 800px; }
.flowplayer .fp-controls { background-color:
rgba(0, 0, 0, 0.4)}
.flowplayer .fp-timeline { background-color:
rgba(0, 0, 0, 0.5)}
.flowplayer .fp-progress { background-color:
rgba(219, 0, 0, 1)}
.flowplayer .fp-buffer { background-color:
rgba(249, 249, 249, 1)}
</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="
flowplayer.min.js"></script>
</head>
<body>
<div data-swf="
flowplayer.swf"
class="flowplayer no-toggle
play-button" style="width:
560px;
height:
315px;">
<video poster="
chicken_skin.jpg">
<source type="video/mp4"
src="
http://kakonacl.xsrv.jp/jwplayer6/chicken.mp4">
<source type="video/webm"
src="
http://kakonacl.xsrv.jp/jwplayer6/chicken.webm">
<!-- change this path to your
own subtitles file (vtt format)
-->
<track src="
chicken.captions_UTF8.vtt"/>
</video>
</body>
</html>
