Amazon IVS 플레이어 SDK: Video.js 통합 - Amazon Interactive Video Service
시작하기이벤트Errors플러그인콘텐츠 보안 정책함수currentTimedispose지속 시간getIVSEventsgetIVSPlayer로드재생playbackRate검색 가능

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

Amazon IVS 플레이어 SDK: Video.js 통합

이 문서에서는 Amazon Interactive Video Service(IVS) Video.js 플레이어에서 사용할 수 있는 가장 중요한 기능에 대해 설명합니다.

Video.js 플레이어 통합의 최신 버전: 1.24.0 (릴리스 노트)

시작하기

Video.js에 대한 Amazon IVS 지원은 Video.js 기술을 통해 구현됩니다. 스크립트 태그와 npm 모듈을 통해 지원을 제공합니다. Amazon IVS는 Video.js 버전 7.6.6 이상 7* 및 8*를 지원합니다.

플레이어를 인스턴스화할 때 Video.js 소스 옵션은 지원되지 않습니다. 대신, 플레이어를 정상적으로 인스턴스화하고 Video.js src() 함수를 호출합니다. 자동 재생이 활성화되면 스트림이 재생되기 시작합니다. 그렇지 않으면 play()를 사용하여 재생을 시작합니다.

데모

다음 라이브 데모에서는 콘텐츠 전송 네트워크의 스크립트 태그와 Video.js 통합을 사용하는 방법을 보여 줍니다(Amazon IVS Player Video.js 통합).

스크립트 태그를 사용하여 설정

script 태그를 사용하여 Amazon IVS 기술을 설정하려면 다음을 수행합니다.

  1. 플레이어 통합의 최신 버전에 대해 다음 태그를 포함합니다.

    <script src="https://player.live-video.net/1.24.0/amazon-ivs-videojs-tech.min.js"></script>

  2. registerIVSTech 함수를 사용하여 기술을 등록합니다.

    registerIVSTech(videojs);

    여기서, videojs는 Video.js에서 제공하는 객체입니다.

  3. 플레이어의 인스턴스를 생성할 때 AmazonIVS를 techOrder 옵션의 첫 번째 기술로 추가합니다.

플레이어를 인스턴스화할 때 Video.js 소스 옵션은 지원되지 않습니다. 대신, 소스를 설정하려면 플레이어를 정상적으로 인스턴스화한 다음, 플레이어에서 Video.js src() 함수를 호출합니다. 자동 재생이 활성화되면 스트림이 재생되기 시작합니다. 그렇지 않으면 play()를 사용하여 재생을 시작합니다.

샘플 코드

이 예제에서 PLAYBACK_URL은 로드하려는 소스 스트림입니다. 이 예제에서는 Amazon IVS 플레이어의 최신 버전을 사용합니다.

<!doctype html>
<html lang="en">
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video-js.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video.min.js"></script>
    <script src="https://player.live-video.net/1.24.0/amazon-ivs-videojs-tech.min.js"></script>
</head>

<body>
    <div class="video-container">
        <video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" controls autoplay playsinline></video>
    </div>
    <style>
        body {
            margin: 0;
        }

        .video-container {
            width: 640px;
            height: 480px;
            margin: 15px;
        }
    </style>
    <script>
        (function play() {
            // Get playback URL from Amazon IVS API
            var PLAYBACK_URL = '';
            
            // Register Amazon IVS as playback technology for Video.js
            registerIVSTech(videojs);

            // Initialize player
            var player = videojs('amazon-ivs-videojs', {
               techOrder: ["AmazonIVS"]
            }, () => {
               console.log('Player is ready to use!');
               // Play stream
               player.src(PLAYBACK_URL);
            });
        })();
    </script>
</body>
</html>

NPM을 사용하여 설정

