useMediaControls: Unable to catch error event

[cawa-93]

vueuse/packages/core/useMediaControls/index.ts

Lines 352 to 360 in ecd6496

	// Add new sources
	sources.forEach(({ src, type }) => {
	const source = document.createElement('source')
	source.setAttribute('src', src)
	source.setAttribute('type', type || '')
	el.appendChild(source)
	})

If you use an unavailable source, the browser will throw an error event. But not on the <video> tag, but on one of the <source> tags (This behavior may be different between browsers, I did not conduct a thorough study). It is important to keep track of such errors. But because the '` elements are inserted implicitly outside the template, there is no easy way to add listener events to them.

The only workaround I've found is to insert <source> tags into the template explicitly, and not pass src param to useMediaControls.

[wheatjs]

Hmm, that's a good point. Maybe we can return something like const { onSourceError } = useMediaControls() that would fire whenever there is an error. I don't quite remember how to create functions like that but I know it is possible.

Perhaps you have another idea on how we could handle it though?

[wheatjs]

Of course we could also just introduce it as a config option. Not sure which option would be preferable tbh

useMediaControls(video, {
  onSourceError(e) {
  
  }
})