Load mp4 videos for better compatibility with Safari / iOS

demos/hello-aframe/index.html

@@ -19,7 +19,10 @@
             </div>
         </div>
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
-        <video id="my-video" src="../assets/my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="../assets/my-video.webm" type="video/webm" />
+            <source src="../assets/my-video.mp4" type="video/mp4" />
+        </video>
 
         <!-- This is a scene -->
         <a-scene ar-scene>

demos/hello-three/index.html

@@ -19,6 +19,9 @@
             </div>
         </div>
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
-        <video id="my-video" src="../assets/my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="../assets/my-video.webm" type="video/webm" />
+            <source src="../assets/my-video.mp4" type="video/mp4" />
+        </video>
     </body>
 </html>

demos/hello-webgl/index.html

@@ -18,6 +18,9 @@
         <img id="it-works" src="../assets/it-works.png" hidden>
         <img id="bird" src="../assets/bird.png" hidden>
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
-        <video id="my-video" src="../assets/my-video.webm" hidden muted loop autoplay playsinline oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="../assets/my-video.webm" type="video/webm" />
+            <source src="../assets/my-video.mp4" type="video/mp4" />
+        </video>
     </body>
 </html>

demos/hello-world/index.html

@@ -16,6 +16,9 @@
             </div>
         </div>
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
-        <video id="my-video" src="../assets/my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="../assets/my-video.webm" type="video/webm" />
+            <source src="../assets/my-video.mp4" type="video/mp4" />
+        </video>
     </body>
 </html>

demos/touch-interaction/index.html

@@ -20,6 +20,9 @@
             </div>
         </div>
         <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>
-        <video id="my-video" src="../assets/my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="../assets/my-video.webm" type="video/webm" />
+            <source src="../assets/my-video.mp4" type="video/mp4" />
+        </video>
     </body>
 </html>

docs/getting-started/activate-your-webcam.md

@@ -60,7 +60,10 @@ Let's also comment (or remove) the `<video>` tag from the HTML file - we no long
         <div id="ar-viewport"></div>
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
         <!--
-        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="my-video.webm" type="video/webm" />
+            <source src="my-video.mp4" type="video/mp4" />
+        </video>
         -->
     </body>
 </html>
@@ -139,7 +142,10 @@ In order to display that scan gimmick, we need to create a HUD. A HUD is an over
         </div>
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
         <!--
-        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="my-video.webm" type="video/webm" />
+            <source src="my-video.mp4" type="video/mp4" />
+        </video>
         -->
     </body>
 </html>

docs/getting-started/create-the-augmented-scene.md

@@ -30,23 +30,27 @@ Once you pick a 3D rendering technology, you need to integrate it with MARTINS.j
 
 Writing a glue code is a task of moderate complexity. It requires dealing with matrices, with performance issues, and with some idiosyncrasies of the 3D rendering technologies in order to make sure it all works as intended. It is advisable to have specialized knowledge of computer graphics programming in order to write a glue code that works correctly.
 
-I provide easy-to-use glue codes that work with different 3D rendering technologies in my demos, so that you don't need to deal with the complexity. Those glue codes are JavaScript (.js) files. You just need to add a glue code to your web page (e.g., via a `<script>` tag) and then the integration will be done for you. It's really that simple! Also, my glue codes may be used in both free and non-free projects.
+I provide easy-to-use glue codes that work with different 3D rendering technologies in my demos, so that you don't need to deal with the complexity. Those glue codes are JavaScript (.js) files. You just need to add a glue code to your web page (e.g., via a `<script>` tag) and then the integration will be done for you. It's really that simple!
 
