브라이트코브 플레이어 샘플: 비디오 엔드에서 탐색

이 항목에서는 클릭하면 페이지를 새 URL로 이동하는 비디오 끝에 오버레이를 표시하는 방법에 대해 알아 봅니다.

플레이어 예제

짧은 동영상을 완성하면 브라이트코브 홈 페이지로 연결되는 링크와 함께 오버레이가 나타납니다. 브라이트코브가 제공하는 오버레이 플러그인이 사용되므로 JavaScript가 필요하지 않습니다. CSS는 오버레이 스타일을 지정하는 데 사용됩니다.

펜보기비디오 끝에서 탐색게시자 : Brightcove Learning Services ( 뿡 빵뀨 ) 의 위에 CodePen .

코드펜 사용

위의 CodePen을 효과적으로 사용하기위한 몇 가지 팁은 다음과 같습니다.

Result버튼을 클릭하여 플레이어의 실제 표시를 토글합니다.
HTML/CSS/JS버튼을 클릭하여 코드 유형 중 하나를 표시합니다.
이 문서의 뒷부분에서 응용 프로그램에 사용되는 논리, 흐름 및 스타일링에 대해서는Player/HTML 구성 , 응용 프로그램 흐름 및 응용 프로그램스타일 지정섹션에서 설명합니다. 이러한 섹션의 정보와 함께 따르는 가장 좋은 방법은 다음과 같습니다.
1. CodePen에서EDIT ON CODEPEN버튼을 클릭하고 하나의 브라우저/브라우저 탭에서 코드를 사용할 수 있습니다.
2. CodePen에서 표시할 코드를 조정합니다. CodePen 내에서 다른 코드 섹션의 너비를 변경할 수 있습니다.
3. 다른 브라우저/브라우저 탭에서플레이어/HTML 구성 , 응용 프로그램 흐름 및/또는 응용 프로그램 스타일 지정섹션을 봅니다. 이제 코드 설명을 따라 동시에 코드를 볼 수 있습니다.

사용된 API/플러그인 리소스

브라이트코브 플레이어 플러그인
오버레이 플러그인 표시

응용 프로그램 스타일 지정

CSS는 오버레이의 모양을 변경하는 데 사용됩니다. 이 샘플에서 사용 된 CSS는 다음과 같습니다.

/* override default styles for overlay */
.video-js .vjs-overlay {
    width: 100%;
    height: 20%;
    color: #000;
    background-color: rgba(255, 255, 255, 0.8);
    left: 0;
    top: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-top: 10%;
    padding-left: 0;
}

CSS를 변경하여 원하는 모양을 정의한 다음 CSS를 인터넷 액세스 가능한 위치에 저장해야합니다. 플러그인 구성에서이 CSS를 가리킬 것입니다.

플레이어/HTML 구성

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

플레이어 구성

이 경우 Studio를 사용하여 Display Overlay Plugin을 추가합니다.

플레이어 모듈을 열고 새 플레이어를 만들거나 플러그인을 추가하려는 플레이어를 찾습니다.
플레이어에 대한 링크를 클릭하여 플레이어의 속성을 엽니다.
왼쪽 탐색 메뉴에서플러그인을클릭합니다.
그런 다음플러그인 추가를클릭합니다.
에 대한플러그인 이름시작하다overlay .

자바 스크립트 URL의 경우 다음을 입력합니다.

https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js

CSS URL에 다음을 입력합니다.

https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css

옵션 (JSON)텍스트 상자에 구성 옵션을 입력합니다.

{
  "content": "<strong>Default overlay content</strong>",
  "overlays": [
    {
      "content": "<a href='http://www.brightcove.com'><span style='font-size:large'><strong>Brightcove Homepage</strong></span></a>",
      "start": "ended",
      "end": "play"
    }
  ]
}

저장을 클릭합니다.
플레이어를 게시하려면게시 및 포함 변경 내용 > 게시를클릭합니다.
열린 대화상자를 닫으려면닫기를클릭합니다.

기타 HTML

다른 HTML 요소는 페이지에 추가되지 않습니다.