@coolita-os/google-ima-core

v1.0.0

Published

a month ago

TypeScript implementation of google-ima-core

0High
0Medium
0Low

coolita-os-developer

xiao_yao_pai

ima3 google ads video sdk typescript

谷歌原版IMA3 SDK

https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/get-started?hl=zh-cn

新版本IMA3 TypeScript SDK

使用TypeScript实现重新实现Google IMA3 SDK库，提供视频广告管理和播放功能。

特性

🚀 TypeScript原生支持 - 完全使用TypeScript编写，提供完整的类型定义
📦 多格式输出 - 支持CommonJS、ES Modules和UMD格式
🔧 Google IMA3兼容 - 与Google IMA3 SDK API兼容
🎯 轻量级 - 无依赖，体积小巧
🛠️ 易于集成 - 提供简单的API和示例代码

安装

使用npm安装

npm install google-ima-core

使用yarn安装

yarn add google-ima-core

直接引入

<!-- UMD格式 -->
<script src="https://unpkg.com/google-ima-core/dist/ima-core.js"></script>

<!-- ES Module格式 -->
<script type="module">
  import { AdsLoader, AdsManager } from 'https://unpkg.com/google-ima-core/dist/ima-core.esm.js';
</script>

快速开始

基本用法

import { AdsLoader, AdsManager, AdDisplayContainer } from 'google-ima-core';

// 创建广告显示容器
const adDisplayContainer = new AdDisplayContainer();
adDisplayContainer.initialize();

// 创建广告加载器
const adsLoader = new AdsLoader(adDisplayContainer);

// 监听广告加载事件
adsLoader.addEventListener('loaded', (event) => {
  const adsManager = event.getAdsManager();
  
  // 监听广告事件
  adsManager.addEventListener('loaded', (adEvent) => {
    const ad = adEvent.getAd();
    console.log('广告加载完成:', ad.getAdId());
    
    if (ad.isLinear()) {
      console.log('这是一个线性广告');
    }
  });
  
  adsManager.addEventListener('start', () => {
    console.log('广告开始播放');
  });
  
  adsManager.addEventListener('complete', () => {
    console.log('广告播放完成');
  });
  
  // 初始化广告管理器
  adsManager.initialize();
});

// 创建广告请求
const adsRequest = {
  adTagUrl: 'https://your-ad-server.com/vast.xml'
};

// 请求广告
adsLoader.requestAds(adsRequest);

完整示例

查看 examples/simple/ 目录中的完整示例代码。

API文档

核心类

AdsLoader

广告加载器，负责加载和管理广告请求。

const adsLoader = new AdsLoader(adDisplayContainer);
adsLoader.requestAds(adsRequest);

AdsManager

广告管理器，控制广告的播放和事件处理。

const adsManager = event.getAdsManager();
adsManager.addEventListener('start', callback);
adsManager.start();

广告对象，包含广告的属性和方法。

const ad = adEvent.getAd();
ad.isLinear();      // 是否为线性广告
ad.isSkippable();   // 是否可跳过
ad.getDuration();   // 广告时长
ad.getWidth();      // 广告宽度
ad.getHeight();     // 广告高度

AdDisplayContainer

广告显示容器，管理广告的显示区域。

const adDisplayContainer = new AdDisplayContainer();
adDisplayContainer.initialize();

事件系统

SDK使用事件驱动架构，支持以下事件：

loaded - 广告加载完成
start - 广告开始播放
complete - 广告播放完成
pause - 广告暂停
resume - 广告恢复播放
skip - 广告被跳过
error - 发生错误

开发

构建项目

# 安装依赖
npm install

# 构建项目
npm run build

运行测试

# 运行测试
npm test

# 运行lint检查
npm run lint

开发服务器

# 启动开发服务器
npm run serve

项目结构

src/
├── core/           # 核心类实现
│   ├── Ad.ts               # 广告类
│   ├── AdsLoader.ts        # 广告加载器
│   ├── AdsManager.ts       # 广告管理器
│   └── AdDisplayContainer.ts # 广告显示容器
├── events/         # 事件系统
│   └── EventEmitter.ts     # 事件发射器
├── types/          # 类型定义
│   └── index.ts           # 类型定义文件
├── vast/           # VAST协议支持
│   ├── VastParser.ts      # VAST解析器
│   ├── VastRequestor.ts   # VAST请求器
│   └── VastResponseAdapter.ts # VAST响应适配器
└── index.ts        # 入口文件

许可证

Apache-2.0 License

贡献

欢迎提交Issue和Pull Request来改进这个项目。

版本历史

v1.0.0 - 初始版本，实现基本IMA3 SDK功能

支持

如果您在使用过程中遇到问题，请：

查看示例代码
检查浏览器控制台错误信息
提交Issue并提供复现步骤