npm을 통해 Amazon IVS 플레이어를 사용하려면 다음을 수행합니다.

  1. video.js npm 패키지를 설치하거나 프로젝트에 Video.js 라이브러리에 대한 다른 액세스 권한이 있는지 확인합니다.

  2. amazon-ivs-player npm 패키지를 설치하려면 다음을 수행합니다.

    npm install amazon-ivs-player

  3. Amazon IVS 기술을 등록할 준비가 되면 registerIVSTech 함수를 가져옵니다.

    import { registerIVSTech } from 'amazon-ivs-player';

  4. registerIVSTech 함수를 사용하여 기술을 등록합니다.

    registerIVSTech(videojs, options);

    여기서 각 항목은 다음과 같습니다.

    • videojs는 Video.js에서 제공하는 객체입니다.

    • options는 Amazon IVS 기술 계층의 옵션입니다. 지원되는 옵션은 다음과 같습니다.

      • wasmWorker: amazon-ivs-wasmworker.min.js 파일이 호스팅되는 URL입니다.

      • wasmBinary: amazon-ivs-wasmworker.min.wasm 파일이 호스팅되는 URL입니다.

      작업자 파일은 amazon-ivs-player/dist/ 아래 node_modules/ 폴더에 있습니다. IVS 플레이어를 사용하려면 파일을 호스팅해야 합니다.

  5. 플레이어의 인스턴스를 생성할 때 AmazonIVS를 techOrder 옵션의 첫 번째 기술로 추가합니다.

    const player = videojs('videojs-player', {
    techOrder: ["AmazonIVS"]
});

TypeScript

사용 중인 경우 TypeScript, npm 패키지에는 가져와서 사용할 수 있는 다음 유형이 포함되어 있습니다.

  • getIVSEvents()에서 반환된 구조를 설명하는 VideoJSEvents.

  • AmazonIVS 기술을 사용하는 플레이어 인스턴스에 대한 인터페이스를 설명하는 VideoJSIVSTech. 이는 @types/video.js npm 패키지에 의해 노출되는 VideoJsPlayer 유형과 교차될 수 있습니다.

  • registerIVSTech()로 보낼 수 있는 구성 옵션을 정의하는 인터페이스를 설명하는 TechOptions.

이러한 유형에 대한 자세한 내용을 알아보려면, Amazon IVS Player SDK: Web Reference(Amazon IVS 플레이어 SDK: 웹 참조)에서 확인하세요.

이벤트

표준 Video.js 이벤트를 수신하려면 Video.js 플레이어의 on 함수를 사용합니다.

Amazon IVS에만 해당하는 이벤트를 수신하려면 Amazon IVS 웹 플레이어에서 이벤트 리스너를 추가 및 제거합니다.

player.getIVSPlayer().addEventListener(event, callback);
player.getIVSPlayer().removeEventListener(event, callback);

여기서 callback은 정의한 콜백이고 event는 PlayerEventType 또는 PlayerState 중 하나입니다. 이벤트에 대한 자세한 내용을 알아보려면, Amazon IVS Player SDK: Web Reference(Amazon IVS 플레이어 SDK: 웹 참조)에서 확인하세요.

Errors

일반적인 Video.js 오류의 경우 플레이어에서 일반 error 이벤트를 수신합니다.

player.on("error", callback);

Amazon IVS 고유의 오류의 경우 Amazon IVS 플레이어에서 자체 오류를 수신합니다.

let playerEvent = player.getIVSEvents().PlayerEventType;
player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback);

콜백은 다음 필드가 있는 객체를 수신합니다.

필드 설명

type

오류 유형 ErrorType 이벤트에 대응합니다. 자세한 내용을 알아보려면, Amazon IVS Player SDK: Web Reference(Amazon IVS 플레이어 SDK: 웹 참조)에서 확인하세요.

code

 오류 코드입니다.

source

 오류 소스입니다.

message

 사람이 읽을 수 있는 오류 메시지입니다.

플러그인

사용 가능한 품질에 대한 UI 토글을 생성하는 플러그인을 제공합니다. 이 플러그인을 사용하려면 script 태그(IVS 플레이어의 최신 버전에 대해)를 따라 Amazon의 기술을 사용하는 경우 amazon-ivs-quality-plugin.min.js 파일을 포함하여 로드되어야 합니다.

<script src="https://player.live-video.net/1.24.0/amazon-ivs-quality-plugin.min.js"></script>

npm을 사용하는 경우 amazon-ivs-player 모듈에서 registerIVSQualityPlugin을 가져옵니다.

import { registerIVSQualityPlugin } from 'amazon-ivs-player';

