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