Login

Flow player template for django-cms file plugin

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

  1. Bootstrap Accordian by Netplay4 7 years, 9 months ago
  2. Bootstrap theme for django-endless-pagination? by se210 10 years, 9 months ago
  3. Bootstrap theme for django-endless-pagination? by se210 10 years, 9 months ago
  4. Reusable form template with generic view by roldandvg 10 years, 10 months ago
  5. Pagination Django with Boostrap by guilegarcia 11 years ago

Comments

Please login first before commenting.