가이드: 광고 파트너 통합

이 문서에서는 광고 시스템을 Brightcove Player와 통합하려는 경우 구현할 수있는 기능에 대해 설명합니다.

개요

예를 들어 광고 시스템이 Google IMA3를 준수하는 경우이 정보는 필요하지 않지만 IMA3 용 기존 플러그인을 사용하면됩니다. IMA3 플러그인 가이드로 광고하기 .

이 기능이 필요하다고 판단한 경우이 콘텐츠는 Brightcove Player와의 광고 통합에 필요한 광고 API 프레임 워크에 대해 설명합니다. Brightcove가 제작 한이 프레임 워크의 두 가지 구현, 즉 Google의 IMA3 및 FreeWheel 용 구현을 볼 수 있습니다 (다음 단락에 표시된 참조 문서).

다시 말하지만,이 문서는 비디오에 기존 광고 프레임 워크를 사용하려는 고객을위한 것이 아닙니다. 이러한 고객에게 더 적합한 문서는 다음과 같습니다.

광고 프레임 워크 기능

Brightcove는 맞춤형 광고 플러그인의 기반으로 광고 API 프레임 워크를 제공합니다. 프레임 워크는 Brightcove Player와 함께 작동하는 비디오 광고 라이브러리에 필요한 공통 기능을 제공하여 광고 통합을 위해 작성해야하는 코드를 줄입니다. 프레임 워크는 빌드 할 수있는 오픈 소스 프로젝트로 제공됩니다. 프로젝트 코드는 GitHub 저장소에서 사용할 수 있습니다. videojs-contrib-ads .

광고 프레임 워크를 통해 광고 파트너는 다음을 수행 할 수 있습니다.

  • 광고 경험을 완벽하게 제어 할 수 있습니다 (예 : 광고가 재생되는 동안 플레이어의 모양과 동작).
  • 사용자 지정 또는 독점 광고 서버와 함께 작동합니다.
  • 광고 요청시기 및 광고 소재 버퍼링 방식과 같은 낮은 수준의 광고 구현 세부 정보를 관리합니다.
  • 비디오 분석 제공 업체 및 Brightcove Player 에코 시스템과 쉽게 상호 운용됩니다.

기본 지식

광고 API 프레임 워크를 사용하고 구축하려면 Brightcove Player 플러그인 아키텍처에 대한 철저한 이해가 필요합니다. 다음 문서는이 지식을 제공합니다.

필요한 경우 Brightcove의 관점에서 비디오 광고에 대한 간략한 개요는 여기에서 찾을 수 있습니다.

프레임 워크 사용

다음 섹션에서는 프레임 워크 사용에 대한 세부 정보를 제공합니다.

프레임 워크 리소스 포함

플러그인을 사용하려면 먼저 플러그인에 대한 CSS 및 JavaScript를 포함해야합니다.

<link rel="stylesheet" href="//mypath/videojs.ads.css">
<script src="//mypath/videojs.ads.js"></script>

자바 스크립트가 포함되면 함수를 호출하여 광고 프레임 워크를 초기화 할 수 있습니다.

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
    var myPlayer = this;
    // Initialize the ad framework
    myPlayer.ads();
  });
</script>

구성 옵션

프레임 워크에 사용할 수있는 다양한 구성 옵션이 있습니다. 예를 들어, timeout선택권. 이 옵션을 설정하려면 다음 코드를 사용합니다.

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').one('loadedmetadata', function(){
    var myPlayer = this;
    // Initialize the ad framework
    myPlayer.ads({
      "timeout": 3000
    });
  });
</script>

이 표는 옵션 목록을 제공합니다.

선택권 유형 기본값 설명
timeout 번호 5000 재생 전에 광고 구현이 초기화 될 때까지 기다리는 최대 시간 (밀리 초)입니다.
prerollTimeout 번호 1000 광고 구현이 프리 롤을 시작하기를 기다리는 최대 시간 (밀리 초)
postrollTimeout 번호 100 광고 구현이 포스트 롤을 시작할 때까지 기다리는 최대 시간 (밀리 초)
debug 부울 거짓 debug가 true로 설정되면 광고 플러그인은 재생 중에 현재 상태에 대한 추가 정보를 출력합니다.

사내 행사 및 이벤트 소식을 비디오로 제공하십시오.

다음 이벤트는 두 가지 유형으로 그룹화됩니다. 그룹과 설명은 다음과 같습니다.

