From c239162513a337beaa7762ae0a9ba6158303d6c4 Mon Sep 17 00:00:00 2001
From: Jan Werkhoven <jan.werkhoven@gmail.com>
Date: Sun, 26 Nov 2023 17:02:19 +1100
Subject: [PATCH] Programatically play the videos because Chrome blocks
 autoplay

---
 app/components/page-speed/component.js | 15 ++++++++++++++-
 app/components/page-speed/template.hbs |  4 ++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/components/page-speed/component.js b/app/components/page-speed/component.js
index e3b5df3..a5c494a 100644
--- a/app/components/page-speed/component.js
+++ b/app/components/page-speed/component.js
@@ -1,5 +1,18 @@
 import PageComponent from '../page-base/component';
 
 export default PageComponent.extend({
-  elementId: 'page-speed'
+  elementId: 'page-speed',
+
+  didInsertElement() {
+    this._super(...arguments);
+    document.querySelectorAll('video').forEach(video => {
+      video.play();
+    });
+  },
+
+  click() {
+    document.querySelectorAll('video').forEach(video => {
+      video.play();
+    });
+  }
 });
diff --git a/app/components/page-speed/template.hbs b/app/components/page-speed/template.hbs
index 973c6d3..426218b 100644
--- a/app/components/page-speed/template.hbs
+++ b/app/components/page-speed/template.hbs
@@ -7,7 +7,7 @@
     <div id="sac">
       <h4 class="callout sac top"><strong>Sn(Ag)Cu</strong> alloys are typically limited to speeds of 5mm/s to avoid defects</h4>
       <div class="clip">
-        <video width="410" height="336" autoplay loop poster="/assets/videos/selective-soldering-with-SAC-at-5mms.jpg">
+        <video width="410" height="336" autoplay controls muted loop poster="/assets/videos/selective-soldering-with-SAC-at-5mms.jpg">
           <source src="/assets/videos/selective-soldering-with-SAC-at-5mms.mp4" type="video/mp4">
           <source src="/assets/videos/selective-soldering-with-SAC-at-5mms.ogg" type="video/ogg">
           <source src="/assets/videos/selective-soldering-with-SAC-at-5mms.webm" type="video/webm">
@@ -19,7 +19,7 @@
         <strong>LMPA-Q</strong> can solder at speeds up to 30mm/s with zero defect
       </h4>
       <div class="clip">
-        <video width="410" height="336" autoplay loop poster="/assets/videos/selective-soldering-with-LMPA-Q-at-30mms.jpg">
+        <video width="410" height="336" autoplay controls muted loop poster="/assets/videos/selective-soldering-with-LMPA-Q-at-30mms.jpg">
           <source src="/assets/videos/selective-soldering-with-LMPA-Q-at-30mms.mp4" type="video/mp4">
           <source src="/assets/videos/selective-soldering-with-LMPA-Q-at-30mms.ogg" type="video/ogg">
           <source src="/assets/videos/selective-soldering-with-LMPA-Q-at-30mms.webm" type="video/webm">