According to this article https://webkit.org/blog/6784/new-video-policies-for-ios/ touchend should be able to trigger a play event on iOS. However in the example below a press on the element fires the action and starts the audio playback. A touch drag fires the action but returns a promise rejection and does not start the audio playback. Any idea on how to work around this?
el.addEventListener("touchend", stb.task.dragEnd );
el.addEventListener("mousedown", stb.task.dragEnd );
Related
I want to control the forward and backward buttons for safari video player but don't know how to call them. Like for play, you called 'play' event or 'pause' for pausing the video.
Worst case, if control is not happening, is there any way to hide or disabled this buttons?
I detect the safari browser and apply 'play' event, it's working fine but forward/backward not find anything at all.
!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/) this will allow to do modifications only for safari. Don't have much code right now. don't know what to show here.
In my mobile app I want to toggle full screen when user is swiping up.
So when touchend event is triggered I'm calling document.documentElement.webkitRequestFullScreen();
The problem is that it doesn't works for me in mobile Chrome 56+.
Here is example.
https://jsfiddle.net/ibmw/tnncaxj0/6/
The interest part is: this issue appearing only when you make touchmove between touchstart and touchend.
In console I've got an error:
Failed to execute 'requestFullscreen' on 'Element': API can only be
initiated by a user gesture.
document.documentElement.webkitRequestFullScreen();
Does anyone know how to struggle it?
You have to call preventDefault() on touchmove, and pass new option to addEventListener(). It's works for me:
addEventListener('touchmove', onTouchMove, {passive: false});
function onTouchMove(e) {
e.preventDefault
}
Considering the limitations imposed by iOS Safari about the play/load call on a video element I use to initiate it at the first user touchend with a preplay action (play() followed by pause()). From that time I can play with the video as I want (this solution is partially described here).
The problem I encountered is a failed preplay (any next call to play() will be ignored) when the first touchend follows a swipe/drag interaction.
There is a way to let it works also with a swipe? or there is a reliable way to detect if the preplay was succeeded?
When I try to inspect the touchmove event in this jsbin demo it only triggers once in Chrome and Opera for Android, and immediately after that, it triggers a touchcancel event, instead of continuing to trigger touchmove events?
Based on both the W3C specs, and the behaviour of the touchmove event in both Firefox for Android and Android's default browser, it seems to me that the way the touch events are supposed to work is that the touchmove event keeps triggering while the touch is still on the page. After trying to test in this jsbin though, I got the following log messages:
touchstart event; starting on (140,197) on the screen, or (381,536) on the page.
touchend event; starting on (undefined,undefined) on the screen, or (undefined,undefined) on the page.
touchstart event; starting on (181,137) on the screen, or (492,372) on the page.
touchmove event; starting on (182,153) on the screen, or (495,416) on the page.
touchcancel event; starting on (undefined,undefined) on the screen, or (undefined,undefined) on the page.
This is what happened when I first tapped the screen (shown via a touchstart and touchend), and then dragged the screen (touchstart, touchmove and touchcancel). Going by the same specs mentioned above, the touchcancel event should only run when something interferes , such as the browser interface (if I understand that correctly).
Since I was simply sliding my finger over the body, without leaving the window at all, I am really puzzled by this, so would anybody know why this is happening?
I am getting this unexpected result in Chrome 32 and Opera 19 for Android.
Turns out the problem here was simply the fact the event handler didn't have an event.preventDefault() in it, so the original action still executed, which apparently interrupted the touch event. To fix this, simply add e.preventDefault() in the current event handler function to cancel the current event, and make it work as expected in Chrome and Opera too.
Working demo.
In Chrome 31 on Windows 7 and Linux (Ubuntu 13.10) an event handler on a video element, registered for canplay (and oncanplay, just to make sure) never fires. When I inspect the DOM node, there's no oncanplay property. The spec says it should exist. Does anyone have any idea when, or if, Chrome might support this event?
Chrome does support the canplay event. You're not seeing it because the inspector only shows those properties that are on all elements, not just media elements. It also does not show loadedmetadata, durationchange, etc. but Chrome definitely supports those.
I haven't seen your code, but I would guess that a likely reason that you would see the event fire (assuming you're listening for it correctly) is that you've missed the event. Unless you're skipping around the video quite a bit, canplay will only fire one time. So if the event fires before you attach the listener, it's too late.
Instead, you can check the state, like so...
//assume you've already set up the video variable to point to your video element
if (video.readyState >= video.HAVE_FUTURE_DATA) {
console.log('video can play!');
} else {
video.addEventListener('canplay', function () {
console.log('video can play!');
}, false);
}
(Depending on what you're trying to accomplish, you may want to attach the event listener either way. The video's readyState can revert back if you run out of buffered data, and canplay might fire again later.