그만큼adstart과adend이벤트는 광고 통합 자의 메서드 호출에 대한 응답으로 프레임 워크에 의해 트리거됩니다. 이러한 이벤트는 광고 통합자가 직접 트리거해서는 안됩니다.

이벤트 설명
애드스타트 플레이어가 선형 광고 재생 모드로 들어갔습니다.
추가 플레이어가 선형 광고 재생 모드에서 돌아 왔습니다.

그만큼adskip과adtimeout이벤트는 광고 통합자가 트리거를 선택하여 플레이어가 프리 롤 또는 포스트 롤 기회를 건너 뛰어야 함을 나타낼 수있는 선택적 이벤트입니다.

이벤트 설명
adskip 플레이어가 선형 광고 기회를 건너 뛰고 콘텐츠 재생이 즉시 재개되어야합니다.
adtimeout 플러그인에서 관리하는 시간 초과가 만료되었으며 일반 비디오 콘텐츠가 재생되기 시작했습니다.

런타임 설정

플러그인이 초기화되면 동작을 수정하는 데 사용할 수있는 속성이 있습니다.

부동산 설명
contentSrc 이 속성은 플레이어를 "프리 롤 표시 준비"상태로 재설정 할 수 있도록 새 동영상이로드되는시기를 결정하는 데 사용됩니다. 광고 제공 업체는 일반적으로 광고와 상호 작용하지 않지만, 예를 들어 동영상 소스를 변경하여 변환 선택기를 구현하려는 플러그인 작성자는contentSrc변환 전환이 발생했을 때 프리 롤이 시작되지 않도록했습니다.

예

이 섹션에서는 전체 작업 샘플이 포함된 구현의 예를 제공합니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contrib ads ad plugin</title>
</head>

<body>

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="default"
    data-embed="default"
    controls=""
    data-video-id="6077029038001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"></video-js>

  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs.ads.js"></script>

  <script>
    const player = videojs.getPlayer("myPlayerID");
    let creative = '';

    player.ads();

    player.on('contentupdate', function () {

    // Console output
    console.log("### videojs EVENT: contentupdate");

    // can fetch ad inventory here...
    player.setTimeout(() => {
      creative = 'https://solutions.brightcove.com/bcls/ads/bc-ads/bcls-ad-1-8seconds.mp4';
    }, 100);
    player.trigger('adsready');

    // Console output
    console.log("### videojs EVENT: adsready");

    });

    player.on('loadedmetadata', function () {
    // Console output
    console.log("### videojs EVENT: loadedmetadata");
    });

    player.on('readyforpreroll', function () {

      // Console output
      console.log("### videojs EVENT: readyforpreroll");

      player.ads.startLinearAdMode();
      // play your linear ad content
      player.src(creative);
      player.one('durationchange', function () {
        player.play();
      });
      // when ad has finished restore player
      player.one('adended', function () {

        // Console output
        console.log("### videojs EVENT: adended");

        player.ads.endLinearAdMode();
      });
    });

    player.on('ended', function () {
      // Console output
      console.log("### videojs EVENT: ended");
    });
  </script>
</body>

</html>

자주하는 질문

광고 플러그인은 미디어 메타 데이터에 어떻게 액세스 할 수 있습니까? Video Cloud 고객의 경우 플러그인은 mediainfo Video Cloud에 설정된 메타 데이터로 채워집니다. Brightcove Player 고객은수동으로 mediainfo 객체비 비디오 클라우드 CMS를 사용하기 때문입니다.
광고 플러그인에 대한 옵션을 어떻게 지정할 수 있습니까? 플러그인 옵션은 Studio의플레이어> 플러그인부분. 옵션이 포함 된 플러그인이있는 플레이어는 iframe 또는 인 페이지 소스 코드를 사용하여 게시 할 수 있지만 플러그인 옵션에는 정적 정보 (예 : 설명)가 포함됩니다. 에 표시된 기술을 사용하여 동적 데이터를 플러그인에 전달할 수 있습니다. 플러그인에 데이터 전달문서.
광고 플러그인은 플래시 기반 광고를 어떻게 지원해야합니까? Brightcove는 광고 플러그인 구현의 일부로 Flash 기반 광고 플레이어를 패키징하고 플레이어가 선형 광고 모드에있는 동안 콘텐츠 위에 해당 플레이어를 오버레이 할 것을 권장합니다.
큐 포인트는 어떻게 미드 롤을 실행하나요? 큐 변경시 전화startLinearAdMode()미드 롤을 시작합니다. 큐 포인트 수신 및 설정에 대한 자세한 내용은큐 포인트 사용문서.