Open
Description
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;