mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-09 03:46:16 -08:00
64 lines
3.2 KiB
JavaScript
64 lines
3.2 KiB
JavaScript
export default class Template {
|
||
constructor(art) {
|
||
const { refs } = art;
|
||
refs.$container.innerHTML = `
|
||
<div class="artplayer-video-player">
|
||
<video class="artplayer-video"></video>
|
||
<div class="artplayer-subtitle"></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-setting">
|
||
<div class="artplayer-setting-inner">
|
||
<div class="artplayer-setting-body"></div>
|
||
<div class="artplayer-setting-close">×</div>
|
||
</div>
|
||
</div>
|
||
<div class="artplayer-info">
|
||
<div class="artplayer-info-panel"></div>
|
||
<div class="artplayer-info-close">[x]</div>
|
||
</div>
|
||
<div class="artplayer-pip-header">
|
||
<div class="artplayer-pip-title"></div>
|
||
<div class="artplayer-pip-close">×</div>
|
||
</div>
|
||
<div class="artplayer-contextmenu"></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.$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.$setting = refs.$container.querySelector('.artplayer-setting');
|
||
refs.$settingInner = refs.$container.querySelector('.artplayer-setting-inner');
|
||
refs.$settingBody = refs.$container.querySelector('.artplayer-setting-body');
|
||
refs.$settingClose = refs.$container.querySelector('.artplayer-setting-close');
|
||
refs.$info = refs.$container.querySelector('.artplayer-info');
|
||
refs.$infoPanel = refs.$container.querySelector('.artplayer-info-panel');
|
||
refs.$infoClose = refs.$container.querySelector('.artplayer-info-close');
|
||
refs.$pipHeader = refs.$container.querySelector('.artplayer-pip-header');
|
||
refs.$pipTitle = refs.$container.querySelector('.artplayer-pip-title');
|
||
refs.$pipClose = refs.$container.querySelector('.artplayer-pip-close');
|
||
refs.$contextmenu = refs.$container.querySelector('.artplayer-contextmenu');
|
||
}
|
||
}
|