플레이어의 스타일 지정

웹 수신기 SDK는 내장 플레이어 UI를 제공합니다. 이 UI를 맞춤 웹 수신자 앱에 구현하려면 HTML 파일 본문에 cast-media-player 요소를 추가해야 합니다.

<body>
  <cast-media-player></cast-media-player>
</body>

CSS 변수를 사용하면 플레이어 배경, 스플래시 이미지, 글꼴 모음 등 다양한 cast-media-player 속성을 맞춤설정할 수 있습니다. 이러한 변수는 인라인 CSS 스타일, CSS 스타일시트 또는 자바스크립트의 style.setProperty를 사용하여 추가할 수 있습니다.

다음 섹션에서는 미디어 플레이어 요소의 각 영역을 맞춤설정하는 방법을 알아봅니다. 다음 템플릿을 사용하면 쉽게 시작할 수 있습니다.

외부

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/receiver.css" media="screen" />
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
</body>
<footer>
  <script src="js/receiver.js"></script>
</footer>
</html>

js/receiver.js

const context = cast.framework.CastReceiverContext.getInstance();

...

// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

...

context.start();

css/받는 사람.cs

body {
  --playback-logo-image: url('http://some/image.png');
}
cast-media-player {
  --theme-hue: 100;
  --progress-color: rgb(0, 255, 0);
  --splash-image: url('http://some/image.png');
  --splash-size: cover;
}

인라인
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <style>
    body {
      --playback-logo-image: url('http://some/image.png');
    }
    cast-media-player {
      --theme-hue: 100;
      --progress-color: rgb(0, 255, 0);
      --splash-image: url('http://some/image.png');
    }
  </style>
  <script>
    const context = cast.framework.CastReceiverContext.getInstance();

    ...

    // Update style using javascript
    let playerElement = document.getElementsByTagName("cast-media-player")[0];
    playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

    ...

    context.start();
  </script>
</body>
</html>

미디어가 재생되는 동안 재생 로고가 수신기의 왼쪽 상단에 표시됩니다. 이 속성은 .logo 클래스와 별개입니다. body 선택기에서 --playback-logo-image를 맞춤설정할 수 있습니다.

body {
  --playback-logo-image: url('image.png'); /* set from the body selector */
}

플레이어 배경 속성

--background 변수는 시작 및 재생 중에 표시되는 전체 플레이어의 백그라운드 속성을 설정합니다. 예를 들어 전체 배경을 흰색과 은 선형 그라데이션으로 설정할 수 있습니다.

cast-media-player {
  --background-image: linear-gradient(white, silver);
}

웹 수신기 디스플레이:

맞춤 배경

다음 변수를 사용하여 .background 속성을 맞춤설정할 수 있습니다.

변수 및 기본값

이름 기본값 설명
--background 검정색 CSS 배경 속성
--background-color CSS 배경 색상 속성
--background-image CSS 배경 이미지 속성
--background-repeat 반복 안함 CSS 배경 반복 속성
--background-size 리메이크 CSS 배경 크기 속성

CSS 템플릿

cast-media-player {
  --background:
  --background-color:
  --background-image:
  --background-repeat:
  --background-size:
}

로고 속성

.logo 클래스는 .background 클래스 앞에 배치되며 전체 플레이어에 걸쳐 있습니다. 이 클래스는 수신자가 실행될 때 표시됩니다. 수신기가 .splash 변수를 제공하지 않으면 수신기가 유휴 상태일 때도 .logo 클래스가 표시됩니다.

다음 예에서는 --logo-image를 welcome.png라는 이퀄라이저 아이콘으로 설정합니다. 이미지는 기본적으로 수신기 중앙을 기준으로 합니다.

cast-media-player {
  --logo-image: url('welcome.png');
}

웹 수신기 디스플레이:

맞춤 로고

다음 변수를 사용하여 .logo 속성을 맞춤설정할 수 있습니다.

변수 및 기본값

