{% extends 'base.html' %}
{% load cache cms_tags %}
{% block extrahead %}
<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
<script src="http://static.flowplayer.org/js/flowplayer-3.1.4.min.js"></script>
<style>
a:active { outline:none; }
:focus { -moz-outline-style:none; }
/* container has a background image */
a.player {
margin-top:10px;
display:block;
width:550px;
height:350px;
padding:0 0 0 100px;
text-align:center;
color:#fff;
text-decoration:none;
cursor:pointer;
}
/* splash image */
a.player img {
margin-top:115px;
border:0;
}
</style>
<script src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>
<script src="http://static.flowplayer.org/js/flowplayer.playlist-3.0.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/playlist.css"/>
<script>
$(function() {
// setup scrolling for the playlist elements
$("div.playlist").scrollable({
items:'div.clips',
vertical:true,
next:'a.down',
prev:'a.up'
});
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf", {
clip: {baseUrl: 'http://new.benvankleek.com'},
plugins: {
controls: {
autoHide: 'always',
timeColor: '#01DAFF',
buttonColor: '#5F747C',
sliderColor: '#000000',
volumeSliderColor: '#000000',
bufferColor: '#445566',
durationColor: '#ffffff',
tooltipColor: '#5F747C',
bufferGradient: 'none',
progressColor: '#112233',
sliderGradient: 'none',
timeBgColor: '#555555',
buttonOverColor: '#728B94',
backgroundColor: '#222222',
tooltipTextColor: '#ffffff',
volumeSliderGradient: 'none',
backgroundGradient: 'none',
borderRadius: '10',
progressGradient: 'none',
opacity: 0.5
}
}
// use playlist plugin to enable playlist items work as movie clips
}).playlist("div.clips");
});
</script>
{% endblock %}
{% block content %}
<div class="reel">
<div style="float:left;width:190px;margin-top:50px">
<a class="go up"></a>
<div class="playlist">
<div class="clips low">
{% placeholder videos %}
</div>
</div>
<a class="go down"></a>
</div>
<a id="player" class="player " style="float:left;margin-top:50px">
<img src="http://flowplayer.org/img/player/btn/play.png" />
</a>
<br clear="all" />
</div>
{% endblock %}
Comments