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.
Related
Question:
How to listen to MediaPlayPause keyboard event in unfocused tab.
Background:
I recently noticed that Youtube is able to Play/Pause the video when I press the Play/Pause Media button on the keyboard, even when the browser tab/window is not in focus.
This seems to only work in Chrome (I've tested in Chrome 74 on Windows 10), so there must be some Chrome-specific API method they're using to make it work, since keyboard events generally can't be accessed when the tab isn't in focus.
I'd like to achieve a similar functionality in a web-app, but can't figure out how. Therefore I ask of the greater collective if anyone knows how this is achieved?
I have a website set-up, where the background is a YouTube video using Tubular.js plugin. There is a problem with chrome browsers, that auto pauses the youtube video if I load it with mute: false flag. Chrome is the only offender, as it works with opera, firefox etc. If I change the flag to mute: true the video will atuplay fine.
Chrome recently started to block atuplayed videos with sound. Is there an option to bypass this on chrome, or at least modify the tubular.js library/js call so that it will only mute (regardless of settings) on chrome user-agents?
https://codepen.io/anon/pen/MGEZrO
Thanks in advance
According to chrome logic it is impossible to autoplay video if it is NOT muted. However they allow to autoplay video if it is muted and WILL NOT stop it if user will unmute it. By this (user interaction) chrome means just a single tap OR click by the user on the website (everywhere, not video components only).
Just make your user to make a single click on your webpage and THEN you can mount/start video with autoplay and sound.
I have the similar situation with my react spa. And I force my user to make a single click before mounting the video. Only this way it starts to play with sound.
I also had the situation where the video MUST have started even without click and the I just addEventListener on whole page to unmute it as soon as possible
play(from = null) {
document.addEventListener('click', () => {
// any click will force my video to unmute
this.player.muted = false;
});
// rest code for updating state etc
}
Unfortunately, triggering click is not working (the video will stop automatically)
According to their guidelines about autoplay on chrome ;
Unfortunately, Chrome cannot provide any whitelist exceptions to the autoplay policy.
They also explain how to present the content in a less-invasive way (muted video first) and some other tips about the policy.
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?
My goal is to present clients with a video from youtube (iframe api) that cannot be skipped or seeked forward. On all platforms but iOS this is simple. But I'm having problems with Apple's fullscreen player.
Once playback on a video has started, you are transported to Apple's iOS video player, with it's standard controls. What I have been unable to find is if you can hide/disable these controls in the fullscreen layout.
Alternatively, if I can capture events from the iOS player and merely detect when a user is trying to skip would work as well. I've attached events in accordance with the HTMLMediaElement specs, but none of them fire. Nor do any of youtube's events fire.
I am tracking the console through Safari from the iOS simulator, which could be a problem on it's own.
Any help would be appreciated. I've gone through every SO post on the subject.
While I was unable to find anyway to hide the iOS default viewer (I believe it's impossible), I was able to get the youtube events to fire. With keeping an interval, and checking that against the video's time each time an event is fired, I can figure out if a user has skipped.
I'm currently implementing HowlerJS and I got it working. But the following happens on Safari using El Capitan:
Open Safari and enter HowlerJS and click play, and it starts loading.
For several of the machines it never plays
Refresh page, click play, it works.
Close open Safari, happens again.
And it is also happening on iOS. Now I've seen that you need to wait for a user click to play audio, which is what I'm doing.
On click of the button it loads and plays the audio. Has anyone faced this problem? I'm using the stable version 1.1.28.
Safari 9 has started to suspend audio on initial page load. In addition to all the other song and dance you usually have to do, now we have to instruct the AudioContext to resume and defer our business logic until that promise resolves. You'll probably want this check just inside a click handler.
if(Howler.ctx && Howler.ctx.state && Howler.ctx.state == "suspended") {
Howler.ctx.resume().then(function() {
console.log("AudioContext resumed!");
// fire your callback here
});
}
Howler 2.0 has supposedly already fixed this, but no such luck as of 1.1.28 for us stable users >_>