@fnet/ad-ui

Introduction

@fnet/ad-ui is a straightforward JavaScript library designed to facilitate the integration of video advertisements with interactive UI elements into web projects. It allows developers to easily create an overlay for displaying ads with additional features to enhance user interaction.

How It Works

The library enables embedding a video advertisement container on a webpage, which includes a video player and interactive buttons for user actions. The ad UI can be configured to appear either as a fixed or absolute positioned element within a specified HTML container or the whole browser window. A button allows users to close the ad after a specified time delay.

Key Features

• Video Ad Display: Embed video ads directly onto a webpage using provided video content.
• Interactive Elements: Includes a configurable button for closing ads, with a countdown timer.
• Customized Layout: Allows either a fixed or absolute positioning of the ad container to fit various webpage layouts.
• Play and Pause Controls: Built-in controls to handle play and pause states for better user interaction.

Conclusion

@fnet/ad-ui is a practical solution for integrating video advertisements with interactive user interfaces on web pages. It offers essential functionalities for ad presentation and user engagement in a simple, customizable library.

Developer Guide: @fnet/ad-ui

Overview

The @fnet/ad-ui library offers a set of tools designed to integrate interactive advertisements seamlessly into your web applications. This library allows developers to create video ads with optional interactive components such as a dismissible "Corner Button," and to manage video playback states effectively within custom containers.

Installation

To install the @fnet/ad-ui library, you can use either npm or yarn. Follow the instructions below to get started:

Using npm:

npm install @fnet/ad-ui

Using yarn:

yarn add @fnet/ad-ui

Usage

The library provides functions to create and manage an ad display on web pages. Here are practical examples to help you understand how to use it in a real-world scenario.

1. Initialize the Ad UI: Set up an ad environment by specifying the container and optional configurations.
2. Play and Control the Ad: Integrate video playback controls and add interactive buttons to allow user interaction, such as closing the ad.

Examples

Basic Ad Setup

To create a basic advertisement setup, use the AdUI function. Here is an example of how you might implement it:

import { AdUI } from '@fnet/ad-ui';

// Initialize the Ad UI within a specific container
const initializeAd = async () => {
  const adInstance = await AdUI({
    container: document.getElementById('ad-container'),
    name: 'mainAd'
  });

  // Show the ad with options to close
  adInstance.show({
    close: {
      enabled: true,
      onClick: () => {
        console.log('Ad Closed');
        adInstance.hide(true);
      }
    }
  });
};

initializeAd();

Advanced Ad Control

Using the AdUIPlay function, you can manage the pausing and resuming of ads, adding further interactivity to your user interface.

import { AdUI, AdUIPlay } from '@fnet/ad-ui';

const setupAdInteraction = async () => {
  const adInstance = await AdUI({
    container: document.getElementById('interactive-ad')
  });

  const playControl = await AdUIPlay({
    adPlayer: adInstance
  });

  // Example: Pausing the ad on user interaction
  document.getElementById('pause-button').onclick = () => {
    adInstance.videoPlayer.pause();
  };

  // Resume ad as required
  playControl;
};

setupAdInteraction();

Acknowledgement

The @fnet/ad-ui library utilizes standard web APIs and JavaScript features to deliver its functionality. Special thanks to contributors who have maintained and enhanced this library to ensure it integrates efficiently into modern web applications.

Input Schema

$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  container:
    type: object
    description: The DOM element to which the UI will attach.
  name:
    type: string
    description: The name of the cache record.
    default: master
required:
  - container