iridium/neko-custom
Archived
2
0
Fork 0
Code Pull Requests Activity

add autoplay audio if possible

Browse Source
This commit is contained in:
Pawel Urbanek 2023-03-24 16:17:05 +01:00
parent 50e5483661
commit 217cc451ea
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/components/video.vue
View File

@ -229,7 +229,6 @@
private observer = new ResizeObserver(this.onResize.bind(this)) private observer = new ResizeObserver(this.onResize.bind(this))
private focused = false private focused = false
private fullscreen = false private fullscreen = false
private startsMuted = true
private mutedOverlay = true private mutedOverlay = true
get admin() { get admin() {
@ -361,7 +360,6 @@
onMutedChanged(muted: boolean) { onMutedChanged(muted: boolean) {
if (this._video && this._video.muted != muted) { if (this._video && this._video.muted != muted) {
this._video.muted = muted this._video.muted = muted
this.startsMuted = muted
if (!muted) { if (!muted) {
this.mutedOverlay = false this.mutedOverlay = false
@ -392,7 +390,19 @@
try { try {
await this._video.play() await this._video.play()
} catch (err: any) { } catch (err: any) {
this.$accessor.video.pause() if (!this._video.muted ) {
// video.play() can fail if audio is set due restrictive browsers autoplay policy
// retry with muted audio
try {
this.$accessor.video.setMuted(true)
this._video.muted = true
await this._video.play()
} catch (err: any) {
this.$accessor.video.pause()
}
} else {
this.$accessor.video.pause()
}
} }
} }
@ -431,10 +441,6 @@
this._video.addEventListener('canplaythrough', () => { this._video.addEventListener('canplaythrough', () => {
this.$accessor.video.setPlayable(true) this.$accessor.video.setPlayable(true)
if (this.autoplay) { if (this.autoplay) {
// start as muted due to restrictive browsers autoplay policy
if (this.startsMuted && (!document.hasFocus() || !this.$accessor.active)) {
this.$accessor.video.setMuted(true)
}
this.$nextTick(() => { this.$nextTick(() => {
this.$accessor.video.play() this.$accessor.video.play()