0x2620/phantasmobile
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

poster on load, hide on play

Browse source
This commit is contained in:
j 2024-02-06 13:34:23 +01:00
parent 3f128612ba
commit 75bd96ff94
2 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/static/js/VideoElement.js
View file

@ -301,9 +301,6 @@ window.VideoElement = function(options) {
} else { } else {
video = document.createElement('video'); video = document.createElement('video');
} }
if (self.options.poster) {
video.poster = self.options.poster
}
video.playsinline = true video.playsinline = true
video.setAttribute('playsinline', 'playsinline') video.setAttribute('playsinline', 'playsinline')
video.setAttribute('webkit-playsinline', 'webkit-playsinline') video.setAttribute('webkit-playsinline', 'webkit-playsinline')

12
app/static/js/VideoPlayer.js
View file

@ -18,6 +18,9 @@ window.VideoPlayer = function(options) {
self.controls = document.createElement('div') self.controls = document.createElement('div')
self.controls.classList.add('mx-controls') self.controls.classList.add('mx-controls')
if (options.poster) {
self.controls.classList.add('poster')
}
//self.controls.style.display = "none" //self.controls.style.display = "none"
if (self.options.controls) { if (self.options.controls) {
var ratio = `aspect-ratio: ${self.options.aspectratio};` var ratio = `aspect-ratio: ${self.options.aspectratio};`
@ -45,6 +48,12 @@ window.VideoPlayer = function(options) {
margin: auto; margin: auto;
} }
.mx-controls.poster {
background-image: url(${self.options.poster});
background-repeat: no-repeat;
background-size: contain;
}
.mx-controls .toggle { .mx-controls .toggle {
display: flex; display: flex;
flex: 1; flex: 1;
@ -160,6 +169,7 @@ window.VideoPlayer = function(options) {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
if (that.paused) { if (that.paused) {
self.controls.classList.remove('poster')
that.play() that.play()
} else { } else {
that.pause() that.pause()
@ -193,6 +203,7 @@ window.VideoPlayer = function(options) {
}) })
} }
if (that.paused && !failed) { if (that.paused && !failed) {
self.controls.classList.remove('poster')
that.play() that.play()
} }
} else { } else {
@ -314,6 +325,7 @@ window.VideoPlayer = function(options) {
toggle.querySelector('div').innerHTML = icon.pause toggle.querySelector('div').innerHTML = icon.pause
self.controls.style.opacity = '0' self.controls.style.opacity = '0'
unblock.remove() unblock.remove()
self.controls.classList.remove('poster')
that.play() that.play()
} }
}) })