브라이트코브 플레이어 샘플: 수평 볼륨 컨트롤
개발 순서
다음은 권장되는 개발 순서입니다.
- In-Page 임베드 플레이어 구현을 사용하여 플레이어, 플러그인 및 CSS의 기능을 테스트합니다 (CSS가 필요한 경우).
- 로컬 테스트를 위해 플러그인의 자바 스크립트와 CSS를 별도의 파일에 넣으십시오.
- 오류가 발생하면 플러그인 코드와 CSS를 서버에 배포하십시오.
- Studio를 사용하여 플레이어에 플러그인과 CSS를 추가합니다.
- iframe 구현이 더 적합하다고 판단되면 In-Page 내장 플레이어 구현을 교체하십시오 (다음 섹션에서 자세히 설명).
이러한 단계에 대한 자세한 내용은단계별 단계를 검토하십시오. 플러그인 개발가이드.
iframe 또는 페이지 내 포함
브라이트코브 플레이어에서 향상된 기능을 개발할 때 코드가 iframe 또는 In-Page embed 구현에 가장 적합한지 결정해야 합니다. 가장 좋은 방법은 iframe 구현과 함께 사용할 플러그인을 작성하는 것입니다. iframe 플레이어를 사용하면 다음과 같은 이점이 있습니다.
- 기존 자바 스크립트 및/또는 CSS와의 충돌 없음
- 자동 응답성
- iframe은 소셜 미디어 앱에서 쉽게 사용할 수 있습니다 (또는 동영상이 다른 앱으로 “이동”해야 할 때마다).
In-Page 임베드 플레이어를 통합하는 것이 더 복잡할 수 있지만 해당 구현을 중심으로 코드를 계획할 때가 있습니다. 일반화하려면이 방법은 포함 된 페이지가 플레이어와 통신해야 할 때 가장 좋습니다. 특히 다음은 몇 가지 예입니다.
- 포함 페이지의 코드는 플레이어 이벤트를 수신하고 이에 대한 조치를 취해야 합니다.
- 플레이어는 포함 된 페이지의 스타일을 사용합니다.
- iframe으로 인해 포함 된 페이지의 리디렉션처럼 앱 로직이 실패합니다.
최종 구현에서 iframe 코드를 사용하지 않더라도 JavaScript 용 플러그인과 CSS용 별도의 파일과 함께 In-Page embed 코드를 사용할 수 있습니다. 이렇게 하면 로직을 캡슐화하여 여러 플레이어에서 쉽게 사용할 수 있습니다.
구현 선택
이 예에서는 인 페이지 소스 코드로 테스트 한 다음 CSS 및 JavaScript 파일을 플레이어에 추가합니다. 그런 다음 플러그인을 배포합니다. 수평 볼륨 플러그인이 플레이어에 추가되면 iframe 구현을 사용할 수 있습니다.
사용 된 API 리소스
다음 섹션에서는 다양한 API에서 사용되는 리소스를 자세히 설명합니다.
Brightcove Player API 메서드
control_bar.addChild()control_bar.removeChild()
더 플레이어
아래 플레이어에서 수평 볼륨 조절 막대가 기본 수직 조절 막대를 대체합니다.
작동 원리
다음 섹션에서는 예제에 사용 된 플레이어, JavaScript 및 CSS 코드를 설명합니다.
플레이어 만들기
플레이어를 만들고 비디오를 할당하려면 다음 단계를 따르십시오.
- 플레이어 모듈에서 새 플레이어를만들거나 기존 플레이어를 사용합니다.
- 미디어모듈에서 비디오를 선택하고이 플레이어와 함께 게시하십시오.플레이어에게 비디오 콘텐츠를 할당하고 게시합니다.
- 페이지 내장 코드를 복사하여 새 HTML 파일에 붙여 넣습니다.
플레이어 코드
인 페이지 소스 코드는 다음과 유사해야합니다.
<video-js id="video_1"
width="640px" height="360px"
data-video-id="4172255216001"
data-account="1752604059001"
data-player="default"
data-embed="default"
controls=""></video-js>
<script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
스타일 시트
이 예에서는 Brightcove Player에 CSS 스타일을 사용합니다.
-
9-22 행 : 컨트롤 막대에서 요소의 순서를 설정합니다. 이 예제는 음소거 컨트롤과 볼륨 컨트롤을 진행률 표시 줄 뒤, 전체 화면 버튼 앞에 배치합니다.
컨트롤 막대 아이콘 순서 설정에 대한 자세한 내용은플레이어 모양 사용자 지정문서.
- 24-26 행 : 진행률 표시 줄과 더 잘 일치하도록 볼륨 컨트롤 주변의 기본 그림자를 제거합니다.
- 27-34 행 : 볼륨 컨트롤의 높이와 배경색을 설정합니다.
- 라인 수: 볼륨 컨트롤 오른쪽에 패딩을 추가하여 전체 화면 버튼과 겹치지 않도록합니다.
<style type="text/css">
/* Order of controls in bar, should flow in before fullscreen button. */
.vjs-mute-control {
order: 7;
-webkit-box-ordinal-group: 7;
-moz-box-ordinal-group: 7;
-webkit-order: 7;
-ms-flex-order: 7;
}
.vjs-volume-control {
order: 8;
-webkit-box-ordinal-group: 8;
-moz-box-ordinal-group: 8;
-webkit-order: 8;
-ms-flex-order: 8;
}
/* Better match progress bar */
.video-js.video-js .vjs-volume-bar:before {
box-shadow:none;
}
.video-js.video-js .vjs-volume-bar,
.video-js.video-js .vjs-volume-bar:before,
.video-js.video-js .vjs-volume-level {
height: 4px;
}
.video-js.video-js .vjs-volume-handle {
background-color: initial;
}
/* Additional padding to reduce inadvertently covering the fullscreen button */
.vjs-volume-control {
padding-right: 5px;
}
</style>
자바 스크립트 코드
페이지 코드에 다음 JavaScript를 추가하십시오.
- 57호선: 준비가되면 플레이어에 대한 참조를 가져옵니다.
- 59호선: 플레이어의 컨트롤 막대에 대한 참조를 가져옵니다.
- 60호선: 볼륨 메뉴 버튼에 대한 참조를 가져옵니다.
-
61-62 행 : 컨트롤 막대에 음소거 버튼과 볼륨 조절 요소를 추가합니다.
- 지하철 63호선 컨트롤 막대에서 기본 볼륨 메뉴 버튼을 제거합니다.
<script id="pageScript" type="text/javascript">
var myPlayer;
videojs.getPlayer('video_1').ready(function(){
myPlayer = this;
var control_bar = myPlayer.controlBar;
var vmb = control_bar.volumeMenuButton;
control_bar.addChild('VolumeControl');
control_bar.addChild('MuteToggle');
control_bar.removeChild(vmb);
});
</script>
플러그인 사용
이 기능을 여러 플레이어에 쉽게 추가 할 수 있도록 플러그인을 사용하는 것이 가장 좋습니다.
CSS 파일 만들기
CSS 스타일을 파일로 이동하고 인터넷 액세스 가능 URL에 배치합니다.
- CSS 스타일에 대한 새 파일을 만듭니다. 이 경우 이름을
horizontal-volume.css. - 에서
<head>HTML 파일의 섹션에 다음 링크를 추가하여 새로 만든 CSS 파일을 포함합니다.<link href="horizontal-volume.css" rel="stylesheet"> - HTML 페이지를 탐색합니다. HTML 페이지에서 스타일이 제거 된 경우를 제외하고는 수평 볼륨 컨트롤이 표시됩니다.
JavaScript 파일 만들기
플러그인의 JavaScript 코드를 파일로 이동하고 인터넷에 액세스 할 수있는 URL에 배치합니다.
- 플러그인 JavaScript 코드에 대한 새 파일을 만듭니다. 이 경우 이름을
horizontal-volume.js. - 기본 HTML 파일에서 JavaScript 코드를 잘라내어이 새 파일에 붙여 넣습니다.
- 77,85 행 : 다음을 사용하여 JavaScript 코드를 래핑하십시오.
videojs.registerPlugin()함수. 첫 번째 주장,horizontalVolume는 플러그인 이름입니다. - 78 행 : 플레이어에 대한 참조를 가져옵니다.
- 나머지는 이전 섹션에서 검토 한 JavaScript 코드입니다.
/**
* Horizontal Volume
*/
videojs.registerPlugin('horizontalVolume', function() {
var myPlayer = this,
control_bar = myPlayer.controlBar,
vmb = control_bar.volumeMenuButton;
control_bar.addChild('VolumeControl');
control_bar.addChild('MuteToggle');
control_bar.removeChild(vmb);
});
- HTML 파일에서 기존
<script>태그 바로 아래에 다음 코드를 추가합니다. 이 코드는 자바 스크립트 파일을 포함 한 다음 해당 자바 스크립트에 정의 된 메소드를 호출합니다.<script type="text/javascript" src="horizontal-volume.js"></script> <script>videojs.getPlayer('video_1').horizontalVolume();</script> - HTML 페이지를 탐색합니다. HTML 페이지에서 JavaScript 코드가 제거 된 경우를 제외하고 수평 볼륨 컨트롤이 표시됩니다.
플러그인 및 CSS 배포
플레이어 모듈을 사용하여 오버레이 버튼 플러그인을 배포하려면 다음 단계를 따르세요.
- 새로운 Video Cloud Studio에서플레이어모듈을 찾아 플레이어를 찾습니다.
- 플레이어에 대한 링크를 클릭하여 플레이어 속성을 엽니다.
- 플러그인 섹션을 찾고 편집을 클릭합니다.
- 에 대한자바 스크립트 URL , 플러그인의 JavaScript를 저장 한 위치를 지정하는 URL을 입력하십시오.
- 에 대한 CSS URL , 플러그인의 CSS를 저장 한 위치를 지정하는 URL을 입력하십시오.
- 에 대한이름 , 시작하다 horizontalVolume .
- 이 플러그인에는 옵션이 없으므로 플러그인 옵션 섹션을 비워 둘 수 있습니다.
- 저장을클릭한 다음 플레이어게시를클릭합니다.
iframe 사용
iframe 플레이어 구현을 사용하는 것이 가장 좋습니다. 이 예에서 가능한 경우 인 페이지 삽입 구현을 iframe 구현으로 바꿉니다.
- 에서미디어모듈에서 동영상을 선택하고이 플레이어로 게시합니다.돌아 가기플레이어기준 치수.
-
iframe 소스 코드를 복사하여 새 HTML 파일에 붙여 넣습니다. 코드는 다음과 비슷해야합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Brightcove Player: Horizontal Volume - iframe</title> </head> <body> <iframe style='width: 640px;height: 360px;' src='//players.brightcove.net/1752604059001/b42edc12-2ac9-48a9-92bc-fbdb5ca9aed7_default/index.html?videoId=4172255216001' allowfullscreen allow='encrypted-media'></iframe> </body> </html> - HTML 페이지를 탐색합니다. 플러그인이 올바르게 작동하는지 확인해야합니다.