WIP: Add media failed animation

[erdnaxe]

Proposal for #87.

Some notes:

• I propose to put the animation inside a SVG element to make it easier to tweak in the future. This also prevent the need for more HTML elements.
• This PR is not working as the loading animation is put in background (behind the video stream). To put an image on top of a video, it seems that we need to add another element as <video> does not seem to support ::before CSS modifier.

Is it problematic if we add an element next to <video> to place this animation?

[jech]

I'm not very keen on animations, they tend to use a suprisingly large amount of CPU time when they're many of them. But I'm quite open to such a change if we verify that the CPU time is not too large.

[jech]

@erdnaxe, just to let you know that I am interested in this patch, and I'm keenly waiting for you to find the right approach.

[erdnaxe]

I am not convinced by the solution I proposed here. Maybe we could avoid showing something on the whole video and rather use div.top-video-controls to show an element when the media is failing.

What do you think of displaying an element in div.top-video-controls when the media is failing? Do you want something more visible?

Proposition of layout, both media are failing, but on the left I am hovering with my mouse:

(I made this screenshot using the Web inspector and adding a SVG element in the top controls, I can patch the JS if it turns out to be what we want.)

[jech]

I fear it's not visible enough. Think about the usage scenario: you are giving a lecture, and suddenly your connection has an issue. You want to notice it straight away.