HLS 스트리밍

적응형 비트레이트 스트리밍으로 네트워크 환경에 맞는 화질을 자동 선택합니다.

스트림 URL 조회

typescript

const streamInfo = await cb.video.getStreamUrl('video-id')
console.log(streamInfo.stream_url)  // master.m3u8 URL

특정 화질만 받으려면:

typescript

const hd = await cb.video.getStreamUrl('video-id', '1080p')

HLS 플레이어 연동

HLS.js (웹)

typescript

import Hls from 'hls.js'

async function playVideo(videoId: string, videoElement: HTMLVideoElement) {
    const streamInfo = await cb.video.getStreamUrl(videoId)

    if (Hls.isSupported()) {
        const hls = new Hls()
        hls.loadSource(streamInfo.stream_url)
        hls.attachMedia(videoElement)
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
            videoElement.play()
        })
    } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
        // iOS Safari 네이티브 HLS 지원
        videoElement.src = streamInfo.stream_url
        videoElement.play()
    }
}

Video.js

typescript

import videojs from 'video.js'

const streamInfo = await cb.video.getStreamUrl('video-id')

const player = videojs('my-video', {
    sources: [{
        src: streamInfo.stream_url,
        type: 'application/x-mpegURL'
    }]
})

썸네일 조회

typescript

const thumbnails = await cb.video.getThumbnails('video-id')
// string[] — 추출된 썸네일 URL 목록

여러 시점의 sprite/scrubbing 이미지가 더 필요하면 트랜스코딩 시 추출된 자산을 cb.storage 로 직접 관리할 수도 있습니다.

시청 진행 보고 / 시청 기록

재생 진행률을 보고하면 시청 기록으로 누적되고 추천에 반영됩니다. (앱 멤버 JWT 필요)

typescript

// 재생 중 주기적으로 진행 보고 (position/duration: 초)
videoElement.addEventListener('timeupdate', () => {
    cb.video.reportWatchProgress('video-id', videoElement.currentTime, videoElement.duration)
})

// 시청 기록 조회 (커서 페이지네이션)
const { items, next_cursor } = await cb.video.getWatchHistory({ limit: 20 })

// 시청 기록 전체 삭제
await cb.video.clearWatchHistory()

비디오 업로드

Shorts