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.