Modified demos using video to support iOS/Safari.

Signed-off-by: Alan Ross <[email protected]>
alemart · Jan 8, 2023 · d741663 · d741663
1 parent c387000
commit d741663
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 19 deletions.
diff --git a/demos/alpha-blending.html b/demos/alpha-blending.html
@@ -37,11 +37,12 @@ <h1>Alpha blending</h1>
             </div>
         </form>
         <video
-            src="../assets/flying-eagle.webm"
             poster="../assets/loading.jpg"
             preload="auto"
-            loop muted controls autoplay hidden
+            loop muted autoplay playsinline hidden
             title="Free video by Cinema Professionals, https://www.pexels.com/pt-br/video/assistindo-a-aguia-voar-3635378/">
+                <source src="../assets/flying-eagle.webm" type="video/webm" />
+                <source src="../assets/flying-eagle.mp4" type="video/mp4" />
         </video>
         <img src="../assets/speedy-wall.jpg" title="Image by Bride of Frankenstein (CC-BY)" hidden>
         <div>

diff --git a/demos/best-features.html b/demos/best-features.html
@@ -68,12 +68,13 @@ <h1>Find the best keypoints</h1>
             <button id="play">Play / pause</button>
         </div>
         <video
-            src="../assets/people.webm"
             poster="../assets/loading.jpg"
             width="640" height="360"
             preload="auto"
-            loop muted hidden
+            loop muted hidden playsinline
             title="Free to use video by Free Videos, https://www.pexels.com/pt-br/foto/853889/">
+                <source src="../assets/people.webm" type="video/webm" />
+                <source src="../assets/people.mp4" type="video/mp4" />
         </video>
         <script>
 window.onload = async function()

diff --git a/demos/convolution.html b/demos/convolution.html
@@ -65,12 +65,13 @@ <h1>Image convolution</h1>
             <button id="play">Play / pause</button>
         </div>
         <video
-            src="../assets/jelly.webm"
             poster="../assets/loading.jpg"
             width="426" height="240"
             preload="auto"
-            loop muted hidden
+            loop muted hidden playsinline
             title="Free video by Chris Munnik from https://www.pexels.com/pt-br/video/3297379/">
+                <source src="../assets/jelly.webm" type="video/webm" />
+                <source src="../assets/jelly.mp4" type="video/mp4" />
         </video>
         <script>
 // Convolution kernels written in column-major format (3x3)

diff --git a/demos/greyscale-video.html b/demos/greyscale-video.html
@@ -31,11 +31,12 @@
     <body>
         <h1>Convert video to greyscale</h1>
         <video
-            src="../assets/flying-eagle.webm"
             poster="../assets/loading.jpg"
             preload="auto"
-            loop muted controls autoplay
+            loop muted autoplay playsinline
             title="Free video by Cinema Professionals, https://www.pexels.com/pt-br/video/assistindo-a-aguia-voar-3635378/">
+                <source src="../assets/flying-eagle.webm" type="video/webm" />
+                <source src="../assets/flying-eagle.mp4" type="video/mp4" />
         </video>
         <div>
             <span id="status"></span>

diff --git a/demos/image-portal.html b/demos/image-portal.html
@@ -44,11 +44,12 @@ <h1>Image Portals</h1>
             <canvas id="canvas-demo"></canvas>
         </div>
         <video
-            src="../assets/bird-walking.webm"
             poster="../assets/loading.jpg"
             preload="auto"
-            loop muted hidden
+            loop muted hidden playsinline
             title="Free video by Wendy Laplume, https://www.pexels.com/pt-br/video/passaro-ave-passarinho-concreto-4168986/">
+                <source src="../assets/bird-walking.webm" type="video/webm" />
+                <source src="../assets/bird-walking.mp4" type="video/mp4" />
         </video>
         <script>
 window.onload = async function()

diff --git a/demos/median-filter.html b/demos/median-filter.html
@@ -50,11 +50,12 @@ <h1>Median filter</h1>
             <canvas id="canvas-demo"></canvas>
         </div>
         <video
-            src="../assets/bird-walking.webm"
             poster="../assets/loading.jpg"
             preload="auto"
-            loop muted hidden
+            loop muted hidden playsinline
             title="Free video by Wendy Laplume, https://www.pexels.com/pt-br/video/passaro-ave-passarinho-concreto-4168986/">
+                <source src="../assets/bird-walking.webm" type="video/webm" />
+                <source src="../assets/bird-walking.mp4" type="video/mp4" />
         </video>
         <script>
 window.onload = async function()

diff --git a/demos/optical-flow.html b/demos/optical-flow.html
@@ -101,12 +101,13 @@ <h1>LK optical flow</h1>
             <button id="clear">Clear features</button>
         </div>
         <video
-            src="../assets/people.webm"
             poster="../assets/loading.jpg"
             width="640" height="360"
             preload="auto"
-            muted hidden
+            muted hidden playsinline
             title="Free to use video by Free Videos, https://www.pexels.com/pt-br/foto/853889/">
+                <source src="../assets/people.webm" type="video/webm" />
+                <source src="../assets/people.mp4" type="video/mp4" />
         </video>
         <script>
 let userPoints = [];

diff --git a/demos/orb-features.html b/demos/orb-features.html
@@ -68,12 +68,13 @@ <h1>ORB features</h1>
             <button id="play">Play / pause</button>
         </div>
         <video
-            src="../assets/corridor.webm"
             poster="../assets/loading.jpg"
             width="640" height="360"
             preload="auto"
-            loop muted hidden
+            loop muted hidden playsinline
             title="Free video by Ricardo Esquivel (pexels.com)">
+                <source src="../assets/corridor.webm" type="video/webm" />
+                <source src="../assets/corridor.mp4" type="video/mp4" />
         </video>
         <script>
 window.onload = async function()

diff --git a/demos/video-features.html b/demos/video-features.html
@@ -56,11 +56,12 @@ <h1>Gotta go FAST!!!</h1>
             <button id="play">Play / pause</button>
         </div>
         <video
-            src="../assets/roadrunner.webm"
             poster="../assets/loading.jpg"
             width="480" height="270"
             hidden muted loop autoplay playsinline oncanplay="this.muted=true;this.play()"
             title="Free video by Vimeo-Free-Videos from https://pixabay.com/pt/videos/estrada-condu%C3%A7%C3%A3o-auto-estrada-1101/">
+                <source src="../assets/roadrunner.webm" type="video/webm" />
+                <source src="../assets/roadrunner.mp4" type="video/mp4" />
         </video>
         <script>
 window.onload = async function()

diff --git a/demos/warping.html b/demos/warping.html
@@ -65,11 +65,12 @@ <h1>Image warping</h1>
             <button id="play">Play / pause</button>
         </div>
         <video
-            src="../assets/flying-eagle.webm"
             poster="../assets/loading.jpg"
             preload="auto"
-            loop muted hidden
+            loop muted hidden autoplay playsinline
             title="Free video by Cinema Professionals, https://www.pexels.com/pt-br/video/assistindo-a-aguia-voar-3635378/">
+                <source src="../assets/flying-eagle.webm" type="video/webm" />
+                <source src="../assets/flying-eagle.mp4" type="video/mp4" />
         </video>
         <script>
 const VERTEX_RADIUS = 5;