코드 샘플 다음 코드 샘플은 브라이트코브 플레이어의 사용자 지정 및 향상된 기능을 보여줍니다. 이중 별표 **로 표시된 샘플은 부분적으로 또는 전체적으로 Video Cloud 기능에 의존합니다. 알파벳순 샘플 목록도 찾을 수 있습니다. 여기 . 아웃 스트림 (광고 전용) 플레이어 이 샘플은 크기를 동적으로 조정하는 방법을 보여주는 도우미 JavaScript 함수를 제공합니다. <div>페이지 DOM의 요소에 Brightcove Player를 삽입하고 광고를로드하고 재생 한 다음 플레이어를 제거합니다. 플레이어를 광고와 함께보기로 스크롤 플레이어에서 수평 볼륨 조절 막대가 기본 수직 조절 막대를 대체합니다. 수평 볼륨 제어 (1.x 플레이어 전용) 플레이어에서 수평 볼륨 조절 막대가 기본 수직 조절 막대를 대체합니다. 수직 볼륨 기본 가로 레이아웃 대신 세로 슬라이더를 표시하도록 볼륨 컨트롤을 설정합니다. 재생 표시 줄의 광고 표시기 이 샘플은 동영상과 관련된 세 개의 광고 큐 포인트가 재생 표시 줄에 파란색 마커로 표시되는 플레이어를 보여줍니다. SSAI 플러그인으로 광고 이 예에서는 VMAP 파일에 정의 된 IMA 광고를 사용하여 비디오 스트림에 서버 측 광고를 제공합니다. 프리롤, 미드롤 및 포스트롤 광고가 있습니다. VMAP 파일은 광고 구성에서 정의됩니다. 광고 카운트 다운 타이머 오버레이 플러그인을 사용하여 광고에 대한 카운트 다운 타이머를 만듭니다. ModalDialog가있는 Age Gate 이 샘플은 ModalDialog를 사용하여 처음에 플레이어를 덮습니다. 사용자가 모달 창을 클릭하여 나이를 확인하면 컨트롤이 표시되고 비디오가 재생됩니다. 큐 포인트 디스플레이 CTA ** 플레이어는 큐 포인트를 기반으로 표시되는 두 가지 다른 CTA를 보여줍니다. 첫 번째 CTA는 5초 동안 3초에 표시됩니다. 두 번째 CTA는 3 초 동안 13 초에 표시됩니다. 동적 클릭 유도 문안 ** 이 플레이어로 세 가지 다른 클릭 유도 문안 표시 기술을 볼 수 있습니다. iframe 부모에서 비디오 재생 / 일시 중지 iframe 상위 페이지의 일부인 재생 또는 일시 중지 버튼을 클릭하여 iframe 플레이어에서 동영상 재생 / 일시 중지를 시작하는지 확인합니다. 에이지 게이트 이 샘플은 플레이어 컨트롤과 재생 버튼을 숨기는 오버레이를 표시합니다. 사용자가 오버레이를 클릭하여 나이를 확인하면 컨트롤이 표시되고 비디오가 재생됩니다. 음소거 해제 버튼으로 자동 재생 비디오는 비디오를 실행하는 브라우저 / 플랫폼에 따라 다르게 작동합니다. 비디오가 오디오와 함께 자동 재생되면 재생됩니다. 그렇지 않은 경우 비디오 재생이 시작되지만 음소거 해제 버튼이 나타납니다. 배경 비디오 임의 재생 목록 ** 플레이어에는 배경 비디오로 계속 재생되는 재생 목록에서 무작위로 선택된 비디오가 표시됩니다. 각 비디오의 시작 부분에 각 비디오의 제목과 설명이 표시됩니다. 백그라운드 비디오 재생 목록 ** 플레이어에는 배경 비디오로 계속 재생되는 4 개의 비디오가 있습니다. 또한 각 비디오의 시작 부분에는 각 비디오의 제목과 설명이 배경 비디오 위에 표시됩니다. 전체 창 배경 비디오 ** 이 항목에서는 재생 목록을 사용하여 배경 비디오를 제공하고 비디오가 브라우저 창을 완전히 채우도록 브라우저 창의 크기를 조정할 때 플레이어 크기를 자동으로 조정하는 방법을 알아 봅니다. 비디오 루프 생성 루핑 비디오를 사용할 수있는 몇 가지 상황이 있습니다. 이 예제는 비디오를 3 번 반복 한 다음 비디오 재생을 중지합니다. 진행률 스크러버 비활성화 비디오를 재생하십시오. 진행률 스크러버를 사용하여 비디오를 진행할 수 없습니다. 동영상이 시작될 때 페이지에서 다른 플레이어 중지 비디오 중 하나를 재생하십시오. 다음으로 다른 플레이어에서 비디오를 재생하고 재생 중이던 다른 플레이어에서 비디오 재생이 중지되는지 확인합니다. 플레이어를 동적으로로드 이 샘플에서는 플레이어 추가 버튼을 클릭하여 플레이어를 동적으로 빌드하고로드 한 다음 비디오를 재생합니다. RequireJS 및 Brightcove Player 이 주제에서는 Brightcove Player와 함께 JavaScript 파일 및 모듈 로더 인 RequireJS를 사용하는 방법을 배웁니다. 동적으로 소스 비디오 변경 ** 플레이어 아래의 버튼을 클릭하여 소스 비디오를 동적으로 변경합니다. 키오스크 앱 ** 플레이어는 무한 루프의 비디오 개체 배열에서 비디오를 재생합니다. 캡션 애니메이션 비디오 재생을 시작합니다. 마우스를 플레이어에서 멀리 움직이면 캡션이 애니메이션으로 제어 막대 위에 유지됩니다. 관련 링크 표시 ** 이 샘플의 경우 플레이어 아래에 표시된 비디오와 관련된 텍스트가 표시됩니다. Studio의 미디어> 비디오 정보 섹션을 사용하여 텍스트 및 관련 링크를 제공합니다. Controlbar에보기 표시 비디오가 재생되면 컨트롤 막대에 비디오보기가 표시됩니다. 정보가 다음과 같이 표시되기까지 약간의 지연이있을 수 있습니다. Analytics API데이터에 대해 비동기 적으로 쿼리됩니다. 마우스 오버시 썸네일 표시 이 예제에서는 ModalDialog를 사용하여 비디오의 다양한 지점에서 가져온 4 개의 썸네일 이미지를 표시합니다. 이를 통해 사용자는 비디오의 내용을 살짝 엿볼 수 있습니다. 임의 범퍼 표시 이 샘플에서는 무작위로 선택한 범퍼가 재생 목록의 각 동영상 전에 재생됩니다. 이 경우 범퍼는 광고이지만 광고 서버에서 가져온 것이 아니라 Video Cloud 라이브러리에 정의 된 비디오입니다. 하이퍼 링크 회사 로고 이 예는 플레이어의 컨트롤 막대에 회사 로고를 표시합니다. 로고를 선택하면 회사 웹 사이트로 리디렉션됩니다. 라이트 박스 캐 러셀 캐 러셀에서 동영상을 탐색합니다. 라이트박스 컨테이너에서 비디오를 재생할 축소판을 선택합니다. 라이트 박스가 표시된 상태에서 닫기 링크를 선택하여 라이트 박스 컨테이너를 숨 깁니다. Scroller가있는 라이트 박스 축소판 이미지 아래의 스크롤 막대를 끌어 비디오를 탐색합니다. 라이트박스 컨테이너에서 비디오를 재생할 비디오를 선택합니다. 라이트 박스가 표시된 상태에서 닫기 링크를 선택하여 라이트 박스 컨테이너를 숨 깁니다. 간단한 라이트 박스 이 예제는 Brightcove Player로 라이트 박스를 여는 대화 형 비디오 포스터 이미지를 표시합니다. 라이트 박스 컨테이너에서 비디오를 재생하려면 포스터 이미지를 선택합니다. 로고 오버레이 플러그인 다음 예에서는 플레이어의 왼쪽 하단에 로고가 표시됩니다. 동영상이 시작된 후 5 초가 지나면 로고가 천천히 사라집니다. 다중 세션 재생 비디오를 재생하고 재생 중 어느 시점에서 중지하십시오. 페이지를 새로 고치면 중단 한 부분부터 비디오가 다시 재생됩니다. 비디오 끝에서 탐색 매우 짧은 비디오가 완료되면 Brightcove 홈 페이지에 대한 링크와 함께 오버레이가 나타납니다. 브라이트코브가 제공하는 오버레이 플러그인이 사용되므로 JavaScript가 필요하지 않습니다. CSS는 오버레이 스타일을 지정하는 데 사용됩니다. 플레이어를보기로 스크롤 플레이어를보기 안팎으로 스크롤합니다. 플레이어가 완전히 보기로 스크롤되면 비디오가 재생되기 시작합니다. 플레이어를 화면 밖으로 스크롤하면 비디오 재생이 중지됩니다. 오버레이 전환 이 예제를 사용하면 대화 형 오버레이 표시를 전환 할 수 있습니다. 오버레이를 표시하고 숨기려면 오버레이 전환 버튼을 선택합니다. 사용자 지정 이벤트로 되감기 트리거 비디오 재생을 시작합니다. 그런 다음 비디오 되감기 버튼을 클릭하십시오. 비디오 재생이 5 초 뒤로 돌아가는 것을 볼 수 있습니다. 비디오 플러그인 다운로드 ** 플레이어에로드 된 비디오의 최고 품질 MP4 변환을 다운로드하려면 컨트롤 막대의 오른쪽에 다운로드 아이콘이 표시됩니다. 라이브 사용자 지정 오류 메시지 플레이어는 라이브 스트림에 연결할 수 없습니다. ModalDialog 객체가 만들어지고 사용자 정의 이미지가 배치되고 ModalDialoge가 표시됩니다. ModalDialog가 닫히면 기본 오류가 표시됩니다. 플레이어 스타일링 플레이 그라운드 이 주제에서는 아래에 표시된 Codepen을 스타일링 플레이 그라운드로 사용합니다. 변경하려면 codepen.io 사이트에서 확인하고 자유롭게 사용할 수 있도록 Codepen을 포크하십시오. 수평 반응 형 재생 목록 플레이어 아래에 가로 재생 목록이 표시됩니다. 브라우저의 크기를 조정하면 플레이어와 재생 목록이 모두 크기가 조정되는 것을 볼 수 있습니다. 재생 목록에서 가장 많이 본 동영상 ** 다음 예에서는 오른쪽에 재생 목록이있는 플레이어를 볼 수 있습니다. 재생 목록은 Brightcove Player 카탈로그를 사용하여 대부분의 재생 횟수를 기준으로 가장 인기있는 비디오를 검색하여 채워집니다. 재생 목록의 최신 동영상 ** 다음 플레이어에는 지식 팀의 계정에 추가 된 가장 최근 동영상 10 개가 포함 된 재생 목록이 표시됩니다. 재생 API 페이징 ** 이 예에서는 Brightcove Player를 사용하여 재생 목록의 처음 3 개 비디오와 함께 플레이어에 비디오를 표시합니다. 다음 비디오 버튼을 선택하여 재생 목록에서 다음 3 개의 비디오를 표시합니다. 인기 동영상 오버레이 ** 비디오를 일시 중지하거나 비디오가 종료되면 오버레이가 나타납니다. 에 대한 요청Analytics API지난 24 시간 동안 가장 많이 본 동영상 6 개가 API 응답과 함께 표시됩니다. 인기 비디오 재생 목록 ** 비디오 데이터가 검색되는 즉시 재생 목록이 자동으로 나타납니다. 에 대한 요청Analytics API지난 24 시간 동안 가장 많이 본 동영상 6 개가 API 응답과 함께 표시됩니다. 재생 목록의 관련 동영상 ** 이 예에서는 재생이 일시 중지되거나 종료 될 때 관련 동영상 미리보기 이미지의 대화 형 오버레이를 표시합니다. 태그를 통한 관련 동영상 (CMS API) ** 이 예에서는 재생이 일시 중지되거나 종료 될 때 관련 동영상 미리보기 이미지의 대화 형 오버레이를 표시합니다. 태그를 통한 관련 동영상 (재생 API) ** 이 예에서는 재생이 일시 중지되거나 종료 될 때 관련 동영상 미리보기 이미지의 대화 형 오버레이를 표시합니다. 탭 재생 목록 ** 재생 목록간에 전환하려면 탭 탐색에서 탭을 선택합니다. 재생 목록에서 비디오를 선택하여 비디오 재생을 시작하십시오. 모든 시간 동영상 조회수 아래 플레이어에는 모든 시간보기를 검색하는 데 사용되는 코드가 재생 목록에서 작동 함을 보여주는 재생 목록이 포함되어 있습니다. 단일 비디오 플레이어에서도 작동합니다. 재생 목록 전 비디오 재생 목록에없는 비디오로 시작하려면 재생 목록 지원 플레이어를 만듭니다. 재생 목록 끝에 비디오 재생 목록에 3 개의 동영상이 있습니다. 이 세 개의 동영상이 재생되면 재생목록에 없는 다른 동영상이 재생됩니다. 재생 목록에없는 비디오가 재생 된 후 비디오 재생이 중지됩니다. 재생 속도 조절기 Brightcove Player 컨트롤 막대에 재생 속도 버튼을 추가합니다. 배경 비디오 웹 페이지의 배경 비디오에 Brightcove Player를 사용하십시오. 찾는 시간 얻기 탐색 막대를 클릭하면 클릭 한 시간이 플레이어 아래에 표시됩니다. 진행률 표시 줄의 챕터 마커 진행률 표시 줄에 마커를 만들어 정의 된 장을 표시합니다. 동적 맞춤 최종 화면 사용자 지정 최종 화면에서 비디오 데이터와 관련된 링크를 추가합니다. 아직도보고 계십니까? 이 항목에서는 비디오를 계속 재생하면서 시청자가 시청을 중지 한시기를 감지하는 Brightcove Player를 만드는 방법에 대해 알아 봅니다. 마우스 오버시 플레이어 확대 이 항목에서는 JavaScript 및 CSS를 사용하여 마우스를 위에 놓을 때 작은 플레이어를 확대 한 다음 마우스를 놓을 때 작은 크기로 축소하는 방법을 배웁니다. 플로팅 플레이어 이 항목에서는 플레이어를 새 위치로 드래그 할 수 있도록 HTML / CSS / JavaScript를 구성하는 방법을 배웁니다. 그러면 사용자가 페이지를 위아래로 스크롤해도 플레이어 위치는 고정 된 상태로 유지됩니다. 제한된 플레이 이 항목에서는 사용자가 하루에 비디오를 볼 수있는 횟수를 제한하는 Brightcove Player를 사용하는 방법에 대해 알아 봅니다. 플레이 등록 이 항목에서는 사용자가 비디오를보기 위해 양식을 작성해야하는 Brightcove Player를 사용하는 방법에 대해 알아 봅니다. 미리보기 후 플레이 등록 이 항목에서는 짧은 미리보기가 표시된 후 사용자가 비디오를보기 위해 양식을 작성해야하는 Brightcove Player를 사용하는 방법을 알아 봅니다. 비디오를보기위한 암호 이 항목에서는 비디오를보기 위해 암호를 요청하는 방법에 대해 설명합니다. 컨트롤 바 전환 이 항목에서는 버튼을 사용하여 컨트롤 막대의 디스플레이를 전환하는 방법을 알아 봅니다. 뒤로 앞으로 버튼 이 항목에서는 지정된 시간 (초)만큼 비디오를 되감거나 앞으로 이동하는 버튼을 컨트롤 막대에 배치하는 방법을 알아 봅니다. 캡션 레이블에 국가 플래그 추가 이 항목에서는 국가 캡션 레이블 앞에 국가 플래그를 추가하는 방법을 알아 봅니다. 성적 증명서 다운로드 이 항목에서는 캡션 WebVTT 파일을 사용하고 다운로드 가능한 대본으로 변환하는 방법을 알아 봅니다. 오디오 다운로드 이 항목에서는 Brightcove Player에서 재생되는 오디오 자산의 최고 품질 MP4를 다운로드 할 수있는 링크를 만드는 방법을 알아 봅니다. 캡션 언어 자동 설정 이 항목에서는 브라우저 언어에 따라 기본 캡션 언어를 설정하는 방법에 대해 알아 봅니다. 오디오 트랙 언어 자동 설정 이 항목에서는 브라우저 언어에 따라 기본 오디오 트랙 언어를 설정하는 방법에 대해 알아 봅니다. 수직 비디오 이 항목에서는 Brightcove Player를 사용하여 수직 비디오를 표시하는 방법에 대해 알아 봅니다.
