브라이트코브 플레이어용 크롬캐스트 플러그인

이 항목에서는 브라이트코브 플레이어용 크롬캐스트 플러그인 (2.x) 을 사용하여 비디오를 크롬캐스트에 연결된 TV로 캐스팅하는 방법에 대해 알아봅니다.

서문

Google 크롬캐스트는 TV의 HDMI 포트에 연결하는 장치입니다. 스마트폰이나 컴퓨터를 리모컨으로 사용하면 Chromecast를 사용하여 동영상 콘텐츠에 액세스할 수 있습니다. Chromecast 플러그인을 사용하면 플레이어가 Brightcove Player를 사용하여 데스크톱 또는 Android Chrome 브라우저에서 Chromecast 장치로 비디오를 전송할 수 있습니다.

플러그인은 Widevine을 사용하는 DRM 암호화 스트림을 포함하여 HLS 또는 DASH를 사용하는 모든 Video Cloud 비디오 또는 외부 스트림을 지원합니다. 광고는 Video Cloud 서버측 광고 삽입 (SSAI를) 통해 지원됩니다. 클라이언트측 광고 및 재생목록은 지원되지 않습니다.

플러그인을 사용하려면 다음 단계를 따르십시오.

  1. Brightcove Player용 Chromecast 플러그인을 포함합니다(아래 구현 섹션 참조).
  2. Chromecast 기기가 동영상을 재생할 기기와 동일한 네트워크에 있는지 확인합니다.
  3. 비디오 재생을 시작합니다.
  4. 전송 버튼을 클릭하고 Chromecast 기기를 선택합니다.

크롬캐스트 앱 구성 요소

Chromecast의 소프트웨어는 다음과 같은 구성 요소로 구성되어 있습니다.

  • 발신자 앱 : 이것은 캐스트 세션을 시작하고 수신자와 통신 할 수있는 모든 애플리케이션입니다. 발신자 애플리케이션은 Chromecast 생태계의 “클라이언트 측”부분으로 생각할 수 있습니다.

    브라이트코브 플레이어용 크롬캐스트 플러그인은 브라이트코브 플레이어에서 발신자 앱을 활성화합니다. 이 주제에서 그것에 대해 배우게됩니다.

  • 수신기 앱 : 이것은 공용 인터넷에서 호스팅되고 Chromecast 장치에서 실행되는 사용자 지정 웹 응용 프로그램입니다. 발신자 앱과 수신자 장치 간의 통신을 처리합니다. CSS 및 자바 스크립트 자산이있는 단일 페이지 HTML 앱으로 생각할 수 있습니다.

    기본적으로 Chromecast 플러그인은 CDN에서 호스팅되는 Brightcove Cast Receiver 앱을 사용합니다. 수신기 앱은 전송 세션 중에 Chromecast에 로드되는 웹 애플리케이션입니다.

지원되는 Chromecast 기기

다음 장치가 지원됩니다.

  • Chromecast (3 세대)
  • Chromecast Ultra
  • Google TV용 Chromecast

작동 원리

현재 구현 (플러그인 / 리시버 버전 2.x)은 CAF (Cast Application Framework) API를 사용합니다.

Chromecast 수신기 플러그인이 추가되면 플레이어는 로컬 네트워크에 사용 가능한 Chromecast가있을 때 플레이어 UI에 전송 버튼을 표시합니다.

이 버튼을 클릭하거나 탭하면 플레이어에 로드된 현재 동영상으로 전송 세션이 시작됩니다. 작동 방식은 다음과 같습니다.

  1. 플러그인은 매개 변수 세트를 수신자에게 보냅니다.
  2. 수신기는 Brightcove의 CDN에서로드하여 보내는 플레이어를 미러링합니다.
  3. 로드되면 수신자 측 플레이어는 전송 세션이 시작될 때 전송 된 Playback API에서 동영상 ID를로드합니다.
  4. 그런 다음 리시버 측 플레이어는 보내는 플레이어의 재생 헤드 위치에서 재생을 시작합니다.

이 프로세스는 Playback API 요청이 없다는 점을 제외하고 비 비디오 클라우드 소스에 대해 동일합니다.

