Video.js IMA 插件使用教程

最新推荐文章于 2025-04-21 18:49:39 发布

宣连璐Maura

最新推荐文章于 2025-04-21 18:49:39 发布

阅读量498

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00152/article/details/141243098

Video.js IMA 插件使用教程

videojs-imaIMA SDK Plugin for Video.js项目地址:https://gitcode.com/gh_mirrors/vi/videojs-ima

项目介绍

Video.js IMA 插件是一个用于将 Google IMA SDK 集成到 Video.js 播放器中的开源项目。通过这个插件，开发者可以快速地在视频内容中启用广告功能。该项目目前处于 beta 阶段，允许开发者尝试并提供反馈，以便在最终确定 API 和功能之前进行改进。

项目快速启动

安装依赖

首先，使用 npm 安装 videojs-ima 插件：

npm install videojs-ima

创建 HTML 文件

在你的项目中创建一个 HTML 文件，并添加以下内容：

<!DOCTYPE html>
<html>
<head>
  <link href="path/to/video-js.css" rel="stylesheet">
  <link href="path/to/videojs-ima.css" rel="stylesheet"/>
</head>
<body>
  <video id="content_video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
    <source src="PATH_TO_YOUR_CONTENT_VIDEO" type="YOUR_CONTENT_VIDEO_TYPE" />
  </video>
  <script src="/path/to/video.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
  <script src="/path/to/videojs-contrib-ads.js"></script>
  <script src="/path/to/videojs-ima.js"></script>
  <script src="player.js"></script>
</body>
</html>

配置播放器

在 player.js 文件中配置广告插件：

var player = videojs('content_video');
var options = {
  adTagUrl: 'YOUR_AD_TAG'
};
player.ima(options);

// 在移动设备上必须调用 requestAds 方法
player.ima.requestAds();