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>

4 files changed, 11 insertions, 10 deletions

diff --git a/docs/source/siteadmin/relnotes.rst b/docs/source/siteadmin/relnotes.rst
index a6e5b823..59d519e6 100644
--- a/docs/source/siteadmin/relnotes.rst
+++ b/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:**
diff --git a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_primary.html b/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_primary.html
index 64976257..58d8c549 100644
--- a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_primary.html
+++ b/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>
diff --git a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_secondary.html b/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_secondary.html
index 92a44d49..0d3a1adc 100644
--- a/mediagoblin/plugins/archivalook/templates/archivalook/feature_displays/video_secondary.html
+++ b/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>
diff --git a/mediagoblin/templates/mediagoblin/media_displays/video.html b/mediagoblin/templates/mediagoblin/media_displays/video.html
index 41ebfbbe..e378fc90 100644
--- a/mediagoblin/templates/mediagoblin/media_displays/video.html
+++ b/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>!