분석 도구

현재 분석 관점에서 캐스트 세션은 완전히 새로운 재생 세션으로 취급됩니다.

UX 관점에서 뷰어는 발신자 장치에서 스트림이 일시 중지되고 수신자에서 다시 시작되는 것을 볼 수 있습니다.

데이터 관점에서 볼 때 메트릭은 기본적으로 익명으로 처리되기 때문에 별도의 장치에서 새 스트림을 시작하는 새 뷰어로 기록됩니다. 이것이 실제로 일어나는 일입니다.

요구 사항

Chromecast 플러그인에는 다음 요구 사항이 필요합니다.

  • Brightcove Player v6.45.0 이상
  • Brightcove Chromecast 플러그인 v2.0.0 이상

구현

브라이트코브 플레이어용 크롬캐스트 플러그인은 다른 모든 브라이트코브 플레이어 플러그인처럼 사용됩니다. 즉, 플러그인을 플레이어로 로드해야 합니다.

스튜디오 사용

다음 단계에서는 Studio를 사용하여 플러그인을로드하는 방법에 대해 자세히 설명합니다.

  1. 플레이어 모듈을 열고 새 플레이어를 만들거나 플러그인을 추가하려는 플레이어를 찾습니다.
  2. 플레이어의 속성을 열 플레이어 링크를 선택합니다.
  3. 왼쪽 탐색 메뉴에서플러그인 .
  4. 그런 다음플러그인 추가버튼을 선택한 다음브라이트코브 플러그인을선택합니다.

    플러그인 추가 버튼
    플러그인 추가 버튼
  5. 확장 Brightcove 플러그인드롭 다운 및 선택 Chromecast 수신기 .

    크로마스트 리시버
    크롬캐스트 수신기
  6. 선택 사항 : 옵션 (JSON)텍스트 상자에 구성 옵션을 입력합니다. 1752604059001계정의 기본 플레이어의 예가 표시됩니다. 물론 플레이어에 대한 정보를 입력해야합니다.

     {
        "playerUrl" : "https://players.brightcove.net/1507807800001/default_default/index.min.js"
     }

    옵션에 대한 자세한 내용은 아래를 참조하십시오.

  7. 저장버튼을 선택합니다. 이제 Chromecast 수신기플레이어의 플러그인 목록에 플러그인이 추가되었습니다.

    플러그인이 추가됨
    플러그인이 추가됨
  8. 플레이어를 게시하려면게시 및 포함 변경 내용 > 게시를선택합니다.
  9. 열린 대화상자를 닫으려면닫기를선택합니다.
  10. MEDA로돌아가서 방금 Chromecast용으로 업데이트한 플레이어를 사용하여 동영상이나 재생목록을 게시합니다.

    플러그인이 로드되고 동영상이 재생되기 시작했으며 사용 가능한 Chromecast 장치가 범위 내에 있으면 플레이어의 다음 스크린샷과 같이 캐스트 버튼이 플레이어에 나타납니다.

    캐스트 버튼

수동 구성

JSON 편집기를 사용하여 플러그인을 추가하려면 다음 단계를 따르십시오.

  1. 플레이어 모듈을 열고 새 플레이어를 만들거나 플러그인을 추가하려는 플레이어를 찾습니다.
  2. 플레이어의 속성을 열 플레이어 링크를 선택합니다.
  3. 왼쪽 탐색 메뉴에서JSON 편집기를선택하십시오.

    플러그인 추가 버튼
    JSON 편집기
  4. 개체 추가plugins정렬

    코드는 다음과 비슷해야합니다.

     { 
      "compatibility": true,
      "video_cloud": {
        "policy_key": "your policy key" },
      "player": {
        "template": {
          "name": "single-video-template", 
          "version": "6.45.4"
        }
      },
      "studio_configuration": {
        "player": {
          "responsive": true,
          "height": 540,
          "width": 960,
          "units": "px"
        }
      },
      "plugins": [ {
        "name": "chromecastReceiver", 
        "options": {},
        "stylesheets": ["https://players.brightcove.net/videojs-chromecast-receiver/2/videojs-chromecast-receiver.css"], 
        "scripts": ["https://players.brightcove.net/videojs-chromecast-receiver/2/videojs-chromecast-receiver.js"] }
      ]
     }

    옵션에 대한 자세한 내용은 아래를 참조하십시오.

