- Author:
- justhamade
- Posted:
- January 28, 2010
- Language:
- HTML/template
- Version:
- Not specified
- Score:
- 0 (after 0 ratings)
Using the file plugin from django-cms can easily create a flowplayer with scrollable playlist as show in this example: http://flowplayer.org/demos/plugins/javascript/playlist/scrollable.htm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | {% 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 %}
|
More like this
- Bootstrap Accordian by Netplay4 5 years, 10 months ago
- Bootstrap theme for django-endless-pagination? by se210 8 years, 10 months ago
- Bootstrap theme for django-endless-pagination? by se210 8 years, 10 months ago
- Reusable form template with generic view by roldandvg 8 years, 11 months ago
- Pagination Django with Boostrap by guilegarcia 9 years, 1 month ago
Comments
Please login first before commenting.