이름 기본값 설명
--logo-background CSS 배경 속성
--로고-색상 CSS 배경 색상 속성
--logo-image CSS 배경 이미지 속성
--logo-repeat 반복 안함 CSS 배경 반복 속성
--로고 크기 CSS 배경 크기 속성

CSS 템플릿

cast-media-player {
  --logo-background:
  --logo-color:
  --logo-image:
  --logo-repeat:
  --logo-size:
}

스플래시 속성

.logo 클래스와 마찬가지로 .splash 클래스는 전체 플레이어에 걸쳐 있습니다. 이러한 속성을 설정하면 수신기가 유휴 상태일 때 .splash 변수가 .logo 변수보다 우선 적용됩니다. 즉, 시작 시 .logo 속성 집합을 사용하고 수신기가 유휴 상태일 때 별도의 배경이나 이미지를 표시할 수 있습니다.

예를 들어 dimgray으로 흰색과 은색 그라데이션 배경을 재정의하고 다음과 같이 애니메이션 대기 중... 아이콘을 추가할 수 있습니다.

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

웹 수신기 디스플레이:

맞춤 스플래시

이러한 속성을 설정하지 않으면 유휴 상태일 때 수신기가 기본적으로 .logo 설정 또는 앱 이름으로 설정됩니다.

다음 변수를 사용하여 .splash 속성을 맞춤설정할 수 있습니다.

변수 및 기본값

이름 기본값 설명
--스플래시 배경 CSS 배경 속성
--스플래시-색상 CSS 배경 색상 속성
--스플래시 이미지 CSS 배경 이미지 속성
--스플래시-반복 CSS 배경 반복 속성
--스플래시 크기 CSS 배경 크기 속성

CSS 템플릿

cast-media-player {
  --splash-background:
  --splash-color:
  --splash-image:
  --splash-repeat:
  --splash-size:
}

슬라이드쇼

유휴 상태(스플래시 이미지 대신)에서 최대 10개의 이미지가 순환되도록 하려면 다음 슬라이드쇼 매개변수를 사용합니다.

변수 및 기본값

이름 기본값 설명
--slideshow-interval-duration 10초 이미지 간 시간입니다.
--slideshow-animation-duration 2초 전환 기간
--slideshow-image-1 슬라이드쇼의 첫 번째 이미지
--slideshow-image-2 슬라이드쇼의 두 번째 이미지
--slideshow-image-3 슬라이드쇼의 세 번째 이미지
--slideshow-image-4 슬라이드쇼의 네 번째 이미지
--slideshow-image-5 슬라이드쇼의 다섯 번째 이미지
--slideshow-image-6 슬라이드쇼의 여섯 번째 이미지
--slideshow-image-7 슬라이드쇼의 7번째 이미지
--slideshow-image-8 슬라이드쇼의 여덟 번째 이미지
--slideshow-image-9 슬라이드쇼의 9번째 이미지
--slideshow-image-10 슬라이드쇼의 10번째 이미지

CSS 템플릿

cast-media-player {
  --slideshow-interval-duration:
  --slideshow-animation-duration:
  --slideshow-image-1:
  --slideshow-image-2:
  --slideshow-image-3:
  --slideshow-image-4:
  --slideshow-image-5:
  --slideshow-image-6:
  --slideshow-image-7:
  --slideshow-image-8:
  --slideshow-image-9:
  --slideshow-image-10:
}

워터마크 속성

미디어가 재생되는 동안 .watermark가 표시됩니다. 이는 일반적으로 수신기의 오른쪽 하단을 기본값으로 하는 작고 투명한 이미지입니다.

다음 변수를 사용하여 .watermark 속성을 맞춤설정할 수 있습니다.

변수 및 기본값

이름 기본값 설명
--워터마크 배경 CSS 배경 속성
--워터마크-색상 CSS 배경 색상 속성
--워터마크-이미지 CSS 배경 이미지 속성
--워터마크-위치 오른쪽 하단 CSS 배경 위치 속성
--워터마크-반복 반복 안함 CSS 배경 반복 속성
--워터마크 크기 CSS 배경 크기 속성

