docs: Document video resolution config.

[mediagoblin.git] / mediagoblin / templates / mediagoblin / media_displays / video.html

diff --git a/mediagoblin/templates/mediagoblin/media_displays/video.html b/mediagoblin/templates/mediagoblin/media_displays/video.html
index d72de2cadf68c845b5efb07a01fbdd4f6d56e1a8..f3e1978ed032f2ea8c37f804b5b9965a48c0cdb5 100644 (file)
--- a/mediagoblin/templates/mediagoblin/media_displays/video.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/video.html
@@ -18,44 +18,88 @@
 
 {% extends 'mediagoblin/user_pages/media.html' %}
 
-{% block mediagoblin_head %}
+{% block mediagoblin_head -%}
   {{ super() }}
+  <script type="text/javascript" src="{{
+     request.staticdirect('/extlib/video-js/video.js') }}"></script>
+  <script type="text/javascript" src="{{
+     request.staticdirect('/extlib/videojs-resolution-switcher/videojs-resolution-switcher.js') }}">
+     </script>
   <script type="text/javascript"
-       src="{{ request.staticdirect('/js/extlib/video-js/video.js') }}"></script>
-  <link href="{{ request.staticdirect('/css/vjs-mg-skin.css') }}" rel="stylesheet">
-{% endblock %}
+          src="{{ request.staticdirect('/js/change-video-resolution.js') }}"></script>
+  {# Sadly commented out till we can get the mediagoblin skin ported over
+   # to the newest video.js release ;\  #}
+  <link href="{{
+          request.staticdirect('/extlib/video-js/video-js.css') }}"
+        rel="stylesheet">
+  <link href="{{
+          request.staticdirect('/extlib/videojs-resolution-switcher/videojs-resolution-switcher.css') }}"
+        rel="stylesheet">
+
+  <style type="text/css">
+    .vjs-default-skin .vjs-big-play-button
+    {
+      top: 50%;
+      left: 50%;
+      margin: -1.5em auto auto -2em;
+    }
+    .vjs-play-progress, .vjs-volume-level {
+      background-color: #86D4B1 !important;
+    }
+  </style>
+
+{%- endblock %}
 
 {% block mediagoblin_media %}
-  <div class="video-player" style="position: relative;">
-    <video class="video-js vjs-mg-skin"
-          width="{{ media.media_data.width }}"
-          height="{{ media.media_data.height }}"
-          controls="controls"
-          preload="metadata"
-          data-setup="">
-      <source src="{{ request.app.public_store.file_url(
-                  media.media_files['webm_640']) }}" 
-             type="video/webm; codecs=&quot;vp8, vorbis&quot;" />
-         <div class="no_html5">
-           {%- trans -%}Sorry, this video will not work because 
-           your web browser does not support HTML5 
-           video.{%- endtrans -%}<br/>
-           {%- trans -%}You can get a modern web browser that 
-           can play this video at <a href="http://getfirefox.com">
-           http://getfirefox.com</a>!{%- endtrans -%}
-         </div>
-    </video>
-  </div>
+<div class="media_other_container">
+  {% set all_media_path = media.get_all_media() %}
+
+  <video controls
+         {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
+         preload="auto" class="video-js vjs-default-skin" id="video_1">
+    {% for each_media_path in all_media_path %}
+    <source src="{{ request.app.public_store.file_url(each_media_path[2]) }}"
+            {% if media.media_data %}
+              type="{{ media.media_data.source_type() }}"
+            {% else %}
+              type="{{ media.media_manager['default_webm_type'] }}"
+            {% endif %}
+            label="{{ each_media_path[0] }}" res="{{ each_media_path[1][1] }}" />
+    {% endfor %}
+    {%- for subtitle in media.subtitle_files %}
+    <track src="{{ request.app.public_store.file_url(subtitle.filepath) }}"
+      label="{{ subtitle.name }}" kind="subtitles">
+    {%- endfor %}
+    <div class="no_html5">
+      {%- trans -%}Sorry, this video will not work because
+      your web browser does not support HTML5 
+      video.{%- endtrans -%}<br/>
+      {%- trans -%}
+      We recommend you install a <a href="https://libreplanet.org/wiki/Libre_Browsers_Libre_Formats">freedom-respecting browser which supports free formats</a>!
+      {%- endtrans -%}
+    </div>
+  </video>
+</div>
 {% endblock %}
 
 {% block mediagoblin_sidebar %}
   <h3>{% trans %}Download{% endtrans %}</h3>
   <ul>
     {% if 'original' in media.media_files %}
-      <li><a href="{{ request.app.public_store.file_url(
-                       media.media_files.original) }}">{% trans %}Original file{% endtrans %}</a>
+      <li>
+        <a href="{{ request.app.public_store.file_url(
+                       media.media_files.original) }}">
+          {%- trans %}Original file{% endtrans -%}
+        </a>
+      </li>
+    {% endif %}
+    {% if 'webm_video' in media.media_files %}
+      <li>
+        <a href="{{ request.app.public_store.file_url(
+                       media.media_files.webm_video) }}">
+          {%- trans %}WebM file (VP8/Vorbis){% endtrans -%}
+        </a>
+      </li>
     {% endif %}
-    <li><a href="{{ request.app.public_store.file_url(
-                     media.media_files.webm_640) }}">{% trans %}WebM file (640p; VP8/Vorbis){% endtrans %}</a>
   </ul>
 {% endblock %}