구성 옵션

Brightcove Player 용 Chromecast 플러그인을 설정하기 위해 선택한 방법에 관계없이 플러그인 동작을 수정하는 옵션을 전달할 수 있습니다. 이러한 옵션을 설정할 필요는 없지만 고급 사용자를위한 추가 사용자 정의가 가능합니다.

코드에서 옵션을 전달하려면 다음과 비슷한 것을 사용합니다.

 videojs.getPlayer('myPlayerID').ready(function() { 
    var myPlayer = this;
    options = {};
    options.playerUrl = '//players.brightcove.net/1752604059001/default_default/index.min.js'; myPlayer.chromecastReceiver(options);
 });

조언

웹 플레이어에 많은 수의 플러그인 또는 맞춤 스크립트가 포함되어있는 경우 Chromecast 재생을위한 경량 플레이어를 만드는 것을 고려해야합니다.

웹 플레이어와 재생 엔진은 리소스 집약적이므로 추가 무거운 스크립트가있는 리소스 제한 환경 (예 : Chromecast)에서 실행하면 사용자 경험에 부정적인 영향을 미칠 수 있습니다!

옵션

Chromecast 플러그인은 다음 옵션을 지원합니다.

  • options.appName

    유형 : string
    기본값 : '브라이트코브 크롬캐스트 CAF v2.0'

    고유한 사용자 지정 이름으로 기본 애플리케이션 이름을 재정의합니다.

  • options.playerUrl

    유형 : string
    기본값 :”

    기본적으로 발신자 측 플레이어는 수신자에 미러링됩니다. 이 옵션을 사용하여 사용자 정의 수신자 측 Brightcove Player URL을 제공 할 수 있습니다.

    이것은 수신기에 로드되는 브라이트코브 플레이어이므로 Chromecast 외부에서 플레이어를 사용자 정의, 스타일 지정 및 디버깅할 수 있습니다.

    playerUrl 옵션을 사용하는 경우 발신자와 수신자로 사용되는 플레이어가 다릅니다. 도메인 제한 플레이어를 사용하는 경우 화이트리스트를 사용해야 합니다. 화이트리스트는 수신자 로 사용되는 플레이어(이 옵션에 지정된 플레이어)가 아니라 송신 플레이어에 대해 수행되어야 합니다.

  • options.splashScreen

    유형 : string
    기본값 :”

    비디오 이전과 비디오가 전환 될 때 표시되어야하는 시작 화면입니다.

  • options.ssaiDynamicMacros

    유형 : Array
    기본값 : 미정

    이 옵션을 사용하면 사용자가 웹 플레이어에서 Chromecast 수신기로 동적 광고 매크로 집합을 전달할 수 있습니다.

    이 배열의 각 요소는 글로벌 변수의 이름 (속성window ) 과 일치하는 문자열이어야 합니다. 그러면 이 값이 Chromecast의 플레이어에 전달되고 VOD SSAI URL에서 광고 매크로를 확인할 때 사용됩니다.

    예를 들어 SSAI 구현이 전 세계적으로 사용 가능해야 한다고 가정해exampleMacro보겠습니다. Chromecast 플러그인 옵션에 다음을 추가합니다.

    "ssaiDynamicMacros": ["exampleMacro"]

    발신자 플레이어가 캐스팅하면 수신자에게window.exampleMacro across의 값을 전달하고 내장 SSAI 광고 매크로 해상도에 의해 자동으로 수신됩니다.

흔하지 않은 옵션