그런 다음, Video.js 플레이어의 인스턴스를 생성한 후 이를 등록하고 활성화하려면 다음 호출이 필요합니다.

registerIVSQualityPlugin(videojs); // where videojs is the video.js variable
player.enableIVSQualityPlugin(); // where player is the instance of the videojs player

그러면 스트림의 품질을 선택할 수 있는 UI 메뉴 버튼이 생성됩니다.

플러그인 및 TypeScript

사용 중인 경우 TypeScript, npm 패키지에는 플러그인과 함께 가져와서 사용할 수 있는 VideoJSQualityPlugin 유형이 포함되어 있습니다. 플러그인은 기본적으로 믹스인 형식이므로, 이 유형 인터페이스는 VideoJSIVSTech typescript 인터페이스에서 교차 유형으로 사용할 수 있습니다.

콘텐츠 보안 정책

Amazon IVS Video.js API는 콘텐츠 보안 정책(CSP)을 사용하는 페이지에서 작동하도록 구성되어 있습니다. Amazon IVS 플레이어 SDK: 웹 설명서의 '콘텐츠 보안 정책 작업' 섹션을 참조하세요.

함수

재생

Amazon IVS Video.js API는 Video.js 프레임워크에서 내부적으로 사용하기 위해 필요한 인터페이스를 지원합니다. Video.js는 필요한 통합을 수행하고 표준 인터페이스를 제공하기 때문에 클라이언트 애플리케이션은 이러한 메서드를 직접 사용할 필요가 없습니다. 그러나 필요한 경우 내부 Video.js 및 Amazon IVS 플레이어 메서드에 액세스하는 한 가지 방법은 Video.js 플레이어 객체를 사용하여 필요한 객체 핸들을 기술에 가져오는 것입니다.

API에 액세스하려면 평소와 같이 Video.js 플레이어의 인스턴스를 검색합니다.

let player = videojs("videoTagId"); //replace videoTagId with your <video> tag’s id

그런 다음, 해당 인스턴스에서 함수를 호출할 수 있습니다.

다음은 Amazon IVS 기술 계층에서 재정의하는 Video.js 함수의 하위 집합입니다. Video.js 함수의 전체 목록은 video.js API 설명서를 참조하세요.

함수 설명 및 Amazon IVS 특정 정보

currentTime

시간을 가져오거나 설정합니다(처음부터 초 단위).

Amazon IVS: 라이브 스트림의 현재 시간은 설정하지 않는 것이 좋습니다.

dispose

플레이어 인스턴스 삭제

Amazon IVS: 이렇게 하면 Amazon IVS 기술 백엔드도 삭제됩니다.

지속 시간

비디오의 지속 시간(초)을 반환합니다.

Amazon IVS: 라이브 스트림의 경우 Infinity를 반환합니다.

로드

src() 데이터를 로드하기 시작합니다.

Amazon IVS: no-op입니다.

재생

src 호출을 통해 설정된 스트림을 재생합니다.

Amazon IVS: 라이브 스트림이 일시 중지된 경우 일시 중지된 위치에서 계속 진행하지 않고, 최신 프레임에서 라이브 스트림을 재생합니다.

playbackRate

비디오 재생 속도를 가져오거나 설정합니다. 1.0은 정상 속도, 0.5는 보통 속도의 절반, 2.0은 정상 속도의 2배 등을 의미합니다.

Amazon IVS: 라이브 스트림에서 get은 1을 반환하고, 집합은 무시됩니다.

검색 가능

탐색할 수 있는 미디어의 TimeRanges를 반환합니다.

Amazon IVS: 라이브 스트림의 경우 반환 값(TimeRange)에서 end(0)을 호출하면 무한대를 반환합니다.

Amazon IVS 고유 기능

Amazon IVS Video.js 기술에는 Amazon IVS 함수와 관련된 동작에 액세스할 수 있는 추가 기능이 있습니다.

함수 설명

getIVSPlayer