-[:octocat: Get the glue codes on GitHub](https://github.com/alemart/martins-js/tree/master/dist){ .md-button ._blank }
-
-[Get the glue codes in my demos](../gallery.md){ .md-button ._blank }
+[Find the glue codes in my demos](../gallery.md){ .md-button ._blank }
 
 ## Create the virtual scene
 
 Once you plug in the glue code, you'll be using the 3D rendering technology of your choice to create the virtual scene. The physical scene will be automatically augmented with the virtual scene, thus creating the augmented scene.
 
 <figure markdown>
-<video src="../../img/demo-cool2.webm" poster="../../img/demo-cool2.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+<video poster="../../img/demo-cool2.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+    <source src="../../img/demo-cool2.webm" type="video/webm" />
+    <source src="../../img/demo-cool2.mp4" type="video/mp4" />
+</video>
 <figcaption markdown>An augmented scene with a [3D model](../assets/my-3d-model.glb "A public domain 3D model from Kenney, converted to glTF format") from [Kenney](https://www.kenney.nl){ ._blank }</figcaption>
 </figure>
 
 <figure markdown>
-<video src="../../img/demo-cool.webm" poster="../../img/demo-cool.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+<video poster="../../img/demo-cool.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+    <source src="../../img/demo-cool.webm" type="video/webm" />
+    <source src="../../img/demo-cool.mp4" type="video/mp4" />
+</video>
 <figcaption markdown>A similar augmented scene viewed from a different perspective</figcaption>
 </figure>
 
@@ -76,7 +80,10 @@ A-Frame is easy for beginners and pleasing for experts. A simple scene is declar
     <body>
         <div id="ar-viewport"></div>
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
-        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="my-video.webm" type="video/webm" />
+            <source src="my-video.mp4" type="video/mp4" />
+        </video>
 
         <!-- This is a scene -->
         <a-scene ar-scene>

docs/getting-started/introduction.md

@@ -5,7 +5,10 @@ Augmented Reality (AR) has applications in many fields, including: games, market
 Traditionally, users were required to download (sometimes large) apps to experience AR. That was an obstacle for adoption. What if we dropped the need for apps and just required a web browser instead? Users already have web browsers! That's where WebAR comes in.
 
 <figure markdown>
-<video src="../../img/demo-cool.webm" poster="../../img/demo-cool.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+<video poster="../../img/demo-cool.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+    <source src="../../img/demo-cool.webm" type="video/webm" />
+    <source src="../../img/demo-cool.mp4" type="video/mp4" />
+</video>
 <figcaption>A WebAR demo created with MARTINS.js</figcaption>
 </figure>
 
@@ -16,7 +19,10 @@ We will create together an Augmented Reality experience that runs in web browser
 No matter if you are a beginner, an expert, or somewhere in-between, set yourself at ease: this step-by-step guide can be followed by you.
 
 <figure markdown>
-<video src="../../img/demo-cool3.webm" poster="../../img/demo-cool3.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+<video poster="../../img/demo-cool3.webp" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+    <source src="../../img/demo-cool3.webm" type="video/webm" />
+    <source src="../../img/demo-cool3.mp4" type="video/mp4" />
+</video>
 <figcaption>Augmented Reality based on Image Tracking</figcaption>
 </figure>
 

docs/getting-started/set-up-the-session.md

@@ -20,7 +20,10 @@ We begin by creating the viewport. Remember that the viewport is the area in whi
     <body>
         <div id="ar-viewport"></div>
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
-        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="my-video.webm" type="video/webm" />
+            <source src="my-video.mp4" type="video/mp4" />
+        </video>
     </body>
 </html>
 ```

docs/getting-started/set-up-the-tracker.md

@@ -62,10 +62,13 @@ Once you see that the image is being properly loaded, there is no need to keep i
 
 ## Add a test video
 
-We're going to be tracking that reference image in a test video. Please save the following video as [my-video.webm](../assets/my-video.webm){ ._blank } in `ar-demo/`. Later on I'll tell you how to use your webcam instead.
+We're going to be tracking that reference image in a test video. Please save the following video as [my-video.webm](../assets/my-video.webm){ ._blank } and [my-video.mp4](../assets/my-video.mp4){ ._blank } in `ar-demo/`. Later on I'll tell you how to use your webcam instead.
 
 <figure markdown>
-<video src="../../assets/my-video.webm" style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+<video style="width:600px" controls muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+    <source src="../../assets/my-video.webm" type="video/webm" />
+    <source src="../../assets/my-video.mp4" type="video/mp4" />
+</video>
 </figure>
 
 This is the expected directory structure at this point:
@@ -74,6 +77,7 @@ This is the expected directory structure at this point:
     ├── index.html
     ├── martins.js
     ├── my-reference-image.webp
+    ├── my-video.mp4
     └── my-video.webm
 
 Let's include the test video in our page. Add a `<video>` tag as follows:
@@ -90,7 +94,10 @@ Let's include the test video in our page. Add a `<video>` tag as follows:
     </head>
     <body>
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
-        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="my-video.webm" type="video/webm" />
+            <source src="my-video.mp4" type="video/mp4" />
+        </video>
     </body>
 </html>
 ```
@@ -116,7 +123,10 @@ We'll be writing a little bit of JavaScript code now. In order to keep our code
     </head>
     <body>
         <img id="my-reference-image" src="my-reference-image.webp" hidden>
-        <video id="my-video" src="my-video.webm" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+        <video id="my-video" hidden muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+            <source src="my-video.webm" type="video/webm" />
+            <source src="my-video.mp4" type="video/mp4" />
+        </video>
     </body>
 </html>
 ```
@@ -153,6 +163,7 @@ Before moving on, make sure that you have the following directory structure at t
     ├── index.html
     ├── martins.js
     ├── my-reference-image.webp
+    ├── my-video.mp4
     └── my-video.webm
 
 ## Link the image to the tracker

docs_overrides/home.html

@@ -115,7 +115,10 @@
             <a href="{{ './demo/instructions' | url }}" class="md-button">Try a demo</a>
         </div>
         <div class="splash-image">
-            <video src="{{ './img/splash.webm' | url }}" poster="{{ './img/splash.webp' | url }}" muted loop playsinline autoplay oncanplay="this.muted=true;this.play()"></video>
+            <video poster="{{ './img/splash.webp' | url }}" muted loop playsinline autoplay oncanplay="this.muted=true;this.play()">
+                <source src="{{ './img/splash.webm' | url }}" type="video/webm" />
+                <source src="{{ './img/splash.mp4' | url }}" type="video/mp4" />
+            </video>
         </div>
     </div>
 </section>