Update videos, improve video synchronization

index.html

@@ -233,39 +233,39 @@ <h2 class="title is-2">Abstract</h2>
           <h3 class="title is-3">With Corrective Labels</h3>
           <div class="columns has-text-centered is-centered">
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/ccil_cube_success.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/ccil_coin_success.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/ccil_cube_success.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
           </div>
           <div class="columns has-text-centered is-centered">
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/ccil_cube_success.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/ccil_coin_success.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/ccil_cube_success.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
@@ -276,39 +276,39 @@ <h3 class="title is-3">With Corrective Labels</h3>
           <h3 class="title is-3">Without Corrective Labels</h3>
           <div class="columns has-text-centered is-centered">
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/bc_coin_failure.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
           </div>
           <div class="columns has-text-centered is-centered">
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/bc_coin_failure.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
             </div>
             <div class="column is-3">
-              <video class="synced" autoplay muted>
+              <video class="synced" muted>
                 <source src="./static/videos/bc_cube_failure.mp4" type="video/mp4">
                 Your browser does not support the video tag.
               </video>
@@ -322,7 +322,7 @@ <h3 class="title is-3">Without Corrective Labels</h3>
         <div class="column is-four-fifths">
           <h2 class="title is-3">CCIL Successes and Failures</h2>
           <div class="publication-video">
-            <video controls>
+            <video controls preload="metadata">
               <source src="./static/videos/successes_and_failures.mp4" type="video/mp4">
               Your browser does not support the video tag.
             </video>

static/js/sync_vids.js

@@ -1,13 +1,27 @@
 $(document).ready(function() {
     const syncedVids = document.querySelectorAll('video.synced');
 
+    let vidsReady = 0;
     let vidsEnded = 0;
 
     for (const vid of syncedVids) {
+        vid.oncanplay = () => {
+            vid.oncanplay = null;
+            vidsReady += 1;
+            console.log(`${vidsReady}/${syncedVids.length} videos ready`);
+            if (vidsReady === syncedVids.length) {
+                console.log("Starting all videos");
+                for (const v of syncedVids) {
+                    v.play();
+                }
+            }
+        }
+
         vid.onended = () => {
             vidsEnded += 1;
-            console.log(vidsEnded);
+            console.log(`${vidsEnded}/${syncedVids.length} videos finished`);
             if (vidsEnded === syncedVids.length) {
+                console.log("Restarting all videos");
                 setTimeout(() => {
                     vidsEnded = 0;
                     for (const v of syncedVids) {