mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 05:26:15 -08:00
52 lines
2.3 KiB
JavaScript
52 lines
2.3 KiB
JavaScript
export default class Template {
|
|
constructor(art) {
|
|
this.art = art;
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
const { refs } = this.art;
|
|
refs.$container.innerHTML = `
|
|
<div class="artplayer-video-player">
|
|
<video class="artplayer-video"></video>
|
|
<div class="artplayer-subtitle"></div>
|
|
<div class="artplayer-danmu"></div>
|
|
<div class="artplayer-layers"></div>
|
|
<div class="artplayer-mask"></div>
|
|
<div class="artplayer-bottom">
|
|
<div class="artplayer-progress"></div>
|
|
<div class="artplayer-controls">
|
|
<div class="artplayer-controls-left"></div>
|
|
<div class="artplayer-controls-right"></div>
|
|
</div>
|
|
</div>
|
|
<div class="artplayer-loading"></div>
|
|
<div class="artplayer-notice">
|
|
<div class="artplayer-notice-inner"></div>
|
|
</div>
|
|
<div class="artplayer-info">
|
|
<div class="artplayer-info-panel"></div>
|
|
<div class="artplayer-info-close">[x]</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
refs.$player = refs.$container.querySelector('.artplayer-video-player');
|
|
refs.$video = refs.$container.querySelector('.artplayer-video');
|
|
refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
|
|
refs.$bottom = refs.$container.querySelector('.artplayer-bottom');
|
|
refs.$progress = refs.$container.querySelector('.artplayer-progress');
|
|
refs.$controls = refs.$container.querySelector('.artplayer-controls');
|
|
refs.$controlsLeft = refs.$container.querySelector('.artplayer-controls-left');
|
|
refs.$controlsRight = refs.$container.querySelector('.artplayer-controls-right');
|
|
refs.$layers = refs.$container.querySelector('.artplayer-layers');
|
|
refs.$danmu = refs.$container.querySelector('.artplayer-danmu');
|
|
refs.$loading = refs.$container.querySelector('.artplayer-loading');
|
|
refs.$notice = refs.$container.querySelector('.artplayer-notice');
|
|
refs.$noticeInner = refs.$container.querySelector('.artplayer-notice-inner');
|
|
refs.$mask = refs.$container.querySelector('.artplayer-mask');
|
|
refs.$info = refs.$container.querySelector('.artplayer-info');
|
|
refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel');
|
|
refs.$infoClose = refs.$container.querySelector('.artplayer-info-close');
|
|
}
|
|
}
|