title: How to force play an HTML5 video without physical input(touch) from the user
body: <p>The question might sound very, very bad but I do not want to open a video without the user wanting to. I want to open a video with something other than a physical interaction from the user e.g. by shaking the device. I'm using an iPhone6+ currently with safari 8.x.</p>
  
  <p>I really don't know if there is any difference between a physical click and a simulated one, I thought there was, but <a href="https://stackoverflow.com/questions/11127908/difference-between-click-and-actually-clicking-a-button-javascript-jquery">this question</a> says the opposite. Anyhow for the past 2 hours I did my best to replicate the event data from a physical click but it might bot be the correct approach.</p>
  
  <p>This is what I have:</p>
  
  <pre><code>&lt;video width="320" height="240" preload="auto" controls&gt;
    &lt;source src="./img/video.mp4" type="video/mp4"&gt;&lt;/source&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;
  </code></pre>
  
  <p>What I was doing upon shaking the device is:</p>
  
  <pre><code>document.querySelector("video").play();
  </code></pre>
  
  <p>This works only if the video was played <strong>by the user</strong> first, else, it doesn't work. So I wanted to simulate a touch event to fake the user input, I created a button that when clicked it opens the video like the way above. Reason for the button: I couldn't make the touch event click the video to play it.</p>
  
  <pre><code>&lt;button&gt;play&lt;/button&gt;
  </code></pre>
  
  <p>Now, I wanted to trigger this button with a touch event the following way (needless to say, I also tried with the common click event and <code>document.querySelector("button").click();</code> with no success).</p>
  
  <pre><code>document.querySelector("button").addEventListener("touchstart", function(e){
    document.querySelector("video").play();
  });
  </code></pre>
  
  <p>NOTE: This (above) works if I physically touch the button. So, that is why I wanted to simulate a touch event:</p>
  
  <p>Touch Event Creator:</p>
  
  <pre><code>function click(el) {
    var cancelled = false;
  
    var evt = document.createEvent("TouchEvent");
    var t = {
      view: window, 
      target: document.querySelector("button"), 
      identifier: 1617692871, 
      pageX: 183, 
      pageY: 303,
      screenX: 183, 
      screenY: 303, 
      clientX: 183, 
      clientY: 303,
      radiusX: 1, 
      radiusY: 1, 
      rotationAngle: 0.0, 
      force: 1
    };
    var touch = document.createTouch(t.view, t.target, t.identifier, t.pageX, t.pageY, t.screenX, t.screenY, t.clientX, t.clientY, t.radiusX, t.radiusY, t.rotationAngle, t.force);
    console.log(touch);
    var o = {
      type: "touchstart",
      bubbles: true,
      cancelable: true,
      view: window,
      detail: 1,
      screenX: 0,
      screenY: 0,
      clientX: 0,
      clientX: 0,
      ctrlKey: false,
      altKey:  false,
      shiftKey:  false,
      metaKey:  false,
      touches: document.createTouchList(touch),
      targetTouches: document.createTouchList(touch),
      changedTouches: document.createTouchList(touch),
      scale: 1.0,
      rotation: 0.0
    };
    evt.initTouchEvent(o.type, o.bubbles, o.cancelable, o.view, o.detail, o.screenX, o.screenY, o.clientX, o.clientY, o.ctrlKey, o.altKey, o.shiftKey, o.metaKey, o.touches, o.targetTouches, o.changedTouches, o.scale, o.rotation);
    cancelled = !el.dispatchEvent(evt);
  }
  </code></pre>
  
  <p>And then, lets say, on shake (ignore the shake code, it works) I also tried manually through the console execute the click function:</p>
  
  <pre><code>click(document.querySelector("button"));
  </code></pre>
  
  <p><a href="http://yuilibrary.com/yui/docs/api/files/event-simulate_js_event-simulate.js.html" rel="nofollow noreferrer">Resource</a> to create the Touch Event.</p>