이 페이지는 Cloud Translation API를 통해 번역되었습니다.

플레이어의 스타일 지정

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

<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/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 속성을 맞춤설정할 수 있습니다.

변수 및 기본값

이름	기본값	설명
--배경	검정색	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 배경 속성
--logo-color		CSS 배경색 속성
--logo-image		CSS 배경 이미지 속성
--logo-repeat	반복 안함	CSS 배경 반복 속성
--logo-size		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 속성을 맞춤설정할 수 있습니다.

변수 및 기본값

이름	기본값	설명
--splash-background		CSS 배경 속성
--splash-color		CSS 배경색 속성
--splash-image		CSS 배경 이미지 속성
--splash-repeat		CSS 배경 반복 속성
--splash-size		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		슬라이드쇼의 일곱 번째 이미지입니다.
--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 속성을 맞춤설정할 수 있습니다.

변수 및 기본값

이름	기본값	설명
--watermark-background		CSS 배경 속성
--watermark-color		CSS 배경색 속성
--watermark-image		CSS 배경 이미지 속성
--watermark-position	오른쪽 하단	CSS 배경 위치 속성
--watermark-repeat	반복 안함	CSS 배경 반복 속성
--watermark-size		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%)	광고 시점 표시의 색상입니다.
--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 데이터 결합을 사용하면 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>

Shaka 플레이어 이전 시 HLS

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