Add MediaGoblin video player skin by chron0
[mediagoblin.git] / mediagoblin / templates / mediagoblin / media_displays / video.html
1 {#
2 # GNU MediaGoblin -- federated, autonomous media hosting
3 # Copyright (C) 2011, 2012 MediaGoblin contributors. See AUTHORS.
4 #
5 # This program is free software: you can redistribute it and/or modify
6 # it under the terms of the GNU Affero General Public License as published by
7 # the Free Software Foundation, either version 3 of the License, or
8 # (at your option) any later version.
9 #
10 # This program is distributed in the hope that it will be useful,
11 # but WITHOUT ANY WARRANTY; without even the implied warranty of
12 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 # GNU Affero General Public License for more details.
14 #
15 # You should have received a copy of the GNU Affero General Public License
16 # along with this program. If not, see <http://www.gnu.org/licenses/>.
17 #}
18
19 {% extends 'mediagoblin/user_pages/media.html' %}
20
21 {% block mediagoblin_head %}
22 {{ super() }}
23 <script type="text/javascript"
24 src="{{ request.staticdirect('/js/extlib/video-js/video.js') }}"></script>
25 <link href="{{ request.staticdirect('/js/extlib/video-js/video-js.css') }}" rel="stylesheet">
26 <link href="{{ request.staticdirect('/css/vjs-mg-skin.css') }}" rel="stylesheet">
27 {% endblock %}
28
29 {% block mediagoblin_media %}
30 <div class="video-player" style="position: relative;">
31 <video class="video-js vjs-default-skin vjs-mg-skin"
32 width="{{ media.media_data.width }}"
33 height="{{ media.media_data.height }}"
34 controls="controls"
35 preload="metadata"
36 data-setup="">
37 <source src="{{ request.app.public_store.file_url(
38 media.media_files['webm_640']) }}"
39 type="video/webm; codecs=&quot;vp8, vorbis&quot;" />
40 <div class="no_html5">
41 {%- trans -%}Sorry, this video will not work because
42 your web browser does not support HTML5
43 video.{%- endtrans -%}<br/>
44 {%- trans -%}You can get a modern web browser that
45 can play this video at <a href="http://getfirefox.com">
46 http://getfirefox.com</a>!{%- endtrans -%}
47 </div>
48 </video>
49 </div>
50 {% if 'original' in media.media_files %}
51 <p>
52 <a href="{{ request.app.public_store.file_url(
53 media.media_files['original']) }}">
54 {%- trans -%}
55 Original
56 {%- endtrans -%}
57 </a>
58 </p>
59 {% endif %}
60 {% endblock %}