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 5 years, 3 months ago
  2. Bootstrap theme for django-endless-pagination? by se210 8 years, 3 months ago
  3. Bootstrap theme for django-endless-pagination? by se210 8 years, 3 months ago
  4. Reusable form template with generic view by roldandvg 8 years, 4 months ago
  5. Pagination Django with Boostrap by guilegarcia 8 years, 6 months ago

Comments

Please login first before commenting.