Load mp4 videos for better compatibility with Safari / iOS

demos/hello-aframe/index.html

             </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

             </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

         <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

             </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

             </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

         <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>
         </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

 
 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>
 
     <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

 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>
 
 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

     <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

 
 ## 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:
     ├── 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:
     </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>
 ```
     </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>
 ```
     ├── index.html
     ├── martins.js
     ├── my-reference-image.webp
+    ├── my-video.mp4
     └── my-video.webm
 
 ## Link the image to the tracker

docs_overrides/home.html

             <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>