/**
* @file 포스터-이미지.js
*/
'./clickable-component.js'에서 ClickableComponent 가져오기;
'./component.js'에서 컴포넌트 가져오기;
import * as Dom from './utils/dom.js';
'./utils/promise'에서 {silencePromise} 가져오기;
* './utils/browser.js'에서 브라우저로 가져오기;
/**
* 플레이어의 포스터 이미지 표시를 처리하는 `ClickableComponent`.
*
* @extends ClickableComponent
*/
클래스 PosterImage는 ClickableComponent {를 확장합니다.
/**
* 이 클래스의 인스턴스를 만듭니다.
*
* @param {플레이어} 플레이어
* 이 클래스가 연결되어야 하는 `Player`.
*
* @param {객체} [옵션]
* 플레이어 옵션의 키/값 저장소.
*/
생성자(플레이어, 옵션) {
super(플레이어, 옵션);
this.update();
this.update_ = (e) => this.update(e);
player.on('posterchange', this.update_);
}
/**
* `PosterImage`를 정리하고 폐기하십시오.
*/
폐기() {
this.player().off('posterchange', this.update_);
super.dispose();
}
/**
* `PosterImage`의 DOM 요소를 만듭니다.
*
* @return {요소}
* 생성되는 요소.
*/
createEl() {
const el = Dom.createEl('div', {
className: 'vjs-포스터',
// 포스터를 탭할 수 있는 것을 원하지 않습니다.
탭 인덱스: -1
});
반환 엘;
}
/**
* {@link Player#posterchange} 이벤트에 대한 {@link EventTarget~EventListener}.
*
* @listens Player#posterchange
*
* @param {이벤트대상~이벤트} [이벤트]
* 이 기능을 트리거한 `Player#posterchange` 이벤트.
*/
업데이트(이벤트) {
const url = this.player().poster();
this.setSrc(url);
// 포스터 소스가 없으면 이 구성 요소에 display:none을 표시해야 합니다.
// 여전히 클릭할 수 없거나 마우스 오른쪽 버튼으로 클릭할 수 없습니다.
경우 (URL) {
this.show();
} else {
this.hide();
}
}
/**
* 표시 방식에 따라 `PosterImage`의 소스를 설정합니다.
*
* @param {문자열} URL
* `PosterImage` 소스의 URL입니다.
*/
setSrc(url) {
let backgroundImage = '';
// 허위 값은 빈 문자열로 유지되어야 합니다. 그렇지 않으면
// 추가 오류가 발생합니다.
경우 (URL) {
backgroundImage = `url("${url}")`;
}
this.el_.style.backgroundImage = 배경이미지;
}
/**
* `PosterImage` 클릭에 대한 {@link EventTarget~EventListener}. 보다
* 이것이 트리거될 인스턴스에 대한 {@link ClickableComponent#handleClick}.
*
* @listens 탭
* @듣기 클릭
* @listens 키다운
*
* @param {EventTarget~Event} 이벤트
+ 이 함수를 호출한 `click`, `tap` 또는 `keydown` 이벤트.
*/
handleClick(이벤트) {
// 컨트롤이 비활성화되어 있을 때 클릭이 재생을 트리거하는 것을 원하지 않습니다.
if (!this.player_.controls()) {
반품;
}
const sourceIsEncrypted = this.player_.usingPlugin('eme') &&
this.player_.eme.sessions &&
this.player_.eme.sessions.length > 0;
if (this.player_.tech(참) &&
// DRM 콘텐츠를 재생할 때 IE 및 Edge에서 버그를 관찰했습니다.
// 비디오 요소에서 .focus()를 호출하면 비디오가 검게 변합니다.
// 특정 경우에는 피합니다.
!((브라우저.IE_VERSION || 브라우저.IS_EDGE) && sourceIsEncrypted)) {
this.player_.tech(true).focus();
}
if (this.player_.paused()) {
침묵 약속(this.player_.play());
} else {
this.player_.pause();
}
}
}
Component.registerComponent('포스터 이미지', 포스터 이미지);
기본 PosterImage 내보내기;