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").play() , I did ("#vid-stream").play() . However, for other more exotic HTML5 methods, like slowing down video playback, I have to do things like ("#vid-stream video").playbackRate = (“input#playbackRate”).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.