2

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.

I really don't know if there is any difference between a physical click and a simulated one, I thought there was, but this question 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.

This is what I have:

<video width="320" height="240" preload="auto" controls>
  <source src="./img/video.mp4" type="video/mp4"></source>
  Your browser does not support the video tag.
</video>

What I was doing upon shaking the device is:

document.querySelector("video").play();

This works only if the video was played by the user 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.

<button>play</button>

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 document.querySelector("button").click(); with no success).

document.querySelector("button").addEventListener("touchstart", function(e){
  document.querySelector("video").play();
});

NOTE: This (above) works if I physically touch the button. So, that is why I wanted to simulate a touch event:

Touch Event Creator:

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);
}

And then, lets say, on shake (ignore the shake code, it works) I also tried manually through the console execute the click function:

click(document.querySelector("button"));

Resource to create the Touch Event.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
pgarciacamou
  • 1,602
  • 22
  • 40
  • Fullscreen mode can't be enabled except for inside of an actual click event (if it could be faked, that would be a security bug). I'd imagine that's the same case with this. – gengkev Aug 28 '15 at 00:58
  • Maybe ask the user to touch the screen first when loading the page to either (1) trigger fullscreen mode and simply play the video from there; or (2) play the video — you can immediately pause it — so that you can start the video later – gengkev Aug 28 '15 at 00:59
  • 1
    http://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad – mwl Aug 30 '15 at 18:55
  • Thanks @mwl, that is the answer to my question. – pgarciacamou Aug 31 '15 at 16:31

0 Answers0