Skip to content

Commit

Permalink
Programatically play the videos because Chrome blocks autoplay
Browse files Browse the repository at this point in the history
  • Loading branch information
janwerkhoven committed Nov 26, 2023
1 parent 2889c43 commit c239162
Showing 2 changed files with 16 additions and 3 deletions.
15 changes: 14 additions & 1 deletion app/components/page-speed/component.js
Original file line number Diff line number Diff line change
@@ -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();
});
}
});
4 changes: 2 additions & 2 deletions app/components/page-speed/template.hbs
Original file line number Diff line number Diff line change
@@ -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">

0 comments on commit c239162

Please sign in to comment.