브라이트코브 플레이어 샘플: 아웃스트림 (광고 전용) 플레이어

개요

이 아웃 스트림 광고 플레이어 샘플은 다른 비 비디오 요소가있는 웹 페이지에서 Brightcove Player를 동적으로로드하는 방법을 보여줍니다. 동영상 광고는 플레이어가 재생하는 유일한 콘텐츠입니다. 플레이어는 일반적으로이 샘플에 표시된대로 페이지 레이아웃 내에서 확장되지만 페이지의 특수 영역이나 오버레이로 나타날 수도 있습니다. 광고 재생이 끝나면 플레이어가 사라집니다.

플레이어 예제

이 샘플은 크기를 동적으로 조정하는 방법을 보여주는 도우미 JavaScript 함수를 제공합니다. <div>페이지 DOM의 요소에 Brightcove Player를 삽입하고 광고를로드 및 재생 한 다음 플레이어를 제거합니다. 재생되는 광고는 광고 태그에서 구성됩니다. 플레이어는 기본적으로 자동 재생으로 설정되어 있으며 일부 브라우저에서 작동하는 유일한 방법입니다. 원하는 경우 이러한 설정을 변경할 수 있습니다.

이 샘플은있는 그대로 사용하거나 사용자 정의 페이지 디자인과 함께 작동하도록 복사 및 수정할 수 있습니다.

펜보기 18065 광고 전용 플러그인게시자 : Brightcove Learning Services ( bcls1969 ) 의 위에 CodePen .

소스 코드

보기 GitHub의 완벽한 솔루션 .

응용 프로그램 흐름

이 응용 프로그램의 기본 논리는 다음과 같습니다.

• 이 샘플은 숨겨진 텍스트 문서 스타일 웹 페이지를 보여줍니다. <div>기사 내에 배치 된 요소. 타이머가 꺼지면이 숨겨진 div가 확장되고 그 안에 플레이어가 나타납니다.

• 플레이어는 VAST 광고 태그 응답을 사용하여 광고를 재생합니다.
• 광고 재생이 끝나면 플레이어가 언로드되고 DOM에서 제거됩니다.

플레이어/HTML 구성

이 섹션에서는 플레이어 생성 시 필요한 특수 구성에 대해 자세히 설명합니다. 또한 페이지 내장 플레이어 구현 코드 이외에 페이지에 추가해야 하는 다른 HTML 요소에 대해서도 설명합니다.

플레이어 구성

이 샘플에 대해 만든 브라이트코브 플레이어에는 특별한 구성이 필요하지 않습니다.

기타 HTML

HTML 파일에 다음을 포함합니다.

1. ㅏ<div>요소id선택한 값에 할당 된 속성입니다. JavaScript 코드는이 안에 Brightcove Player를 생성합니다. <div>요소.

   <div id="adPlayerDiv"></div>

2. Brightcove Player와 관련된 JavaScript 파일입니다. 다음과 유사해야합니다.

   <script src="https://players.brightcove.net/your account id/default_default/index.min.js"></script>

3. IMA3 플러그인 용 JavaScript 및 CSS 파일. 이것은 Google의 IMA3 HTML5 SDK와의 광고 통합을위한 것입니다.

   <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet"/>
   <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>

4. 이름이 지정된 도우미 라이브러리 adonly.js . 이 파일은 Brightcove의 플레이어 오리진에서 호스팅되고 CDN을 통해 제공되므로 수정하지 않고 사용할 수 있습니다. 원하는 경우이 JavaScript 코드를 가이드로 사용하여 고유 한 로더 스크립트를 만들고 자체 서버에서 호스팅 할 수 있습니다. 이 파일은 플레이어 구성에도 포함될 수 있습니다.

   <script src="https://players.brightcove.net/3723496277001/files/adonly.js"></script>

   페이지에 직접 포함하도록 선택한 경우 축소 된 CDN 호스팅 버전도 사용할 수 있습니다.

   <script src="https://players.brightcove.net/3723496277001/files/adonly.min.js"></script>

공공 기능

그만큼 adonly.js라이브러리에는 노출되는 두 개의 공용 함수가 있습니다.

• expandAndInjectAdOnlyPlayer() : 확장<div>광고 전용 플레이어를 삽입합니다.
• injectAdOnlyPlayer() : 광고 전용 플레이어를 주어진<div> (애니메이션 없음).

옵션

그만큼expandAndInjectAdOnlyPlayer()함수는 다음 매개 변수를 사용합니다.

• muted
  • 선택 사항입니다 . 값: 참 , 거짓입니다 . 기본값: 참
• autoplay
  • 선택 사항입니다 . 값: 참 , 거짓입니다 . 기본값: 참
• adTag
  • 광고 태그
• div
  • 광고 플레이어를 삽입 할 div
• height
  • div를 확장 할 높이 (픽셀)
• animationDuration
  • div 높이의 확장을 애니메이션하는 데 걸리는 시간 (ms)

그만큼injectAdOnlyPlayer()함수는 높이와 애니메이션 기간을 제외하고 동일한 매개 변수를 사용합니다.

응용 프로그램 스타일 지정

이 샘플은 IMA3 플러그인에서 제공하는 CSS 스타일을 사용합니다.

플러그인 코드

이 샘플은 이미 플러그인으로 빌드 된 JavaScript 코드를 사용합니다. 이 문서의 해당 GitHub 저장소에서이 코드를 볼 수 있습니다. adonly.js .

로드 시간 최적화

이 샘플은 Brightcove Player를 사용하며 런타임 중에 IMA 플러그인을 포함합니다. 이 샘플을 그대로 사용할 수 있지만 계정의 플레이어 코드를 변경합니다.

로드 시간을 약간 최적화하려면 플레이어 구성에 IMA 플러그인을 포함해야합니다. 이렇게하려면 다음 문서를 참조하십시오.

• 브라이트코브 플레이어 플러그인
• 플레이어 플러그인 구성