기본 Amazon IVS 플레이어 인스턴스를 반환합니다. 이 인스턴스를 통해 전체 Amazon IVS 플레이어 웹 API를 사용할 수 있습니다. 가능하면 기본 Video.js 재생 API를 사용하고 Amazon IVS 고유 기능에 액세스하려는 경우에만 이 함수를 사용하는 것이 좋습니다. Amazon IVS 플레이어 인스턴스에서 액세스해야 하는 가장 일반적인 함수는 setQuality() 및 addEventListener()/removeEventListener()입니다.

getIVSEvents

Amazon IVS 고유의 열거형을 포함하는 객체를 반환합니다. Amazon IVS 특정 오류를 수신하는 데 사용됩니다. 자세한 내용은 이벤트 및 Errors 단원을 참조하세요.

currentTime

시간을 가져오거나 설정합니다(처음부터 초 단위).

Amazon IVS: 라이브 스트림의 현재 시간은 설정하지 않는 것이 좋습니다.

서명

currentTime
currentTime(time)

파라미터

파라미터 유형 설명

time

number

time이 없으면 현재 시간을 가져옵니다. time이 있으면 비디오 재생을 해당 시간으로 설정합니다.

반환 값

유형 설명

숫자

시작 지점에서 경과한 현재 시간(초)입니다.

dispose

플레이어 인스턴스를 삭제합니다.

Amazon IVS: 이렇게 하면 Amazon IVS 기술 백엔드도 삭제됩니다.

서명

dispose()

파라미터

None

반환 값

None

지속 시간

비디오의 지속 시간(초)을 반환합니다.

Amazon IVS: 라이브 스트림의 경우 Infinity를 반환합니다.

서명

duration()

파라미터

None

반환 값

유형 설명

숫자

스트림의 지속 시간(초)입니다. 라이브 스트림의 경우 이 값은 Infinity입니다.

getIVSEvents

Amazon IVS 고유의 열거형을 포함하는 객체를 반환합니다. Amazon IVS 특정 오류 및 이벤트를 수신하는 데 사용됩니다. 자세한 내용은 이 문서에서

서명

getIVSEvents()

파라미터

None

반환 값

유형 설명

object

PlayerEventType, PlayerState 및 ErrorType 키가 있는 객체(연결된 열거형에 매핑됨).

getIVSPlayer

기본 Amazon IVS 플레이어 인스턴스를 반환합니다. 이 인스턴스를 통해 전체 Amazon IVS 플레이어 웹 API를 사용할 수 있습니다. 가능하면 기본 Video.js 재생 API를 사용하고 Amazon IVS 고유 기능에 액세스하려는 경우에만 이 함수를 사용하는 것이 좋습니다. Amazon IVS 플레이어 인스턴스에서 액세스해야 하는 가장 일반적인 함수는 setQuality() 및 addEventListener()/removeEventListener()입니다.

서명

getIVSPlayer()

파라미터

None

반환 값

유형 설명

MediaPlayer

플레이어의 생성된 인스턴스입니다.

로드

src() 데이터를 로드하기 시작합니다.

Amazon IVS: no-op입니다.

서명

load()

파라미터

None

반환 값

None

재생

src 호출을 통해 설정된 스트림을 재생합니다.

Amazon IVS: 라이브 스트림이 일시 중지된 경우 일시 중지된 위치에서 계속 진행하지 않고, 최신 프레임에서 라이브 스트림을 재생합니다.

서명

play()

파라미터

None

반환 값

None

playbackRate

비디오 재생 속도를 가져오거나 설정합니다. 1.0은 정상 속도, 0.5는 보통 속도의 절반, 2.0은 정상 속도의 2배 등을 의미합니다.

Amazon IVS: 라이브 스트림에서 가져오기는 1을 반환하고, 집합은 무시됩니다.

서명

playbackRate
playbackRate(rate)

파라미터

파라미터 유형 설명

rate

숫자

재생 속도입니다. 유효한 값: [0.25, 2.0] 범위.

반환 값

유형 설명

숫자

재생 속도입니다.

검색 가능

탐색할 수 있는 미디어의 TimeRanges를 반환합니다.

Amazon IVS: 라이브 스트림의 경우 반환 값(TimeRange)에서 end(0)을 호출하면 무한대를 반환합니다.

Signature

seekable()

파라미터

None

반환 값

유형 설명

TimeRange

TimeRange 검색할 수 있는 미디어 중