웹 및 HTML5 재생

먼저 전체 예제 사용#

Web 패키지에는 현재 Universal Player JavaScript 및 선언 파일, 검증된 Shaka, 실행 가능한 PHP 앱과 ASP.NET Core 예제, 통합 README가 포함됩니다. Production 페이지는 DRM-X CDN에서 Shaka와 Universal Player를 로드할 수 있습니다. 검토·개발·통제된 대체 경로용 최신 로컬 파일도 유지됩니다.

1. 서버 측에서 Site ID, Site Key 및 Access Key를 설정하세요.
2. 신뢰할 수있는 게시 된 보호 파일 Content ID 및 정책 이름을 설정합니다.
3. 귀하의 비즈니스 논리와 샘플 로그인 및 제목 결정을 대체합니다.

클라이언트의 최소 역할#

<drmx-universal-player
  content-id="your-published-content-id"
  session-endpoint="/api/drmx/playback-session">
</drmx-universal-player>

이 컴포넌트 전에 전체 키트의 검증된 Shaka 런타임과 현재 Universal Player 스크립트를 로드하세요. 시청자가 Play를 누르면 인증된 엔드포인트를 호출합니다. 엔드포인트는 시청자의 세션과 권한을 확인하고 신뢰할 수 있는 콘텐츠와 정책을 선택하며 Contract v1을 만들어 Cache-Control: no-store로 반환합니다.

자동 DRM 동작#

• Windows Microsoft Edge는 PlayReady를 우선합니다. 검증된 경로가 재생 전에 실패하면 Auto 모드가 제한된 Widevine 대체 경로를 사용할 수 있습니다.
• Chrome 과 지원 Android 브라우저 사용 Widevine.
• iPhone과 iPad의 Safari는 네이티브 HLS FairPlay를 사용합니다. 지원되는 macOS Safari에서는 가능하면 검증된 Shaka MSE FairPlay를 우선하고 네이티브 HLS로 대체할 수 있습니다.
• 호환되는 Huawei 브라우저는 검증된 WisePlay 경로와 보수적인 자동 화질 선택을 사용합니다.

프로덕션 배포 전 확인 사항#

• HTTPS 이상 모든 것을 시도하고 서버 비밀에서 Access Key을 유지합니다.
• Cache-Control: no-store로 재생 세션 응답을 반환합니다.
• persist가 localStorage의 URL, 토큰 또는 세션 응답을 표시하지 마십시오.
• 민감한 정보를 제거한 상세 로그는 명시적으로 선택한 경우에만 제한된 기간 동안 사용하세요. 라이선스 바이트나 승인 정보는 기록하지 마세요.
• 물리적인 Windows Edge, macOS Safari, iPhone / iPad Safari, Android 및 광고하는 모든 장치 클래스를 테스트하십시오.

선택적 휴대폰 전용 1080p 제한#

Web SDK 1.2.0-beta.4에는 선택적 휴대폰 제한이 추가되었습니다. 설정하지 않으면 기존 UHD 동작을 유지합니다. 첫 Play 전에 설정하세요:

<drmx-universal-player
  content-id="your-published-content-id"
  session-endpoint="/api/drmx/playback-session"
  mobile-max-height="1080">
</drmx-universal-player>

// Equivalent component option; retained for subsequent playlist items:
await component.play({mobileMaximumHeight: 1080});
// Remove the option before a new playback:
await component.play({mobileMaximumHeight: null});

// Low-level API, for a video element you own:
await DrmXUniversalPlayer.start({
  video, contentId: 'your-published-content-id',
  sessionEndpoint: '/api/drmx/playback-session',
  mobileMaximumHeight: 1080
});

감지된 휴대폰에만 적용됩니다. 태블릿·데스크톱·TV는 기존 상한을 유지합니다. 브라우저 힌트와 user-agent 대체 판별을 사용하며 화면 너비로 해상도를 정하지 않습니다. 호스트가 기기 종류를 알면 device-class="phone" 또는 deviceClass: "phone"을 사용하세요. 다른 값은 auto, tablet, desktop, tv입니다. 브라우저 분류는 참고 정보입니다.

SDK는 승인 전에 더 낮은 platformCapabilities.maximumHeight을 전송합니다. 엔드포인트는 이 값을 전달하거나 더 낮춰야 합니다. 반환 상한은 요청을 초과할 수 없습니다. Auto와 수동 선택은 회전·전체화면·재시도·목록 변경 후에도 허용 범위 안에 있습니다. 서명된 DRM 정책과 디코더 제한으로 더 낮아질 수 있습니다. 값은 144~4320의 정수이며 미설정 또는 null이면 이 선택적 제한을 해제합니다.

Safari에는 필터링된 HLS 필요