다음 옵션은 일반적으로 사용되지 않습니다.

  • options.authRequest

    유형 : stringobject또는function
    기본값 : {}

    동영상을 요청하기 전에 Chromecast에서 콘텐츠 재생 승인 요청을 수행해야하는 경우이 옵션을 사용할 수 있습니다.

    이를 사용하여 쿠키를 가져올 수도 있지만 서버는 다음을 허용하도록 설정해야합니다. players.brightcove.net자신의 콘텐츠를 호스팅하는 경우 교차 도메인 쿠키를 설정할 수있는 기능.

    문자열 사용

    언제authRequest문자열이면 해당 URL에 대해 빈 GET 요청이 수행됩니다.

    개체 사용

    언제authRequest객체이며 특정 요청 페이로드 속성을 지정하는 데 사용할 수 있습니다.

    부동산 유형 필수 기본값 설명
    url string '' 요청할 URL
    method string 아니요 GET 사용할 HTTP 메서드
    body string 아니요 '' 요청 본문
    headers object 아니요 {} 키가 헤더 이름이고 속성이 헤더 값인 HTTP 헤더를 설명하는 객체
    withCredentials boolean 아니요 false 키가 헤더 이름이고 속성이 헤더 값인 HTTP 헤더를 설명하는 객체
    timeout number 아니요 15000 인증 요청을 포기하기 전에 대기해야하는 시간 (밀리 초)

    기능 사용

    언제authRequest는 함수이므로 해당 용도에 따라 문자열 또는 객체를 반환해야합니다.

제한 사항 및 알려진 문제

  • HEVC / 4K 콘텐츠는 Chromecast Ultra 기기 및 Google TV 기기가있는 최신 Chromecast에서만 지원됩니다.
  • 현재 클라이언트 측 광고는 지원되지 않지만 SSAI는 지원됩니다!
  • 재생 속도 조정은 현재 이 플러그인에서 지원되지 않습니다.
  • 캡션 트랙이 선택되고 수신자에 표시된 후 보낸 사람을 찾는 데 문제가 있습니다.
  • Google TV 기기가있는 Chromecast에서 캡션 사용시 UI 문제와 재생 문제가 발생했습니다.
  • Google은 Chromecast에서 비보안 출처 (HTTP) 를 지원하지 않으므로 플러그인이 안전하지 않은 컨텍스트에서는 작동하지 않습니다. 이 경우 플레이어의 크롬캐스트 버튼이 나타나지 않습니다.
  • Chromecast 플러그인은 브라우저의 캐스팅 지원에 의존하기 때문에 다음 OS/브라우저 조합에서만 지원됩니다.
    • 데스크탑/크롬
    • 안드로이드/크롬
    Chromecast 플러그인은 데스크톱/iOS의 Safari 또는 iOS의 Chrome에서 지원되지 않습니다. 이러한 경우 Chromecast 아이콘이 표시되지 않습니다.
  • Google은 한 페이지에서 Chromecast 발신자 버튼의 여러 인스턴스를 지원하지 않습니다. 가능한 해결 방법은 표준 (iframe) 플레이어 구현을 사용하여 브라이트코브 플레이어를 내장하거나 필요에 따라 플레이어를 동적으로 인스턴스화하고 파괴하는 것입니다. 문서를 참조하십시오. 브라이트코브 플레이어 샘플: 후자의 가능성에 대한 정보를 보려면 플레이어를 동적으로 로드하십시오 .
  • 이 플러그인은 Google 네스트 허브에 캐스팅되지 않습니다. 플러그인은 실제 크롬캐스트 장치 (예: 크롬캐스트 및 크롬캐스트 울트라) 만 지원합니다.
  • Android WebView는 Chromecast를 사용한 전송을 지원하지 않습니다. 자세한 내용은 Android의 Issue Tracker를 참조하세요.

v1.x에서 v2.x로 변경

v2 Chromecast API 대신 CAF API를 사용하는 것과 같은 내부 변경 외에도 다음 인터페이스가 변경되었습니다.

  • options.cssoptions.js더 이상 지원되지 않습니다.
  • customData.analyticsParams추가되었습니다
  • customData.catalogData이름이 바뀌었다customData.catalogParams다른 용도와의 일관성 향상
  • customData.policyKey대체되었다customData.catalogParams.policyKey
  • customData.keySystems추가되었습니다

변경 로그

Chromecast 수신기 및 플러그인 출시를 참조하세요.

이전 릴리스 정보는 여기에서 변경 로그를 참조하세요.