Video.js 广告插件构建工具教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00551/article/details/142804016

Video.js 广告插件构建工具教程

videojs-contrib-ads A Tool for Building Video.js Ad Plugins 项目地址: https://gitcode.com/gh_mirrors/vi/videojs-contrib-ads

1. 项目介绍

videojs-contrib-ads 是一个用于构建 Video.js 广告插件的工具库。它提供了广告插件所需的基本功能，减少了开发者在编写广告插件时需要编写的代码量。videojs-contrib-ads 不是一个独立的广告插件，而是一个库，其他广告插件可以使用它来完全支持 Video.js。

主要功能

广告超时处理：默认情况下，如果广告加载时间过长，内容会自动播放。
播放器状态恢复：广告播放后，播放器状态会自动恢复，即使广告在内容视频元素中播放。
内容自动暂停：在预加载广告时，内容会自动暂停，并显示加载指示器。
媒体事件处理：媒体事件会像没有广告一样触发。
广告服务器 URL 宏：提供了有用的宏，用于广告服务器 URL。
视频源更改检测：当视频源更改时，预加载检查会自动重新进行。

2. 项目快速启动

安装

首先，确保你已经安装了 Node.js 和 npm。然后，通过 npm 安装 videojs-contrib-ads：

npm install videojs-contrib-ads

使用

在你的项目中引入 videojs-contrib-ads，并初始化它：

import videojs from 'video.js';
import 'videojs-contrib-ads';

const player = videojs('my-video');

player.ads(); // 初始化广告插件

示例代码

以下是一个简单的示例，展示如何在 Video.js 中使用 videojs-contrib-ads：

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>
<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  data-setup='{}'>
    <source src="https://example.com/path/to/video.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.11.4/video.js"></script>
  <script src="path/to/videojs-contrib-ads.js"></script>
  <script>
    var player = videojs('my-video');
    player.ads();
  </script>
</body>
</html>