개요
React Player Loader 라이브러리는 더 많은 기술 고객에게 Brightcove Player를 React 웹 애플리케이션과 통합 할 수있는 기능을 제공합니다. 이 라이브러리는 브라우저에서 Brightcove Player를로드하기위한 React 구성 요소를 정의합니다. 자세한 내용은브라이트 코브 / 반응 플레이어 로더 GitHub의 저장소.
React는 대화 형 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 데이터가 변경되면 구성 요소를 업데이트하고 렌더링합니다. 이에 대해 자세히 알아 보려면 React 홈페이지 .
플레이어 예제
Brightcove Player에서 재생중인 지정된 비디오를 보려면 비디오 재생을 시작하십시오. 코드를 검토하여 React 컴포넌트가 어떻게 구현되는지 확인하세요.
펜보기 Brightcove Player와 반응게시자 : Brightcove Learning Services ( 쫑끼리 ) 의 위에 CodePen .
코드펜 사용
설치
라이브러리는 다음을 사용하여 NPM을 사용하여 설치됩니다.
npm install --save @brightcove/react-player-loader
라이브러리 포함
포함하려면@brightcove/react-player-loader웹 사이트 또는 웹 응용 프로그램에 대한 라이브러리를 사용하는 경우 GitHub 저장소 . 위 CodePen의 샘플은<script>태그 방법.
플레이어/HTML 구성
이 샘플에 대해 만든 브라이트코브 플레이어에는 특별한 구성이 필요하지 않습니다.
HTML 코드에<script>다음 축소 된 JavaScript 파일에 대한 태그 :
- React 라이브러리.
-
React-DOM 라이브러리. 이 패키지는 DOM 관련 렌더링 경로의 진입 점으로 사용됩니다. React 라이브러리와 함께 사용하기위한 것입니다.
- Brightcove React Player 로더 라이브러리.
다음으로<div>태그id속성. 이것은 Brightcove Player가 React에 의해 렌더링 될 위치입니다.
<div id='container'></div>
응용 프로그램 흐름
이 응용 프로그램의 기본 논리는 다음과 같습니다.
- 필요한 라이브러리에 대한 참조 얻기
- HTML 페이지에 브라이트코브 플레이어 추가
필요한 라이브러리에 대한 참조 얻기
React, React-DOM 및 Brightcove Player Loader 라이브러리에 대한 참조를 가져옵니다.
HTML 페이지에 브라이트코브 플레이어 추가
라벨이 붙은 코드를 찾으십시오:
// +++ Add the Brightcove Player +++
사용ReactDOM.render()방법과 함께React.createElement() HTML 페이지에 Brightcove Player를 추가하는 방법입니다.
이 샘플은 다음 매개 변수를 사용하여 지정된 계정에서 동영상을 재생합니다.
accountIdvideoId
플레이어 로더는 다음과 같은 경우 기본 플레이어를 사용합니다. playerId매개 변수는 포함되지 않습니다.
사용 가능한 매개 변수 목록은매개 변수이 문서의 섹션.
응용 프로그램 스타일 지정
CSS 스타일은 Brightcove Player의 크기를 조정하는 데 사용됩니다.
매개변수
Brightcove Player Loader와 함께 사용할 수있는 사용 가능한 매개 변수 목록은플레이어 로더 개요문서. 나열된 모든 매개 변수는 다음을 제외하고 React Player Loader와 함께 사용할 수 있습니다.
- 당신은
onSuccess과onFailure프라 미스를 쉽게 내보낼 수 없기 때문입니다. - 제공하지 않는 경우
onFailure콜백, 실패는 오류를 발생시켜 처리됩니다. - 그만큼
refNode과refNodeInsert매개 변수는 내부적으로 사용되기 때문에 React Player Loader와 함께 사용할 수 없습니다. - 사용
baseUrl매개 변수를 사용하여 기본 URL을 변경합니다. Brightcove 플레이어 로더는setBaseUrl()메서드를 사용하지만 React Player Loader는이 메서드에 액세스 할 수 없습니다.
인라인 재생
그만큼playsinline속성은 요소의 재생 영역 내에서 비디오를 재생하도록 플레이어에 지시합니다. React Player Loader는playsinline속성에서 cURL을 사용하여 플레이어에서이를 구성 할 수 있습니다. 다음은 예입니다.
curl \
--header "Content-Type: application/json" \
--user EMAIL_ADDRESS \
--request PATCH \
--data '{
"playsinline": true
}' \
https://players.api.brightcove.com/v2/accounts/ACCOUNT_ID/players/default/configuration
재생 제한 사용
React Player Loader에서 재생 제한을 사용하려면 플레이어에 대한 참조를 가져오고 JWT(JSON Web Token)를 전달하기만 하면 됩니다.
예를 들면 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Brightcove Player</title>
<meta charset="UTF-8">
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin
src="brightcove-player/reactjs/brightcove-react-player-loader.min.js"></script>
</head>
<body>
<main>
<h1>Brightcove Player</h1>
<div id='container'></div>
</main>
</body>
<script>
var React = window.React;
var ReactDOM = window.ReactDOM;
var ReactPlayerLoader = window.BrightcoveReactPlayerLoader;
var myJwtToken = "your jwt token";
var myVideoId = "your video Id";
// +++ Add the Brightcove Player +++
var reactPlayerLoader = window.reactPlayerLoader = ReactDOM.render(
React.createElement(ReactPlayerLoader, {
accountId: 'your account Id',
onSuccess: function (success) {
console.log(reactPlayerLoader.player);
// Get a reference to the BC Player
var myPlayer = success.ref;
// When ready...
myPlayer.ready(function () {
myPlayer.catalog.get({
id: myVideoId,
type: 'video',
bcovAuthToken: myJwtToken
}).
then(function (data) {
myPlayer.catalog.load(data);
myPlayer.muted(true);
myPlayer.play();
}).
catch(function (error) {
throw new Error(error);
});
});
}
}),
document.getElementById('container')
);
</script>
</html>