I have to implement a sound notification and I just can't get audio to play on Chrome if the user hasn't interacted with the page.
I have tried workarounds like:
adding iframe with a dummy audio file,
using ViewChild with the play() method,
even using a click() on a button and then trying to play() method again.
None of these seem to work. The only result I had was when the user interacted with the page, but if he refreshes the page and doesn't interact with the page, no sound will play which beats the purpose of the audio notification.
Autoplay seems to not have any problems with Edge, anyone know a good workaround for Chrome?
Stackblitz exemple of my implementation is here
You can't.
Your page does not have a high enough Media Engagement Index to enable autoplay. You can debug this at chrome://media-engagement.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#mei
Related
I have autoplay in the video tag, but it still requires mousing over it. From what I read it's because it requires user interaction to play the video, so users won't be annoyed by videos playing without their consent. Is there a way to get around that or fake the event well enough to fool the browser?
No. And if there was a way to fool it, Apple would just close that loophole on the next release.
I'm using the following iframe in my HTML code:
<iframe src="<iframeurl>">?autoplay=1" frameborder="0" allowfullscreen></iframe>
On iPhone with iOS10 this doesn't autoplay. I'm getting the red play button and stuff. On windows chrome and others all works fine autoplay starts correctly. But not with the iphone.
Is there anything I could do in javascript or by manipulating the URL to make this autoplay? I'm aware that Apple used to disallow autoplay before iOS10 so maybe I'm doing something wrong here..
You're experiencing this because Apple doesn't allow embedded media to play automatically — the user always initiates playback.
This is mentioned in YouTube's IFrame Player API documentation as well. And no, I don't think you can and should override this since that is a bad practice.
Just add the play trigger to onClick and then execute call the click event from an AJAX response.
Should do the trick ;)
It is not that iOS prevents any video from autoplaying (at least not so since iOS 10), but it is unmuted videos that are prevented from playing without user interaction. So if you embed a YouTube video with muted=1 appended to the URL, autoplay works again.
P.S. the muted parameter is not documented for the YouTube embedded players. It is nowhere to be found in the official doc: https://developers.google.com/youtube/player_parameters. Yet it has been working for quite a while. If you worry it may not work someday, you can take the programmatic approach via the iframe API: first mute the video and then play it when the ready event is emitted.
putting this in config.xml worked for me:
<allow-navigation href="*://*youtube.com" />
The question is not "Is it possible"? I know the mobile browsers can not autoplay html5 videos but, here i have an example of autoplaying.
Please explain to the world how is possible that!
Here the example: http://misc.teads.tv/us/demo/InReadWeltDemo2/index.html#232943677
And now? ;-)
You probably might have found this by now. But if not, then that video is triggered by the user's touch (window.touchStart) event. As soon as the user touches the screen to click/scroll, the video element's .play() is triggered.
You could try opening the url in any mobile-browser that does not support touch events to see that the video does not play until you click on it.
I created an audio player dynamically with autoplay enabled. But it is working with desktop browser not in android browser. And progress handler not dispatched.
If I enable the controls attribute and click the play button it will dispatch the progress handler and playing the audio. Even I was tried to play by manually by calling the play() method.
I want to play the audio once canplaythrough handler triggered.
Audio on mobile devices often requires a user event (click / touch) in order to play, which seems to be what is happening in your case.
You can check out the SoundJS Mobile Safe Tutorial to learn more about the issue and a couple of ways to work around it.
Hope that helps.
Is there a way to access/listen to the previous/next buttons in the iOS HTML5 video player? Ideally I would listen to some sort of a prev and next event and swap out the videos accordingly without the user having to close the video and click my prev/next buttons.
(source: iphonefaq.org)
I am currently using jwplayer to generate the html5 video and listening to their playlist next/prev listeners don't seem to do the trick. I can always find and attach listeners to the actual <video> tag pretty easily though.
If you attach listeners to the video tag itself then when the user hits next and previous then the listeners in the code will put up on those buttons. I am doing something similar with youTube videos. If you hit next it goes to the end of the youtube video and fires a video complete event tag and then I load the next video when that is called, so that the video will one loop without the next button and two the users can hit the buttons. I have not found a way to monitor the buttons in the player on the iphone side, but if I find it I will post that as well since it is important to know both angels if possible.
Funny thing I think I am looking to try and do the same exact thing. I know how to transition the videos to the next without having to leave the fullscreen mode because of using youTube api in the js but I am not able to observe the quicktime player itself and need to for another feature that I would like to work on.
That's the native iOS player which is a thin version of Quicktime. You'll know if it's an HTML5 player when it doesn't transition from the Quicktime player and your page in Safari. How is your movie being embedded?
I recently had a similar problem and was unable to find a solution using the HTML player. I ended up implementing the video player using MPVideoPlayer Framework and launching it from my web view with a custom URL scheme (AppName:Commnad:Asset). I was then able to use the delegate methods to monitor user interactions. If you would like to see basic implementation, let me know and I can add some code.