music: use posters, remove preload

bbguimaraes.com/music/index.html

@@ -20,7 +20,9 @@
         <a href="/files/music/black_mountain_side.mscz">src0</a>
         <a href="/files/music/bron-y-aur_stomp.pdf">score1</a>
         <a href="/files/music/bron-y-aur_stomp.mscz">src1</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/black_mountain_side_bron_y_aur_stomp.png">
             <source src="/files/music/black_mountain_side_bron_y_aur_stomp.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -28,7 +30,9 @@
         <a href="/files/music/prelude_cello_suite_no_1.mp4">video</a>
         <a href="https://www.youtube.com/watch?v=d1EgodQaVFM">youtube</a>
         <a href="https://imslp.org/wiki/6_Cello_Suites%2C_BWV_1007-1012_(Bach%2C_Johann_Sebastian)">score</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/prelude_cello_suite_no_1.png">
             <source src="/files/music/prelude_cello_suite_no_1.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -37,7 +41,9 @@
         <a href="https://www.youtube.com/watch?v=6m_apoFkUos">youtube</a>
         <a href="/files/music/lemon_song.pdf">score</a>
         <a href="/files/music/lemon_song.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/lemon_song.png">
             <source src="/files/music/lemon_song.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -46,7 +52,9 @@
         <a href="https://www.youtube.com/watch?v=NyrkW1yLdbM">youtube</a>
         <a href="/files/music/cripple_creek.pdf">score</a>
         <a href="/files/music/cripple_creek.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/cripple_creek.png">
             <source src="/files/music/cripple_creek.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -55,7 +63,9 @@
         <a href="https://www.youtube.com/watch?v=8AnQZy7ErP4">youtube</a>
         <a href="/files/music/sheik.pdf">score</a>
         <a href="/files/music/sheik.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/sheik.png">
             <source src="/files/music/sheik.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -64,7 +74,9 @@
         <a href="https://www.youtube.com/watch?v=WdmSdJXBoAI">youtube</a>
         <a href="/files/music/a_bit_of_soul.pdf">score</a>
         <a href="/files/music/a_bit_of_soul.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/a_bit_of_soul.png">
             <source src="/files/music/a_bit_of_soul.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -73,7 +85,9 @@
         <a href="https://www.youtube.com/watch?v=H50UtDGpKaI">youtube</a>
         <a href="/files/music/%c3%a1gua_de_beber.pdf">score</a>
         <a href="/files/music/%c3%a1gua_de_beber.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/%c3%a1gua_de_beber.png">
             <source src="/files/music/%c3%a1gua_de_beber.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -82,7 +96,9 @@
         <a href="https://www.youtube.com/watch?v=X6-uZOONJ5c">youtube</a>
         <a href="/files/music/fado_tropical.pdf">score</a>
         <a href="/files/music/fado_tropical.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/fado_tropical.png">
             <source src="/files/music/fado_tropical.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -91,7 +107,9 @@
         <a href="https://www.youtube.com/watch?v=vicfe5B8xqk">youtube</a>
         <a href="/files/music/choo_choo_chboogie.pdf">score</a>
         <a href="/files/music/choo_choo_chboogie.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/choo_choo_chboogie.png">
             <source src="/files/music/choo_choo_chboogie.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -100,7 +118,9 @@
         <a href="https://www.youtube.com/watch?v=eiDK-Uqplzw">youtube</a>
         <a href="/files/music/georgia.pdf">score</a>
         <a href="/files/music/georgia.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/georgia.png">
             <source src="/files/music/georgia.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -109,7 +129,9 @@
         <a href="https://www.youtube.com/watch?v=fqGerMBRWlI">youtube</a>
         <a href="/files/music/i_will_survive.pdf">score</a>
         <a href="/files/music/i_will_survive.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/i_will_survive.png">
             <source src="/files/music/i_will_survive.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -118,7 +140,9 @@
         <a href="https://www.youtube.com/watch?v=jBik-oX6Zas">youtube</a>
         <a href="/files/music/not_for_elise.pdf">score</a>
         <a href="/files/music/not_for_elise.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/not_for_elise.png">
             <source src="/files/music/not_for_elise.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -127,7 +151,9 @@
         <a href="https://www.youtube.com/watch?v=6WGpJBZ9cOw">youtube</a>
         <a href="/files/music/j%C3%B4_soares.pdf">score</a>
         <a href="/files/music/j%C3%B4_soares.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/j%C3%B4_soares.png">
             <source src="/files/music/j%C3%B4_soares.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -136,7 +162,9 @@
         <a href="https://www.youtube.com/watch?v=nJDZkEGm9t8">youtube</a>
         <a href="/files/music/elysian_shadows.pdf">score</a>
         <a href="/files/music/elysian_shadows.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/elysian_shadows.png">
             <source src="/files/music/elysian_shadows.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>
@@ -145,7 +173,9 @@
         <a href="https://www.youtube.com/watch?v=87v6T-FPsPs">youtube</a>
         <a href="/files/music/cow_and_chicken.pdf">score</a>
         <a href="/files/music/cow_and_chicken.mscz">src</a>
-        <video class="small-video" controls preload="metadata">
+        <video
+                class="small-video" controls preload="none"
+                poster="/files/music/cow_and_chicken.png">
             <source src="/files/music/cow_and_chicken.mp4" />
             Your browser doesn't support the &lt;video&gt; tag.
         </video>