HTML 5 video problems on Safari

I am implementing videos into my hybrid app which runs as a Native App for Iphone and android but is also a PWA that runs on computer browsers, iphone browsers and android. The problem is the video keeps giving me a play button with a slash through it on SAFARI browsers. The URL is correct and this problem only happens on safari. Here is an image of the problem and the code where it happens

No matter what I do I can’t get the videos to work except on MAC by going into Safari enabling devlop andthen under user agent choosing ipad. However I do not have this option on phone and besides what users are going to ant to do this. I reiterate that it runs fine in google chrome on the MAC, PCS and Iphone

Thanks for any help you can provide. I’m almost losing all of my hair

I ended up fixing tis problem by using the video.js. It solved my issues