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" src="{{
  24      request.staticdirect('/extlib/video-js/video.js') }}"></script>
  25   {# Sadly commented out till we can get the mediagoblin skin ported over
  26    # to the newest video.js release ;\  #}
  27   {#
  28      <link href="{{ request.staticdirect('/css/vjs-mg-skin.css') }}"
  29            rel="stylesheet">
  30   #}
  31   <link href="{{
  32           request.staticdirect('/extlib/video-js/video-js.css') }}"
  33         rel="stylesheet">
  34
  35   <style type="text/css">
  36     .vjs-default-skin .vjs-big-play-button
  37     {
  38       top: 50%;
  39       left: 50%;
  40       margin: -1.5em auto auto -2em;
  41     }
  42     .vjs-play-progress, .vjs-volume-level {
  43       background-color: #86D4B1 !important;
  44     }
  45   </style>
  46 {%- endblock %}
  47
  48 {% block mediagoblin_media %}
  49 <div class="media_other_container">
  50   {% set display_type, display_path = media.get_display_media() %}
  51
  52   <video controls
  53          {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
  54          preload="auto" class="video-js vjs-default-skin"
  55          data-setup='{"height": {{ media.media_data.height }},
  56                       "width": {{ media.media_data.width }} }'>
  57     <source src="{{ request.app.public_store.file_url(display_path) }}"
  58             {% if media.media_data %}
  59               type="{{ media.media_data.source_type() }}"
  60             {% else %}
  61               type="{{ media.media_manager['default_webm_type'] }}"
  62             {% endif %} />
  63     {%- for subtitle in media.subtitle_files %}
  64             <track src="{{ request.app.public_store.file_url(subtitle.filepath) }}"
  65               label = "{{ subtitle.name }}" kind="subtitles" >
  66     {%- endfor %}
  67     <div class="no_html5">
  68       {%- trans -%}Sorry, this video will not work because
  69       your web browser does not support HTML5
  70       video.{%- endtrans -%}<br/>
  71       {%- trans -%}
  72       We recommend you install a <a href="https://libreplanet.org/wiki/Libre_Browsers_Libre_Formats">freedom-respecting browser which supports free formats</a>!
  73       {%- endtrans -%}
  74     </div>
  75   </video>
  76 </div>
  77 {% endblock %}
  78
  79 {% block mediagoblin_sidebar %}
  80   <h3>{% trans %}Download{% endtrans %}</h3>
  81   <ul>
  82     {% if 'original' in media.media_files %}
  83       <li>
  84         <a href="{{ request.app.public_store.file_url(
  85                        media.media_files.original) }}">
  86           {%- trans %}Original file{% endtrans -%}
  87         </a>
  88       </li>
  89     {% endif %}
  90     {% if 'webm_video' in media.media_files %}
  91       <li>
  92         <a href="{{ request.app.public_store.file_url(
  93                        media.media_files.webm_video) }}">
  94           {%- trans %}WebM file (VP8/Vorbis){% endtrans -%}
  95         </a>
  96       </li>
  97     {% endif %}
  98   </ul>
  99 {% endblock %}