'video source mp4 not working in ios 15 - iphone 8 and 8 plus only

this is strange, I have a video source mp4 in my background and its autoplaying. this was working fine on every mobile specially in iphone 8 and plus, but suddenly on the iphone 8 and plus stop the autoplay attribute. I tried so many different possible solution on the web but it wont works. here is my code:

    <div class="videowrap spvid"> 
        <video playsinline autoplay muted loop poster="" id="vid">
            <source type="video/mp4" src="<?php echo get_template_directory_uri(); ?>/img/mp4/sp/video_visual_sp.mp4">
        </video>
    </div>

as you see, I used playsinline and muted, but suddenly it stop working in iphone 8 and plus only. now, I added javascript to force the video in muted incase the html doesn't run the muted attribute.

    <script>
       var vid = document.getElementById("vid");
       vid.muted = true;
       vid.play();
    </script>

I see this article https://medium.com/@BoltAssaults/autoplay-muted-html5-video-safari-ios-10-in-react-673ae50ba1f5 but it's hard to follow his instruction about the "react" and "dangerouslySetInnerHTML"

can anyone help me a specific solution code for this issue??

javascripthtmlvideo


Solution 1:[1]

Please enable the following in Safari > Advanced > Experimental WebKit Features:

  GPU Process: Canvas Rendering
  GPU Process: Media
  GPU Process: Video Capture
  GPU Process: WebGL
  WebGL via Metal

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions