[v2,linux] video tag doesn't fire event 'ended' in app, but works in browser on debian 11

[kspiridonov]

Description

Operating System: Debian GNU/Linux 11 (bullseye)
Kernel: Linux 5.10.0-16-amd64
Architecture: x86-64
Wails CLI v2.0.0-beta.43
go version go1.18.4 linux/amd64

videoTag.addEventListener('ended', (event) => { console.info('ended'); }); doesn't fired when video finished in my simple test app, but in browser it works ok.

To Reproduce

1. clone https://github.com/kspiridonov/Wails.VideoTest
2. wails dev on debian 11

Expected behaviour

video in app should repeated in cycle

Screenshots

No response

Attempted Fixes

No response

System Details

Wails CLI v2.0.0-beta.43

Scanning system - Please wait (this may take a long time)...Done.

System
------
OS:		Debian GNU/Linux
Version: 	11
ID:		debian
Go Version:	go1.18.4
Platform:	linux
Architecture:	amd64

Wails
------
Version: 		v2.0.0-beta.43
Package Manager: 	apt

Dependency	Package Name		Status		Version
----------	------------		------		-------
*docker		docker.io		Available	20.10.5+dfsg1-1+deb11u2
gcc		build-essential		Installed	12.9
libgtk-3	libgtk-3-dev		Installed	3.24.24-4+deb11u2
libwebkit	libwebkit2gtk-4.0-dev	Installed	2.36.4-1~deb11u1
npm		npm			Installed	6.14.13
*nsis		nsis			Available	3.06.1-1
pkg-config	pkg-config		Installed	0.29.2

* - Optional Dependency

Diagnosis
---------
Your system is ready for Wails development!
Optional package(s) installation details: 
  - docker: sudo apt install docker.io
  - nsis: sudo apt install nsis

Additional context

No response

[leaanthony]

@lyimmi - is this the same as your bug?

[lyimmi]

Could be, I'll check it out tonight!

[lyimmi]

Okay, it seems to be a codec issue of some sort.

If I change the video source to webm it works just fine. webem video
I'm also using the "ended" event, but I'm working with webms exclusively in my project, that's why I haven't ran into this.

It looks like chromium had this issue as well, but they fixed it, can't find anything on WebKitGTK though.

However, one of the suggestion works from the bug report. Not as nice, but its a fix.

videoTag.addEventListener("timeupdate", (event) => {
    if(event.target.duration - event.target.currentTime < 0.2) {
        let ended = new Event("ended");
        event.target.dispatchEvent(ended);
    }
})

[leaanthony]

Thanks for checking @lyimmi 🙏 I was hoping this might help you with your issue.

@kspiridonov looks like there's a workaround for this. WebkitGTK appears to have a few issues around video tags.

[lyimmi]

@leaanthony not a problem, seems like we have to jump through some hoops with WebkitGTK, otherwise it would be boring. 😅

[leaanthony]

If you don't want boring, try compiling WebKit 😜

[kspiridonov]

@leaanthony @lyimmi thank you for quick response :). It seems workaround works. As about compiling WebKitGTK - may be i'll try...next time :))

[leaanthony]

Added docs here: https://wails.io/docs/next/guides/linux#video-tag-doesnt-fire-ended-event
Thanks for your help and testing 🙏