js如何在视频里加广告

在视频中加入广告的方式包括：使用HTML5的视频标签、通过广告插件、使用广告网络SDK、编写自定义JavaScript代码。这些方法都有各自的优点和适用场景，具体使用哪一种方法取决于你的项目需求。下面将详细介绍如何使用这些方法在视频中加入广告。

一、使用HTML5的视频标签

HTML5提供了一个强大的 <video> 标签，可以用来嵌入视频元素。我们可以通过JavaScript控制这个标签，在视频的特定时间点插入广告。

1.1 基本的HTML5视频标签

首先，我们需要一个基本的HTML5视频标签:

<video id="myVideo" width="640" height="360" controls>
  <source src="your-video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

1.2 JavaScript控制视频播放

然后，我们可以使用JavaScript来控制视频的播放和插入广告。以下是一个简单的例子，展示如何在视频播放到特定时间点时暂停视频并显示广告：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var video = document.getElementById('myVideo');
    video.addEventListener('timeupdate', function() {
      if (video.currentTime >= 10 && video.currentTime < 10.5) {
        video.pause();
        showAd();
      }
    });
    function showAd() {
      var adDiv = document.createElement('div');
      adDiv.innerHTML = 'This is an ad';
      adDiv.style.position = 'absolute';
      adDiv.style.top = '0';
      adDiv.style.left = '0';
      adDiv.style.width = '100%';
      adDiv.style.height = '100%';
      adDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
      adDiv.style.color = 'white';
      adDiv.style.display = 'flex';
      adDiv.style.justifyContent = 'center';
      adDiv.style.alignItems = 'center';
      document.body.appendChild(adDiv);
      setTimeout(function() {
        document.body.removeChild(adDiv);
        video.play();
      }, 5000);
    }
  });
</script>

在这个例子中，当视频播放到第10秒时，视频会暂停，显示一个广告，5秒后广告消失，视频继续播放。

二、使用广告插件

广告插件是另一种常见的方法，特别是对于需要更复杂广告管理的情况。广告插件通常会提供更多的功能，如广告统计、跳过广告按钮等。

2.1 Video.js广告插件

Video.js 是一个流行的开源HTML5视频播放器，它有许多插件可供使用，包括广告插件 videojs-contrib-ads。以下是一个使用 Video.js 和 videojs-contrib-ads 插件的示例：

首先，安装 Video.js 和广告插件：

npm install video.js videojs-contrib-ads

然后，创建一个HTML页面：

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-ads@6.6.5/dist/videojs-contrib-ads.min.js"></script>
</head>
<body>
  <video id="myVideo" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
    <source src="your-video-file.mp4" type="video/mp4">
  </video>
  <script>
    var player = videojs('myVideo');
    player.ads();
    player.on('contentupdate', function() {
      player.trigger('adsready');
    });
    player.on('adsready', function() {
      player.playAd({
        adTagUrl: 'your-ad-tag-url'
      });
    });
  </script>
</body>
</html>

在这个示例中，我们使用 videojs-contrib-ads 插件来管理广告。当视频加载完成时，广告插件会准备好广告，并在合适的时机播放广告。

三、使用广告网络SDK

如果你希望使用专业的广告网络来管理广告投放，可以考虑使用广告网络提供的SDK，如Google的IMA SDK。IMA SDK提供了强大的广告管理功能，适用于需要高级广告功能的情况。

3.1 集成Google IMA SDK

首先，添加IMA SDK的脚本：

<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

然后，创建一个HTML页面并集成IMA SDK：

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
  <script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
</head>
<body>
  <video id="myVideo" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
    <source src="your-video-file.mp4" type="video/mp4">
  </video>
  <script>
    var player = videojs('myVideo');
    var adDisplayContainer = new google.ima.AdDisplayContainer(document.getElementById('adContainer'), player.el());
    var adsLoader = new google.ima.AdsLoader(adDisplayContainer);
    var adsRequest = new google.ima.AdsRequest();
    adsRequest.adTagUrl = 'your-ad-tag-url';
    adsLoader.requestAds(adsRequest);
    player.on('contentpause', function() {
      adDisplayContainer.initialize();
      adsLoader.contentPauseRequested();
    });
    player.on('contentresume', function() {
      adsLoader.contentResumeRequested();
    });
  </script>
  <div id="adContainer" style="position: absolute; top: 0; left: 0; width: 640px; height: 360px;"></div>
</body>
</html>

在这个示例中，我们使用Google IMA SDK来管理广告。当视频播放到特定时间点时，广告会自动播放。

四、编写自定义JavaScript代码

对于一些特定需求，可能需要编写自定义JavaScript代码来实现广告插入。下面是一个更复杂的示例，展示如何在视频播放过程中插入多个广告：

<video id="myVideo" width="640" height="360" controls>
  <source src="your-video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var video = document.getElementById('myVideo');
    var adTimes = [10, 30, 60]; // 广告插入的时间点
    var currentAdIndex = 0;
    video.addEventListener('timeupdate', function() {
      if (currentAdIndex < adTimes.length && video.currentTime >= adTimes[currentAdIndex]) {
        video.pause();
        showAd();
      }
    });
    function showAd() {
      var adDiv = document.createElement('div');
      adDiv.innerHTML = 'This is an ad';
      adDiv.style.position = 'absolute';
      adDiv.style.top = '0';
      adDiv.style.left = '0';
      adDiv.style.width = '100%';
      adDiv.style.height = '100%';
      adDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
      adDiv.style.color = 'white';
      adDiv.style.display = 'flex';
      adDiv.style.justifyContent = 'center';
      adDiv.style.alignItems = 'center';
      document.body.appendChild(adDiv);
      setTimeout(function() {
        document.body.removeChild(adDiv);
        video.play();
        currentAdIndex++;
      }, 5000);
    }
  });
</script>

在这个示例中，我们在视频的多个时间点插入广告，并在每个广告播放完后继续播放视频。

通过这些方法，你可以在视频中插入广告，以提高视频的盈利能力。这些方法各有优缺点，具体选择哪一种方法取决于你的项目需求和技术栈。