Preroll ad doesn't playing on iPhone devices

[muhammadshafie]

Hi,

I have difficulty on running preroll ad on iPhone Devices, I notice that preroll ad not working when I preview using Chrome Devtool (Dimension: All iPhone Devices) or on actual device. On Android devices, its working perfectly fine.

I notice that there log for this issue,

VIDEOJS: adserror (Preroll) VIDEOJS: ERROR: An error with Ads occured. Type: ads-preroll-error.

Below is my implementation code,

import React, { useState, useEffect, useRef } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-ima"; // Import the IMA plugin for Video.js
import "videojs-ima/dist/videojs.ima.css";
import "videojs-contrib-ads"; // Video.js contrib ads plugin
import "videojs-contrib-ads/dist/videojs-contrib-ads.css";

export const VideoJS = (props: any) => {
  const placeholderRef = useRef<any>(null);
  const playerRef = useRef<any>(null);
  const { options, onReady } = props;

  useEffect(() => {
    // Make sure Video.js player is only initialized once
    if (!playerRef.current) {
      const placeholderEl = placeholderRef.current;
      const videoElement = placeholderEl.appendChild(
        document.createElement("video-js")
      );
      videoElement.setAttribute("id", "video-js");
      videoElement.classList.add("vjs-big-play-centered");

      const player = (playerRef.current = videojs(videoElement, options, () => {
        player.log("player is ready");

        const imaOptions = {
          id: "video-js",
          adTagUrl:
            "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
        };

        playerRef.current.ima(imaOptions);

        onReady && onReady(player);
      }));

      // You can update player in the `else` block here, for example:
    } else {
      const player = playerRef.current;

      // Remove vjs-youtube-mobile class to make the big play button appear on the first load
      if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
        const playerDiv = document.querySelector(`#${player.id_}`);
        playerDiv?.classList.remove("vjs-youtube-mobile");
      }

      player.autoplay(options.autoplay);
      player.src(options.sources);
    }
  }, [options, onReady]);

  // Dispose the Video.js player when the functional component unmounts
  useEffect(() => {
    const player = playerRef.current;

    return () => {
      if (player) {
        player.dispose();
        playerRef.current = null;
      }
    };
  }, [playerRef]);

  return (
    <div ref={placeholderRef}></div>
  );
};

export default VideoJS;

[Kiro705]

Hello @muhammadshafie ,

Thank you for reaching out. I was not able to reproduce the issue on iPhone, using the Advanced sample. If you are able to share steps to modify the sample to reproduce the issue, that could help me witg debug.

This plugin does not explicitly support React apps, so there may be certain React features or workflows that are not compatible. I would recommend trying to isolate the issue you are seeing, independent to React. If the issue is being caused by React, I would recommend reaching out on a React forum for advice integrating this plugin.

Please let me know if you have any questions.

Thank you, Jackson IMA SDK team

[muhammadshafie]

Hi @Kiro705 ,

Thanks for responding back. I'm testing the tag using the Advanced sample with Devtool and getting this kind of error and it skipping the Preroll ad. Just sharing on how I reproduce the issue.

The way I inspect is like below,

1. Inspect on responsive view and refresh the page so that it will detect the latest platform
2. Insert the tag and play the video.

On my nextJS project, I got extra error which is, error of VIDEOJS: ERROR: An error with Ads occured. Type: ads-preroll-error (Already ask in the community forum and waiting for their response). On the android, the ad working fine.

Dimension: iPhone 14 Pro Max

Dimension: Samsung S20 Ultra

[Kiro705]

Hello @muhammadshafie ,

For skippable ads, you will need to set the plugin advanced setting disableCustomPlaybackForIOS10Plus.

For more information about skippable ads on iOS, see the IMA HTML5 mobile skippable ads guide.

[muhammadshafie]

Hi @Kiro705 ,

I have set disableCustomPlaybackForIOS10Plus in advanced setting as below,

const player = (playerRef.current = videojs(videoElement, options, () => {
        player.log("player is ready");

        const imaOptions = {
          id: "video-js",
          adTagUrl:
            "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
          disableCustomPlaybackForIOS10Plus: true,
        };

        playerRef.current.ima(imaOptions);

        onReady && onReady(player);
      }));

but output is the preroll ad doesn't come out and I try to log the current configuration of ima and it shows that disableCustomPlaybackForIOS10Plus is already set to true,

I'm not so sure whether this is the correct way to set disableCustomPlaybackForIOS10Plus.

[Kiro705]

Hello @muhammadshafie ,

Yes, I believe that is correct for setting disableCustomPlaybackForIOS10Plus. You can see where the plugin sets this value for IMA here in sdk-impl.js.

If you are still seeing an issue, would it be possible to share steps to reproduce the issue. You can use the plugin samples as a starting point, and include any changes needed to reproduce the issue.

Let me know if you have any questions.

Thank you, Jackson IMA SDK team