세션에 연결된 nativeHlsQuality.autoUrl과 허용 화질 URL을 반환하는 백엔드를 사용하세요. 허용되는 비디오만 포함하되 오디오와 자막 그룹은 유지해야 합니다. 현재 전체 PHP 샘플이 구현합니다. 무제한 HLS 마스터를 둔 채 숫자 상한만 낮추면 대역폭이 절약되지 않습니다. SDK는 상한 인상이나 필수 설명자가 없는 제한된 FairPlay 응답을 거부합니다. 다른 백엔드도 활성화 전에 같은 계약을 구현해야 합니다.

네이티브 SDK 옵션

Apple Universal Player 1.0.0-beta.1은 mobileMaximumHeight: 1080을 받아 네이티브 휴대폰 종류에만 적용합니다. 엔드포인트는 미디어 로드 전에 검사할 필터링된 마스터를 반환해야 합니다. Android 1.0.0-beta.1은 WidevineCapabilities.playbackCapabilities에서 mobileMaximumHeight = 1080을 받습니다. 휴대폰은 clientPlatform = "android", 다른 종류는 명시적으로 android-tablet 또는 android-tv를 사용하세요. 새 다운로드에 대응하는 오프라인 능력 제한을 적용합니다. 기존 다운로드는 유지합니다.

통합 검증

1. 1080p 이하와 UHD가 있는 소스를 패키징하고 제한 미설정 상태에서 재생되는지 확인하세요.
2. 휴대폰에서 1080을 활성화하세요. 승인 상한, 필터링된 마스터, Auto/수동 메뉴, 디코딩된 크기를 확인합니다. 허용된 선택은 1080p를 넘을 수 없습니다.
3. 탐색, 화질 변경, 오디오, 자막, 광고, 다음 재생목록 항목을 테스트하세요. 재생을 중지하고 세션 해제를 확인합니다.
4. 데스크톱과 태블릿에도 같은 옵션을 지정하세요. 휴대폰 전용 제한이 이들의 상한을 낮춰서는 안 됩니다. 기존 정책과 기기 제한은 계속 적용됩니다.

해상도 상한은 비트레이트를 정하거나 고정 절약량을 보장하지 않습니다. 변경된 브라우저 요청에도 적용할 규칙은 신뢰할 수 있는 백엔드와 대응 DRM 정책에서 시행하세요. 클라이언트 기기 힌트를 증명으로 취급하지 마세요. 허용 화질이 없으면 실패해야 하며 자동으로 UHD로 돌아가면 안 됩니다.

iPhone Safari의 일관된 전체화면 컨트롤#

Web SDK 1.2.0-beta.4는 PHP 광고 페이지를 포함해 전체화면에서도 Web Player 컨트롤을 유지합니다. iPhone에서는 지원 시 요소 전체화면을 사용하고, 그렇지 않으면 페이지 안에서 확장합니다. 브라우저 막대가 남을 수 있습니다. iPhone의 비디오 전용 플레이어로 전환하지 않습니다. 모든 플랫폼에서 같은 설정 메뉴로 화질·오디오 언어·자막을 선택하세요.

오디오와 자막 선택은 현재 트랙 상태를 표시하고 네이티브 HLS가 변경을 적용한 뒤 갱신됩니다. CC를 껐다 켜도 마지막 자막 언어를 유지합니다. 광고 구간에는 별도 컨트롤을 사용하며 콘텐츠가 재개되면 일반 컨트롤이 돌아옵니다.

화질·언어·광고 테스트#

1. 실제 탭이나 클릭으로 재생을 시작하세요. 브라우저의 자동재생과 소리 규칙은 유지됩니다.
2. 설정을 열어 현재 화질·오디오·자막을 확인하세요. Auto는 허용된 화질 단계를 사용하며 수동 선택으로 승인 상한을 높일 수 없습니다.
3. 오디오와 자막 언어를 선택한 뒤 CC를 껐다 켜세요. 표시가 활성 트랙과 일치하고 자막 언어 설정이 보존되는지 확인합니다.
4. iPhone Safari와 Edge에서 전체화면으로 전환하세요. Web Player는 공통 컨트롤을 유지합니다. iPhone은 브라우저 막대를 남긴 채 페이지 안에서 확장할 수 있습니다.
5. 광고를 사용하면 화질 변경과 함께 콘텐츠 전·중·후 광고 구간을 테스트하세요. PHP 광고 페이지를 시험 도구로 사용할 수 있습니다. 내장 데모 광고와 Google IMA는 별도 모드입니다. 지원 브라우저마다 선택한 광고 서비스가 로드되는지 확인하세요.

대역폭 옵션은 선택적 휴대폰 전용 1080p 제한을 참고하세요. 미설정이면 기존 UHD 동작을 유지합니다. 해상도 제한은 고정 비트레이트나 일정 비율의 절약을 보장하지 않습니다.