개요 : 구성 요소

제품 (들)
Brightcove Player
비디오 클라우드
역할
플레이어 개발자
주제
건축물

Brightcove 플레이어는 간단한 사용자 정의 UI 구성 요소 아키텍처 위에 구축됩니다. 이 항목에서는 구성 요소와 구조에 대해 간략하게 설명합니다.

이 개요 문서입니다. 구성 요소 변경에 대한 자세한 내용은 플레이어 모양 사용자 지정 문서입니다.

레이블이있는 구성 요소

다음은 플레이어의 스크린 샷, 플레이어로드 및 비디오 재생시 레이블이 지정된 구성 요소입니다.

플레이어로드 및 마우스 오버시

적재중인 부품

재생 중

구성 요소 재생

이러한 구성 요소의 CSS 선택기에 대한 자세한 내용은 플레이어 모양 사용자 지정 서류 구성 요소 선택기 섹션.

계층 구조

 

플레이어의 기본 계층 적 구성 요소 구조는 다음과 같습니다.

플레이어 플레이어 PosterImage TextTrackDisplay DockText DockTitle DockDescription DockShelf LoadingSpinner BigPlayButton 컨트롤 막대 PlayToggle VolumePanelHorizontal MuteToggle VolumeControl과가 volumeBar VOLUMELEVEL CurrentTimeDisplay TimeDivider DurationDisplay ProgressControl ProgressHolder SeekBar를 LoadProgressBar PlayProgressBar SeekHandle LiveControl RemainingTimeDisplay 스페이서 PlaybackRate ChaptersButton DescriptionsButton SubtitlesCaptionsButton AudioTrackButton FullscreenToggle ErrorDisplayModal ModalDialog InfoModal

또한 구성 요소의 구조를 볼 수 있습니다. 요소 탭의 브라우저 개발 도구. 아래 스크린 샷의 요소를 볼 수 있습니다. 예를 들어 노란색으로 강조 표시된 것은 ControlBar의 자식 요소입니다.

dev 도구의 요소

정의

주요 구성 요소에 대한 정의가 다음 표에 나와 있습니다.

구성 요소 설명
PosterImage The image displayed until the video starts playing
TextTrackDisplay Text that is displayed as a separate track used for captions and subtitles (in WebVTT format)
LoadingSpinner The animated spin wheel that displays until the video is loaded
BigPlayButton The play button displayed within the area of button at load time
ControlBar The container for all the main player controls
PlayToggle The play button that toggles between play and pause
MuteToggle The button to toggle between audio muted and not
        VolumeControl Slider bar to control the volume level
VolumeLevel Displays the current volume level when hovering over the volume bar
                VolumeHandle Shows the current position of the volume level and can be dragged to adjust the volume level
CurrentTimeDisplay Current duration of played video displayed as mm:ss
TimeDivider The forward slash '/' separating the current duration and the duration of the video
지속 시간 표시 The overall duration of the video
    ProgressControl The component that contains the seek, load progress and play progress bars
SeekBar Media bar which becomes active upon receiving the event that media has been fetched
LoadProgressBar Indicates the progression of the video being fetched
PlayProgressBar Indicates the progression of the video being played
        SeekHandle Shows the current position of the playhead during playback and can be dragged to adjust the playhead
    LiveControl Displays the word LIVE if streaming a live feed
    RemainingTimeDisplay Displays the duration of the video yet to be played
    Spacer Element inserted into the ControlBar especially for adding icons
    PlaybackRate Displays the playback rate
챕터 버튼 Button to display chapters
CaptionsButton Toggle to display the caption settings form
FullScreenToggle Button to toggle fullscreen display
CaptionsSettings Form to display and alter caption settings
독 텍스트 Container for the title and description
DockTitle Title of the video
DockDescription Short description of the video
DockShelf Used by the social media plugin

Class information

The player class, and all control classes, inherit from the Component class, or a subclass of Component.

videojs.Control = videojs.Component.extend();
videojs.Button = videojs.Control.extend();
videojs.PlayToggle = videojs.Button.extend();

The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player. When you add a child component, it inserts the element of that child into the element of the parent and allows you to manipulate the element as needed, as shown here:

myButton = myPlayer.controlBar.addChild('Button');
myButton.addClass('bc-download-button');
myButton.on('click',function(){
  ...
})