오버레이 플러그인을 사용하여 플레이어 오버레이 구성

이 항목에서는 플레이어 모듈을 사용하여 오버레이 플러그인을 플레이어에 추가하는 방법을 배웁니다.

Overlay플러그인을 사용하면 텍스트와 이미지를 모두 오버레이로 사용할 수 있습니다. overlay플러그인은 오버레이가 나타나는 시기와 지속 시간을 구성할 수도 있습니다. 플레이어에 간단한 이미지 오버레이를 추가하려면 플레이어 스타일 옵션을 사용합니다. 보다스타일링 플레이어정보를 위해.

오버레이는 플레이어 상단에 나타나는 간단한 메시지 또는 이미지일 수 있습니다. 플레이어의 우측 하단에 비디오의 2초 지점을 시작으로 비디오가 6초 지점을 지날 때까지 Brightcove 로고 이미지가 표시됩니다.

다음과 같은 기준으로 오버레이 표시를 제어할 수 있습니다.

  • 플레이어 이벤트 - 재생, 일시 중지 또는 사용자 지정 이벤트와 같은 플레이어 이벤트를 토대로 오버레이가 표시됩니다.
  • 시간 간격 - 비디오 재생 중 지정된 시간에 오버레이가 표시됩니다.

오버레이는overlay플러그인을 사용하여 구성됩니다. 플러그인을 구성할 때 JavaScript URL, CSS 파일, 플러그인 이름 및 플러그인 옵션이 제공되어야 합니다.

Overlay플러그인 옵션

플러그인 옵션은 오버레이가 나타나는 시기, 사라지는 시기, 표시되는 항목, 표시되는 위치를 구성할 때 사용됩니다. 다음과 같은 플러그인 옵션(JSON으로 포맷됨)이 지원됩니다.

  • start - 오버레이가 표시되는 시기를 정의합니다. 값은 문자열 또는 숫자가 될 수 있습니다. 값이 숫자일 경우, 비디오 재생 중 지정된 시간(초 단위)이 지나면 오버레이가 표시됩니다. 값이 문자열이면 Brightcove Player로 해석됩니다.  이벤트 이름, 좋아요play , pause또는ended . 모든 플레이어 이벤트 목록은 Player API에 있습니다 .
  • end - 오버레이를 숨기는 시기를 정의합니다. 값은 문자열 또는 숫자가 될 수 있습니다. 값이 숫자일 경우, 비디오 재생 중 지정된 시간(초 단위)이 지나면 오버레이가 사라집니다. 값이 문자열이면 Brightcove Player로 해석됩니다.  이벤트 이름, 좋아요play , pause또는ended . 모든 플레이어 이벤트 목록은 Player API에 있습니다 .
  • content - 오버레이로 표시되는 항목을 정의합니다. 값은 문자열 또는 DOM 객체가 될 수 있습니다. 문자열, HTML 요소(이미지) 또는 DOM DocumentFragment를 전달할 수 있습니다.
  • align - 오버레이가 표시되는 위치를 정의합니다. 다음의 값이 지원됩니다. top-left, top, top-right, right, bottom-right, bottom, bottom-left, left

다음 샘플 옵션은 비디오의 2초 지점을 시작으로 비디오가 6초 지점을 지날 때까지 Brightcove 로고 이미지를 표시합니다.


{
  "overlays": [
    {
      "start": 2,
      "end": 6,
      "content": "<a href='https://www.brightcove.com' target='_blank'>
      <img alt='Brightcove Logo' src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
      "align": "bottom-right"
    }
  ]
}

콘텐츠에는 적절한 HTML 태그와 해당 속성 (예: 위 예제의 이미지에 제공된alt텍스트) 을 포함할 수 있습니다.

플레이어 오버레이 구성

Players 모듈을 사용하여Overlay플러그인을 구현하려면 다음 단계를 따르십시오.

  1. 플레이어 모듈을 열고 플레이어를 찾습니다.
  2. 플레이어에 대한 링크를 클릭하여 플레이어 속성을 엽니다.
  3. 딸깍 하는 소리플러그인왼쪽 탐색에서.
  4. 플러그인추가 > 사용자 지정 플러그인을 클릭합니다.
  5. 플러그인 이름에를 입력합니다overlay .
  6. 자바스크립트 URL의경우 다음을 입력합니다. 
    //players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
  7. CSS URL의경우 다음을 입력합니다. 
    //players.brightcove.net/videojs-overlay/2/videojs-overlay.css
  8. 옵션 (JSON) 을 입력합니다 . 아래 예에서는 2초 마크부터 6초 마크까지 플레이어의 하단에 클릭이 가능한 이미지가 표시됩니다. 
    {
    "overlays": [
      {
        "start": 2,
        "end": 6,
        "content": "<a href='https://www.brightcove.com' target='_blank'><img src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
        "align": "bottom-right"
      }
    ]
  }
  9. 플레이어저장및게시를 클릭합니다. 게시된 플레이어에게 변경 사항이 표시되기까지 최대 5분이 소요될 수 있습니다.

한 플레이어에 대해 여러 개의 오버레이를 구성할 수 있습니다. 참조개발자 문서자세한 내용은.

CSS를 사용하여 플레이어 오버레이의 스타일을 지정하는 방법의 예는 Logo Overlay Plugin개발자 문서를 참조하십시오.