Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

플레이어의 스타일 지정

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

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

CSS 변수를 사용하면 플레이어 배경, 스플래시 이미지, 글꼴 패밀리 등 다양한 cast-media-player 속성을 맞춤설정할 수 있습니다. 인라인 CSS 스타일, CSS 스타일시트 또는 JavaScript의 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/receiver.css

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 속성
--background-color		CSS background-color 속성
--background-image		CSS background-image 속성
--background-repeat	no-repeat	CSS background-repeat 속성
--background-size	리메이크	CSS background-size 속성

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 background 속성
--logo-color		CSS background-color 속성
--logo-image		CSS background-image 속성
--logo-repeat	no-repeat	CSS background-repeat 속성
--logo-size		CSS background-size 속성

CSS 템플릿

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

스플래시 속성

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

예를 들어 흰색 및 은색 그라데이션 배경을 dimgray로 재정의하고 애니메이션 waiting... 아이콘을 추가할 수 있습니다.

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

웹 수신기 디스플레이:

맞춤 스플래시

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

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

변수 및 기본값

이름	기본값	설명
--splash-background		CSS background 속성
--splash-color		CSS background-color 속성
--splash-image		CSS background-image 속성
--splash-repeat		CSS background-repeat 속성
--splash-size		CSS background-size 속성

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		슬라이드쇼의 일곱 번째 이미지
--slideshow-image-8		슬라이드쇼의 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 속성을 맞춤설정할 수 있습니다.

변수 및 기본값

이름	기본값	설명
--watermark-background		CSS background 속성
--watermark-color		CSS background-color 속성
--watermark-image		CSS background-image 속성
--watermark-position	오른쪽 하단	CSS background-position 속성
--watermark-repeat	no-repeat	CSS background-repeat 속성
--watermark-size		CSS background-size 속성

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%)	광고 시점 표시의 색상입니다.
--font-family	Open Sans	메타데이터 및 진행률 표시줄의 글꼴 모음입니다.
--spinner-image	기본 이미지	실행 중에 표시할 이미지입니다.
--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

MetadataType.MUSIC_TRACK

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist 또는 MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. 재생/일시정지

맞춤 UI 데이터 결합

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

맞춤 UI 데이터 결합을 사용하면 자체 맞춤 UI 요소를 사용하고 PlayerDataBinder 클래스를 사용하여 수신기에 cast-media-player 요소를 추가하는 대신 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();

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

<video class="castMediaElement"></video>

Shaka 플레이어 이전 시 HLS

스마트 디스플레이에 최적화

플레이어의 스타일 지정 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

재생 로고

플레이어 배경 속성

변수 및 기본값

CSS 템플릿

로고 속성

변수 및 기본값

CSS 템플릿

스플래시 속성

변수 및 기본값

CSS 템플릿

슬라이드쇼

변수 및 기본값

CSS 템플릿

워터마크 속성

변수 및 기본값

CSS 템플릿

재생, 광고, 기타 CSS 속성

변수 및 기본값

CSS 템플릿

오버스캔

기본 오디오 UI

MetadataType.MUSIC_TRACK

맞춤 UI 데이터 결합

플레이어의 스타일 지정