Set videos to preload="metadata" to prevent upfront download [trac#5625].

Setting was previously preload="auto". While preload="auto" *does not* cause a
full upfront download on Firefox, Abrowser, IceCat or Chromium, a user reported
on the LibrePlanet mailing list that it was causing a full download on their
browser. The specifications leave it up to the browser do decide whether to
download, but it makes sense to do what we can to avoid surprising people on low
bandwidth/quota internet connections.

https://html.spec.whatwg.org/multipage/media.html#attr-media-preload

Further, media.libreplanet.org (one of MediaGoblin's biggest users) has
implement this change locally, so it makes sense for us to stay in sync.

Signed-off-by: Ben Sturmfels <ben@sturm.com.au>

docs/source/siteadmin/relnotes.rst

@@ -22,8 +22,9 @@ This chapter has important information about our current and previous releases.
 0.12.0 (Work in progress)
 =========================
 
-- Extend left/right arrow key navigation to paginated views [#5627] (Olivier Mehani)
+- Extend left/right arrow key navigation to paginated views [trac#5627] (Olivier Mehani)
 - Fix incorrect setuptools install location for db/migrations/env.py (Elisei Roca)
+- Set videos to preload="metadata" to prevent upfront download [trac#5625] (Michael McMahon)
 
 ..
    **To do:**

mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_primary.html

@@ -32,7 +32,7 @@
     {%- set display_type, display_path = media.get_display_media() %}
     <video controls
            {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
-           preload="auto" class="video-js vjs-default-skin">
+           preload="metadata" class="video-js vjs-default-skin">
       <source src="{{ request.app.public_store.file_url(display_path) }}"
               {% if media.media_data %}
                 type="{{ media.media_data.source_type() }}"
@@ -41,13 +41,13 @@
               {% endif %} />
       <div class="no_html5">
           {%- trans -%}Sorry, this video will not work because
-          your web browser does not support HTML5 
+          your web browser does not support HTML5
           video.{%- endtrans -%}<br/>
-          {%- trans -%}You can get a modern web browser that 
+          {%- 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>
   {{ possibly_shortened_description(request, feature.media_entry) }}
 </div>

mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_secondary.html

@@ -32,7 +32,7 @@
     {%- set display_type, display_path = media.get_display_media() %}
     <video controls
            {% if global_config['plugins']['mediagoblin.media_types.video']['auto_play'] %}autoplay{% endif %}
-           preload="auto" class="video-js vjs-default-skin">
+           preload="metadata" class="video-js vjs-default-skin">
       <source src="{{ request.app.public_store.file_url(display_path) }}"
               {% if media.media_data %}
                 type="{{ media.media_data.source_type() }}"
@@ -41,9 +41,9 @@
               {% endif %} />
       <div class="no_html5">
           {%- trans -%}Sorry, this video will not work because
-          your web browser does not support HTML5 
+          your web browser does not support HTML5
           video.{%- endtrans -%}<br/>
-          {%- trans -%}You can get a modern web browser that 
+          {%- 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>

mediagoblin/templates/mediagoblin/media_displays/video.html

@@ -56,7 +56,7 @@
 
   <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">
+         preload="metadata" 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 %}
@@ -72,7 +72,7 @@
     {%- endfor %}
     <div class="no_html5">
       {%- trans -%}Sorry, this video will not work because
-      your web browser does not support HTML5 
+      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>!