template.js
3.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
class Template {
constructor(player) {
this.player = player
const { container } = player
if (container instanceof Element) {
this.$container = container
} else {
this.$container = query(container)
console.log(this.$container, `No container element found by ${container}`)
}
this.query = this.query.bind(this)
this.init()
}
static get html() {
return `${createLayerState()}${createPlayerBottom()}${createPlayerNetwork()}${createPlayerPoster()}${createPlayerError()}${createPlayerLoading()}${createMiniProgress()}${createReplay()}${createMiniLayer()}${createMiniClose()}${createPlayerBg()}`
}
query(className) {
return query(className, this.$container)
}
init() {
jqHtml('#hidden', { type: 'set', str: Template.html })
const childrenList = document.querySelector('#hidden').children
for (let i = 0; i < childrenList.length; i += 1) {
this.$container.append(childrenList[i].cloneNode(true))
}
jqHtml('#hidden', { type: 'set', str: '' })
this.$video = this.query('video', this.$container)
this.$error = this.query('.player-error', this.$container)
this.$errorBtn = this.query('.player-error .player-error-block', this.$container)
this.$network = this.query('.player-network', this.$container)
this.$networkBtn = this.query('.player-network .btn', this.$container)
this.$cover = this.query('.player-cover', this.$container)
this.$layerState = this.query('.player-layer-state', this.$container)
this.$layerStateBtn = this.query('.player-layer-state img', this.$container)
this.$loading = this.query('.player-loading', this.$container)
this.$bottom = this.query('.player-bottom', this.$container)
this.$bottomState = this.query('.player-bottom .player-state', this.$container)
this.$bottomCurrent = this.query('.player-bottom .player-current', this.$container)
this.$bottomLoaded = this.query('.player-bottom .player-loaded', this.$container)
this.$bottomDuration = this.query('.player-bottom .player-duration', this.$container)
this.$bottomFullScreen = this.query('.player-bottom .player-full-screen', this.$container)
this.$bottomProgress = this.query('.player-bottom .player-progress', this.$container)
this.$bottomBuffer = this.query('.player-bottom .player-buffer', this.$container)
this.$bottomProgressBlock = this.query('.player-bottom .player-progress-block', this.$container)
this.$miniProgress = this.query('.player-mini-progress', this.$container)
this.$miniProgressLoaded = this.query('.player-mini-progress .player-mini-loaded', this.$container)
this.$miniProgressBuffer = this.query('.player-mini-progress .player-mini-buffer', this.$container)
this.$replay = this.query('.player-replay', this.$container)
this.$replayBtn = this.query('.player-replay span', this.$container)
this.$miniLayer = this.query('.player-mini-layer', this.$container)
this.$miniLayerBtn = this.query('.player-mini-layer img', this.$container)
this.$miniClose = this.query('.player-mini-close', this.$container)
this.playerStateBg = this.query('.player-state-bg', this.$container)
// 此处初始化播放器效果
this.$cover.style.backgroundImage = `url('${this.player.poster}')`
this.$cover.style.backgroundSize = `3.52rem 1.6rem`
this.$cover.style.backgroundRepeat = `no-repeat`
this.$cover.style.backgroundPosition = `center`
if (!this.player.previewPoster) {
this.$video.setAttribute('poster', this.player.previewPoster)
}
removeClass(this.$cover, 'none')
}
destroy() {
addClass(this.$container, 'rmrb-player-destroy')
}
}