I got application build in vue3. Whenever a qr-code is scanned it trigger a function that plays a sound. This works fine on android and on the web but not when using the browser on ios. I cannot figure out what is wrong. Anyone who has a clue?
<qrcode-stream
:camera="camera"
#decode="onDecode"
:torch="torch"
:track="drawoutline"
>
</qrcode-stream>
Trigger the function:
async function onDecode(data) {
new Audio(require("../assets/audio.mp3")).play();
}
If i trigger it with a button it plays the audio however but not on the fly when the qr-code is detected:
<q-btn
label="play sound"
#click="onDecode('Audio')"
></q-btn>
This is very much simplified. It works fine on android and on the web however but when running it on the web on ios it wont play any audio unless you press the button. Why?
You can not automatically play audio on iOS without the user initiating it via an interaction. This is an iOS imposed limitation.
the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
Related
I have an html5 audio player on my page that streams from my icecast server, all working OK. However, when people block their phone there's no metadata, only the play button that iOS/Android offers.
Is there a way to show something like 'Glaciar's livestream', like when the Spotify app shows the song's title and artist? I'm using PHP and Javascript apart from HTML and CSS.
Thanks in advance!
You can use the Media Session API to customize what's been shown on the lock screen.
But it is not supported by Safari which means you can't use it to customize the lock screen on an iOS device.
I just came along the same issue. Our Webapp would not display anything on the lock screen even though audio was playing. This is what I just found out:
We are setting up an new Audio() element in javascript - within the user interaction we call audio.load(). Then we wait for the canplay event to fire and with that event handler, we call audio.play(). When the phone now gets locked, there is nothing shown on the lock screen.
However, when we add audio.play() directly after audio.load(), so it is called within the same user interaction, everything shows up fine on the lock screen. So it seems like, it matters if audio.play() is called within a user interaction.
Some more background in case someone wonders why we are not calling play within the user interaction: We usually use an audio context (that is unlocked within a user interaction) and just started to fall back to an audio element, due to numerous audio related bugs in safari.
In the following fiddle there are external controls for the youtube player. They work fine on desktop browsers, however in a mobile browser the play button fails to start the playback of the video.
https://jsfiddle.net/wittjosiah/oLxv6ep2/
According to the Apple Developer Library:
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
However, in this scenario the play() method is user-triggered but is still failing to initiated playback on both the iPhone simulator and my iPhone 6S.
Am I missing something? Is there a reason this isn't working? Youtube's mobile site initiates playback from a user-action so it must be possible. Any help is appreciated.
YT.Player does not guarantee that playVideo() will work in all mobile environments.
Try setting the preference MediaPlaybackRequiresUserAction to true
It seems to be a common complaint that mobile devices won't autoplay video or audio. According to the Apple Developer Library it is disabled on purpose:
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
What is allowed is for a direct user action to trigger the play event. My problem is that I have thumbnails of videos which when clicked load a video element in their place and need to play once they are loaded. On mobile the user has to click twice to make the video play which is not good. I am frustrated because my user actually is triggering a play action but there are a few other events which take place in between. I started testing a different user-triggered-event to see what the scope or limitations of what apple calls a "direct user action" are.
I found that this code triggered the play event:
$(".clickElement").click(function(){
$("video").get(0).play();
});
while this did not:
$(".clickElement").click(function(){
setTimeout(function(){
$("video").get(0).play();
},0);
});
the same went for different timeout durations and when setInterval was used instead.
My question is what / how does apple define a direct user action? Obviously timeouts and intervals aren't direct enough. Is there a way for me to trigger the play event "directly" from the user and allow enough time for my video element to enter the page?
I'm creating a Phonegap application with embedded video using the HTML5 tag.
The video loads and plays fine. The only problem is that it requires user interaction. The play script runs fine when I trigger it by clicking a link, but will not work when run using setTimeOut. Is there a way to bypass this limitation?
It only needs to work on one device, and the devices is rooted. So hacks are also welcome ;-)
I don't want to play the video fullscreen, so I cannot use the video plugin.
Android 4.2.2, Phonegap 3.2
I am creating an iPad app for running YouTube video using IFrame.
I referred to many questions regarding YouTube integration in UIWebView and understand that:
Autoplay is not possible
Apple doesn't allow to run video without user interaction (starting).
In my simple app, I have a JavaScript button in the first page, and in the next page integrated YouTube with IFrame.
If I click on the JavaScript button, is there any way to pass this click event to the next page for running YouTube?
Is event bubbling in HTML helps this?
As far as I know no, you can't do anything about it. Event triggering can be easily simulated (some example) without user interaction which can't work on iOS devices (because of the policy you mentioned).
iOS video tag (used by YouTube in this case) is handled by iOS browser. Mobile version is showing placeholder with play button which you need to 'tap'. And only this action can play the video. Notice that you can't even overlay video tag with anything, because it will simply not work.