How do i prevent ios video controls from appearing on stream?

stream

#1

I’m trying to implement a customized video player with a bunch of specific capabilities unavailable with the default cloudflare or ios player. Therefore I don’t want any other controls but the ones that I developed. This is easy to do with on a non-mobile version since I just don’t include the “controls” attribute, but the default ios controls are there and very difficult to remove on a mobile platform. Is there a way to force the videos to play inline and use my controls?

EDIT: Ok after a lot of experimentation I fixed the problem. As per my usual, I don’t really understand why my fix works, but it does. I’m writing this for anyone else unlucky enough to have to deal with this issue. Preventing the native iOS controls from appearing was easy: just set the shadow dom controls to a z-index of like -10000000 in the css. Getting everything to function was more tricky, though. Basically, at the time of this writing, the cloudflare stream api lacks many event listeners, properties, and methods that were crucial to my project. As a result I couldn’t apply many of HTML5 video’s API parts to the cloudflare <stream> tag like their api suggests. So I did this wacky workaround where I implemented a mutation observer to detect when the cloudflare script loaded its <video> tag. Then I grabbed that and hooked all the normal HTML5 events, properties, and methods into that. Unfortunately, for some god forsaken reason the iOS webkit browser doesn’t recognize those api calls as legit so the “Promise” wasn’t being fulfilled and the video wasn’t playing. However, I realized that I was hooking everything into the dynamically loaded <video> tag. This was unnecessary. I went back and rewrote my code so that everything that could hook into the <stream> tag from cloudflare’s api would do so. So rather than trying to do ("#vid-stream video")[0].play() , I did ("#vid-stream")[0].play() . However, for other more exotic HTML5 methods, like slowing down video playback, I have to do things like ("#vid-stream video")[0].playbackRate = (“input#playbackRate”)[0].value; In other words, when you can, use the recommended cloudflare way. Maybe one day Cloudflare will fully support the HTML5 Video API, but until then these workarounds appear necessary. If anyone has a better way PLEASE post it here so that I and others can see.


#2

Someone else had the same issue, but I haven’t seen any solution yet.


#3

I’ve been so frustrated with it. I’ve moved the ios controls to the back of the page by changing its z-index value to a huge negative number. This prevents it from showing up, but my play button doesn’t work. In the console, i get an error that says that there is a pending promise. Supposedly this has something to do with preventing annoying spam by making sure a user has interacted with the page. However, tapping the play button doesn’t seem to change the state of the promise thus preventing the video playback. I think its waiting for someone to interact with the other controls. I don’t know though. I’m pretty well screwed if I can’t get this working.


#4

Here’s the thread with a link in the last post:


#5

Thanks for the link, but none of that works.