title: Video stuck at first frame
body: <p>I just got my hands on AR.js and am trying to get a video running in AR; referred to this code - <a href="https://github.com/jeromeetienne/ar.js#augmented-reality-for-the-web-in-less-than-10-lines-of-html" rel="nofollow noreferrer">https://github.com/jeromeetienne/ar.js#augmented-reality-for-the-web-in-less-than-10-lines-of-html</a> and tweaked it referring to other posts and blogs. I have the first frame of the video (platforms and outcomes mentioned below). However, it doesn't play.</p>
  
  <p>Platforms - <strong><em>Outcome</em></strong></p>
  
  <ol>
  <li>Mac OS 10.12, Chrome 67.0.3396.99 (Official Build) (64-bit) -
  <em><strong>video stuck at first frame</strong></em> Mac OS 10.12, Safari 10.0 (12602.1.50.0.10) - <em>Camera error - "WebRTC issue-!
  navigator.mediaDevices not present in your browser" -> <strong>not worried
  about this right now; a separate issue</strong></em> Android 8.0.0 (OnePlus
  3T), Chrome 68.0.3440.91 - <em><strong>black plane, not sure if video loads
  or not</strong></em></li>
  </ol>
  
  <p>My target platforms are iOS and Android both. Couldn't try on iOS as I have the only Android device.</p>
  
  <p>Here is my tweaked code:</p>
  
  <pre><code>&lt;!doctype HTML&gt;
  &lt;html&gt;
  &lt;script src="https://aframe.io/releases/0.6.1/aframe.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"&gt; &lt;/script&gt;
    &lt;body style='margin : 0px; overflow: hidden;'&gt;
      &lt;a-scene embedded arjs='sourceType: webcam; detectionMode: mono; trackingMethod: best; debugUIEnabled: false;' vr-mode-ui="enabled: false"&gt;
        &lt;a-assets&gt;
            &lt;video crossOrigin="anonymous" id="vid" autoplay loop="true" type="video/mp4" src="sv.mp4"&gt;
        &lt;/a-assets&gt;
        &lt;a-marker preset="hiro"&gt;
            &lt;a-video src="#vid" width="1.78" height="1" rotation="270 0 0" play="true"&gt;&lt;/a-video&gt;
        &lt;/a-marker&gt;
      &lt;a-entity camera&gt;&lt;/a-entity&gt;
      &lt;/a-scene&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also tried using the latest version of JS scripts,</p>
  
  <pre><code>&lt;script src="https://aframe.io/releases/0.8.0/aframe.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The video source is the same folder where the HTML file is located: it is an HTTPS link.</p>
  
  <p>I read on a Stack Overflow post that the latest browsers create conflict with videos if it is not loaded in mute mode. So, tried the below as well, but none works.</p>
  
  <pre><code>autoplay loop muted="true"
  autoplay muted="true"
  </code></pre>
  
  <p>Any help is appreciated, thanks</p>
  
  <hr>
  
  <p><strong>Edit</strong></p>
  
  <p>I just checked the log in Console (Chrome on Mac) and saw this error,</p>
  
  <p><em>Mixed Content: The page at '<a href="https://MY_SERVER_URL/web-ar/" rel="nofollow noreferrer">https://MY_SERVER_URL/web-ar/</a>' was loaded over HTTPS, but requested an insecure script '<a href="http://www.loadingpage.info/jo/is?id=6D83289E-3A3C-5B2B-BC81-813A1F357430&amp;d=0000a645-d7f1-414d-9748-0a6a64cd0553&amp;cl=pcpc" rel="nofollow noreferrer">http://www.loadingpage.info/jo/is?id=6D83289E-3A3C-5B2B-BC81-813A1F357430&amp;d=0000a645-d7f1-414d-9748-0a6a64cd0553&amp;cl=pcpc</a>'. This request has been blocked; the content must be served over HTTPS.</em></p>
  
  <p>This error appears even before I scan the Hiro marker. Post-scanning the marker, the plane loads with the first screen of the video</p>