CSS 템플릿

cast-media-player {
  --watermark-background:
  --watermark-color:
  --watermark-image:
  --watermark-position:
  --watermark-repeat:
  --watermark-size:
}

재생, 광고 및 기타 CSS 속성

cast-media-player 선택기에서 광고, 글꼴, 플레이어 이미지, 기타 속성을 맞춤설정할 수도 있습니다.

변수 및 기본값

이름 기본값 설명
--ad-title 광고 광고의 제목입니다.
--skip-ad-title 광고 건너뛰기 광고 건너뛰기 텍스트 상자의 텍스트.
--break-color hsl(색조, 100%, 50%) 광고 시점 표시의 색상입니다.
--글꼴 Open Sans 메타데이터 및 진행률 표시줄의 글꼴 모음
--스피너-이미지 기본 이미지 실행하는 동안 표시할 이미지입니다.
--buffering-image 기본 이미지 버퍼링 중에 표시할 이미지입니다.
--pause-image 기본 이미지 일시중지 상태에서 표시할 이미지입니다.
--play-image 재생 중에 메타데이터에 표시할 이미지입니다.
--theme-hue 42 플레이어에 사용할 색조입니다.
--progress-color hsl(색조, 95%, 60%) 진행률 표시줄 색상

CSS 템플릿

cast-media-player {
  --ad-title:
  --skip-ad-title:
  --break-color:
  --font-family:
  --spinner-image:
  --buffering-image:
  --pause-image:
  --play-image:
  --theme-hue:
  --progress-color:
}

자세한 내용과 추가 그림은 스타일 미디어 수신기를 참고하세요.

오버스캔

TV 레이아웃의 발전과 시청자에게 항상 전체 화면 사진을 표시하고 싶다는 욕구로 인해 TV용 레이아웃에는 몇 가지 고유한 요구사항이 있습니다. TV 기기는 앱 레이아웃의 외부 가장자리를 자르고 전체 디스플레이가 채워지도록 할 수 있습니다. 이 동작을 일반적으로 오버스캔이라고 합니다. 레이아웃의 모든 면에 10%의 여백을 포함하여 오버스캔으로 인한 화면 요소 잘림을 방지합니다.

기본 오디오 UI

메타데이터 유형.MUSIC_TRACK

답변 --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist, MusicTrackMediaMetadata.composer

에피소드 MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. 재생/일시정지

맞춤 UI 데이터 결합

Cast 웹 수신기 SDK는 cast-media-player 대신 자체 맞춤 UI 요소 사용을 지원합니다.

맞춤 UI 데이터 결합을 사용하면 수신기에 cast-media-player 요소를 추가하는 대신 고유한 맞춤 UI 요소를 사용하고 PlayerDataBinder 클래스를 사용하여 플레이어 상태에 UI를 결합할 수 있습니다. 바인더는 앱이 데이터 결합을 지원하지 않는 경우 데이터 변경을 위한 이벤트 전송도 지원합니다.

const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();

const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

// Update ui according to player state
playerDataBinder.addEventListener(
    cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
    e => {
      switch (e.value) {
        case cast.framework.ui.State.LAUNCHING:
        case cast.framework.ui.State.IDLE:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.LOADING:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.BUFFERING:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.PAUSED:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.PLAYING:
          // Write your own event handling code
          break;
      }
    });
context.start();

웹 수신기에서 사용할 수 있도록 MediaElement을 하나 이상 HTML에 추가해야 합니다. 여러 MediaElement 객체를 사용할 수 있는 경우 웹 수신기에서 사용할 MediaElement에 태그를 지정해야 합니다. 이렇게 하려면 아래와 같이 동영상의 클래스 목록에 castMediaElement를 추가하면 됩니다. 그렇지 않으면 웹 수신기가 첫 번째 MediaElement를 선택합니다.

<video class="castMediaElement"></video>
이전
핵심 기능
다음
스마트 디스플레이에 최적화