브라이트코브의 핵심 웹 플레이어 팀의 사명 중 하나는 브라이트코브 플레이어와의 통합 장벽을 없애는 것입니다. 플레이어의 유연성, 안정성, 사용 편의성을 통해 고객을 만족시키는 것이 목표입니다.
HTML5 웹 플레이어의 기본 아키텍처는 지난 5년여 동안 크게 변하지 않았습니다. 플레이어는 플레이어 관리 API 또는 스튜디오(API를 사용하는)를 통해 관리되고, 온디맨드 방식으로 퍼블리싱되며, 다음 주소의 CDN에서 호스팅됩니다. players.brightcove.net 를 독립형 스크립트로 사용할 수 있습니다.
지난 5년 동안 웹 툴링은 계속 정교해졌고 CDN에서 호스팅하는 자바스크립트는 새로운 패러다임에 맞지 않는 경우가 많습니다. 웹 페이지에 <script> 태그를 웹 템플릿이나 CMS에 추가하면 웹 개발자 및 기타 고급 사용자는 다음을 통해 패키지를 설치할 수 있을 것으로 예상합니다. npm, import 를 ES 모듈를 통해 애플리케이션에 번들로 제공합니다. 웹팩, 롤업또는 이와 유사합니다.
지금까지 이러한 고급 사용자들은 대부분 자체 솔루션을 사용해 왔습니다. 이는 곧 유니티의 플레이어 생태계가 고객의 요구를 완전히 충족시키지 못하고 있으며, 이러한 사용자들은 유니티와 협력하는 대신 유니티를 우회하여 작업해야 한다는 것을 의미합니다. 이러한 사용자에게 더 나은 서비스를 제공하기 위해 이제 대부분의 최신 웹 툴링 스택에서 사용할 수 있는 무료 오픈 소스 도구 세트를 옵션으로 제공하고 있습니다(모두 npm에서 사용 가능).
이러한 도구를 통칭하여 브라이트코브 플레이어 툴박스라고 부릅니다.
2018년 현재 툴박스에는 다음이 포함됩니다:
플레이어 로더
플레이어 로더는 브라이트코브 플레이어를 위한 프레임워크/툴링에 구애받지 않는 공식 비동기 스크립트 로더 및 임베드 생성기입니다. 특정 툴체인과 독립적이며 두 가지 용도로 사용됩니다:
- 다양한 옵션이 포함된 임베드 코드를 생성하고 일부 브라이트코브 플레이어 플러그인에서 필요한 사용자 지정을 지원합니다.
- CDN에서 플레이어 스크립트를 비동기식으로 다운로드하고 일치하는 임베드를 자동으로 초기화합니다.
이 도구는 전적으로 런타임에 맞춰 구성되므로 런타임에 항상 최신 플레이어를 다운로드합니다.
플레이어 로더는 npm에서 다음과 같이 사용할 수 있습니다. @brightcove/player-loader. 시작하려면 다음을 읽어보세요. README 또는 브라이트코브 문서.
예
참고: 이 예제에서는 ES 모듈을 사용하지만 필수는 아니며 CommonJS, AMD 또는 간단한 스크립트 태그도 사용할 수 있어야 합니다.
<body>
<div id="player-container"></div>
</body>
import brightcovePlayerLoader from '@brightcove/player-loader';
brightcovePlayerLoader({
refNode: '#player-container',
accountId: '123456789',
playerId: 'AbCDeFgHi',
videoId: '987654321'
})
.then(function(success) {
// The player has been created!
// success.type will be "in-page" or "iframe"
// success.ref will be the player or the iframe element
})
.catch(function(error) {
// Player creation failed!
});
리액트 플레이어 로더
리액트 플레이어 로더 프로젝트는 사용자에게 백그라운드에서 플레이어 로더를 사용하여 브라이트코브 플레이어를 임베드하고 다운로드하는 데 사용할 수 있는 공식 리액트 컴포넌트를 제공합니다.
이 컴포넌트는일부 예외를 제외하고 플레이어 로더의 모든 옵션을 취하고 React 컴포넌트가 마운트 해제될 때 플레이어 처리를 처리합니다.
React 플레이어 로더는 npm에서 다음과 같이 사용할 수 있습니다. @brightcove/react-player-loader. 시작하려면 다음을 읽어보세요. README 또는 브라이트코브 문서.
예시 (JSX)
참고: React/ReactDOM/global 는 필수 항목이 아니며 작동하는 예제를 보여주기 위한 용도로만 사용됩니다.
import document from 'global/document';
import React from 'react';
import ReactDOM from 'react-dom';
import BrightcovePlayer from '@brightcove/react-player-loader';
let brightcovePlayer;
// A success callback will offer two ways of accessing the underlying player
// or iframe.
const onSuccess = function(success) {
console.log(success.ref);
console.log(brightcovePlayer.player);
};
brightcovePlayer = ReactDOM.render(
<BrightcovePlayer accountId='1234678' onSuccess={onSuccess}/>,
document.getElementById('fixture')
);
플레이어 로더 웹팩 플러그인
플레이어 로더 웹팩 플러그인은 브라이트코브 플레이어를 번들로 제공하기 위한 공식 웹팩 플러그인입니다. 이 플러그인의 목적은 단 하나, 웹팩 번들에 브라이트코브 플레이어를 미리 추가하여 추가적인 비동기 HTTP 요청을 피하는 것입니다.
브라이트코브 플레이어 로더와 달리 이 도구는 임베드를 생성하지 않습니다.
하지만 플레이어 로더와 함께 사용할 수 있습니다. 이 설정에서는 웹팩 플러그인이 플레이어를 미리 채우고 플레이어 로더가 임베드를 생성하는 데 사용됩니다. 플레이어 로더는 이미 다운로드했거나 메모리에서 미리 감지한 브라이트코브 플레이어를 다시 다운로드하지 않으므로 번들에 미리 추가된 플레이어는 다시 다운로드되지 않습니다.
이 도구의 한 가지 주의할 점은 빌드 시점에만 플레이어를 다운로드한다는 것입니다. 즉, 플레이어를 다시 게시하는 경우 웹 사이트에서 플레이어가 업데이트되기 전에 웹팩 번들을 다시 만들어야 합니다.
플레이어 로더 웹팩 플러그인은 npm에서 다음과 같이 사용할 수 있습니다. @brightcove/player-loader-webpack-plugin. 시작하려면 다음을 읽어보세요. README.
예
다음 예제 코드는 webpack.config.js 파일을 만듭니다.
const PlayerLoaderPlugin = require('@brightcove/player-loader-webpack-plugin');
module.exports = {
// Other webpack configuration here...
plugins: [
new PlayerLoaderPlugin({accountId: '123456789', playerId: 'AbCDeFgHi'})
]
};
결론
이 새로운 도구 모음이 최신 툴체인에서 브라이트코브 플레이어로 작업하는 고객에게 도움이 되기를 바랍니다.
브라이트코브 플레이어는 무료도 아니고 오픈 소스도 아니지만, 브라이트코브 플레이어 툴박스를 구성하는 도구는 모두 무료 및 오픈 소스이며 Apache-2.0 라이선스에 따라 제공됩니다.
즉, 브라이트코브에서 공식적으로 지원하지 않으며 피드백이나 버그 보고는 브라이트코브 고객 지원팀으로 보내지 않아야 합니다.
이러한 주의 사항을 전제로, 저희 엔지니어들은 오픈소스를 낯설어하지 않으며 GitHub의 피드백, 버그 리포트, 풀 리퀘스트에 최선을 다해 대응하고 있다는 점을 말씀드리고 싶습니다.
누구나 이러한 오픈 소스 도구에 기여하여 모두를 위한 더 나은 도구를 만들 수 있도록 환영합니다!
참고 자료
리포지토리 및 오픈 소스 문서
브라이트코브 지원 문서
