Troubleshooting Google IMA + Shaka-Player Pre-Roll Ad Freezing Issue on iOS - Seeking Solutions

Question

I'm implementing Google IMA + Shaka-Player to trigger an ADS (pre-roll) when I click play.

When I click play, the ad appears but it freezes after 1 or 2 seconds, if I click play again it runs until the end and then starts again and when it reaches the end the stream does not start.

I use this same logic without DRM for Android and Desktop and it is working perfectly, however on iOS it is having this problem, I believe I need to adjust something. I've read all the shaka-player and Google IMA documentation and haven't found any information about this error.

Do you have any suggestions to fix this and make the ads appear correctly before and after running the stream?

      var player,adManager;

    async  function initPlayer() {
 

  const video = document.getElementById('video');
  const ui = video['ui'];
  const controls = ui.getControls();
  player = controls.getPlayer();
  window.player = player;
  window.ui = ui;       

        container = ui.getControls().getClientSideAdContainer();
        adManager = await player.getAdManager();
        adManager.initClientSide(container, video);

        window.player = player;
        // Listen for error events.
        player.addEventListener("error", onErrorEvent);


        shaka.polyfill.PatchedMediaKeysApple.install();
        const FairPlayUtils = shaka.util.FairPlayUtils;
        player.getNetworkingEngine().registerRequestFilter(FairPlayUtils.ezdrmFairPlayRequest);
        player.getNetworkingEngine().registerResponseFilter(FairPlayUtils.commonFairPlayResponse);
        player.configure('drm.initDataTransform', FairPlayUtils.ezdrmInitDataTransform);

        await secondPart();


      }

      function onErrorEvent(event) {
        // Extract the shaka.util.Error object from the event.
        shakaOnError(event.detail);
      }

      function shakaOnError(error) {
        // alert(error);
        console.log(error);
        console.error("Error code", error.code, "object", error);
        if (window.player) {
          window.player.detach();
        }
      }

      async function secondPart() {

        adManager = await player.getAdManager();

          try {

            
            var ADS = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=&YYYY=";

            const adsRequest = new google.ima.AdsRequest();
            
            adsRequest.adTagUrl = ADS;
            adManager.requestClientSideAds(adsRequest);

              } catch (error) {
                console.debug(error);
                console.warn("Ads code has been prevented from running. " + "Proceeding without ads.");
              }

        /**********************************************************************/

        const response = await fetch(CERTIFICATE_PATH);
        if (!response.ok) {
          alert("Could not get certificate!");
          return;
        }
        // const certificate = await response.arrayBuffer();
        const cert = await response.arrayBuffer();

        player.configure({
          drm: {
            servers: {
              // "com.apple.fps.1_0": FAIRPLAY_STAGE
              "com.apple.fps": FAIRPLAY_STAGE
            },
            advanced: {
              // "com.apple.fps.1_0": {
              "com.apple.fps": {
                serverCertificate: new Uint8Array(cert)
              }
            }
          }
        });

        player.configure('drm.initDataTransform', function (initData) {
          const skdUri = shaka.util.StringUtils.fromBytesAutoDetect(initData);
          const contentId = skdUri;
          const cert = player.drmInfo().serverCertificate;
          return shaka.util.FairPlayUtils.initDataTransform(initData, contentId, cert);
        });


        player.getNetworkingEngine().registerRequestFilter((type, request, context) => {
          if (type != shaka.net.NetworkingEngine.RequestType.LICENSE) {
            return;
          }
          const uri = request.uris[0];
          const FairPlayUtils = shaka.util.FairPlayUtils;
          const contentId = FairPlayUtils.defaultGetContentId(request.initData);
          const newUri = uri.replace('^assetId^', contentId);
          request.uris = [newUri];
          request.headers['Content-Type'] = 'application/octet-stream'
        });


      



 // Listening To Ad Events 
  const eventsAdManager = [
    shaka.ads.AdManager.AD_PROGRESS,
    shaka.ads.AdManager.AD_RESUMED,
    shaka.ads.AdManager.AD_STARTED,
    shaka.ads.AdManager.AD_FIRST_QUARTILE,
    shaka.ads.AdManager.AD_MIDPOINT,
    shaka.ads.AdManager.AD_THIRD_QUARTILE,
    shaka.ads.AdManager.AD_COMPLETE,
    shaka.ads.AdManager.ALL_ADS_COMPLETED
  ];

  eventsAdManager.forEach((events) => {
    adManager.addEventListener(
      events,
      (e) => {
       console.debug(`EVENT: ${e.type}`);
      //all-ads-completed
       
      },
      false
    );
  });


        try {

          await player.load(manifestURI);          
          console.log("The video has now been loaded!");
        } catch (exception) {
          console.log(exception);
        }

        

      }

  
   
     function buttonPlay(){

      video.play();
       console.log("buttonPLAY clicked @@@@@ ");
     }
    


      document.addEventListener('shaka-ui-loaded', initPlayer);

I tried implementing Google IMA for pre-roll ads on iOS by following the recommended configuration and integration steps. I expected that when I click the 'play' button, the pre-roll ad would display correctly, play through, and then transition smoothly to the main video content. However, what actually happened is that the ad appeared but froze after 1 or 2 seconds. Clicking 'play' again made the ad run to completion, but the main video content didn't start afterward. My expectation was for a seamless ad experience before and after playing the main video content.