Custom Controls on iOS #938
Comments
|
What browser are you using on your iOS device? If you are using safari it seems that:
Could you provide more info and post your founded solution to this issue too? |
|
@realamirhe This is happening on both Safari and Chrome on iOS and I'm using regular mp4 files. As of now I haven't found a solution for how to make this work yet. |
|
iOS use webkit engine (safari under the hood). Can check event is triggering or not? Thanks for reporting. |
|
Ok so I ran a test where i set the function to either increase or decrease based on the volume coming from the player and no matter what happened it always defaulted to decreaseVolume. This leads me to believe that the problem is in the connection between the player ref and the controls. For reference the togglePlay function will always fire and work properly. Same as before this worked fine on desktop but on mobile it's not working. here's the function code i used for the test onClick={() => {
if (ref?.current?.plyr?.volume < 1) {
console.log("event fired to increase");
setMuted(false);
ref.current.plyr.increaseVolume(1);
} else {
console.log("event fired to decrease");
setMuted(true);
ref.current.plyr.decreaseVolume(1);
}
}} |
|
I also ran a test where I used the custom metric of "muted" to set the function but in that case even though the event registered and printed "event fired to decrease", the audio would be stuck at 1. Here's the code for context: onClick={() => {
if (muted) {
console.log("event fired to increase");
setMuted(false);
ref.current.plyr.increaseVolume(1);
} else {
console.log("event fired to decrease");
setMuted(true);
ref.current.plyr.decreaseVolume(1);
}
}} |
How and when do you grab the muted property? |
I'll work on getting you that detailed CodePen test, in the meantime here's a breakdown of the muted property. In the original code snippet I set it in using useState with a default value of true and then update it using useEffect whenever there is a change in volume (This work on Desktop but not mobile) In the subsequent examples I was setting again setting it using useState but then updating it manually whenever the button is clicked. In this case the button would update the value and fire the console log but the decreaseVolume action wouldn't fire for some reason. Meaning that the button would change but the volume would remain at 1 |
|
Hmm, that's weird, in case you don't get an error in calling the function it means that you get some proper instance of Plyr instead of the default proxy. I'm waiting for your codepen test, so we can trace down the issue more properly. |
|
I removed a lot of the dynamic aspects of the code and replaced it with hard coded values in order to make the test work but here is the sample code for you to review. https://codepen.io/c-mella/pen/JjvPRjM Thanks again for you help |
|
Hi, just wanted to see if you'd had a chance to review? I just went in and revised the pen with a new video because I realized the previous one had very subtle audio so it wouldnt be easy to test. |
|
oh sorry for delay @c-mella, I might miss the notification or didn't get one, please directly mention me if I didn't respond. I'm going to review it today. |
|
@realamirhe Thanks again for looking into it, I'm not sure what the issue is but I and my teammates are still seeing the video as muted no matter how much we click the unmute button. I'm not sure if this helps but I'm on an iPhone 13 running iOS 15.6 |
I am using usePlyr to create a custom plyr instance but on mobile the audio controls don't work. The icon shows as unmuted and doesn't unmute the audio when tapped. Has anyone else had this issue?
The text was updated successfully, but these errors were encountered: