Add video previews and image thumbnails for examples

[aglitchman]

Information through graphics is understood much better than pure text.

It would be great if it were technically possible to design the examples directory with pictures and automatically playing videos if they are in the browser viewport:

• https://developer.playcanvas.com/tutorials/
• https://phaser.io/examples/v3.85.0/actions

Something like:

PS I am ready to make videos and pictures for all examples!

[britzl]

I agree. This would be a nice improvement!

[aglitchman]

Plus, the URL of the image should be added to opengraph metadata of the page for nice previews, not generic as now:

[aglitchman]

Can we use webp for images and webm for videos? It's about time they are supported everywhere and in any OS they can be viewed normally, like png/jpg.

WebM with VP9 codec for videos - https://caniuse.com/?search=webm
WebP for thumbnails - https://caniuse.com/?search=webp
And use https://squoosh.app/ for image compression.

[britzl]

Plus, the URL of the image should be added to opengraph metadata of the page for nice previews, not generic as now:

This has been added now. If an example has a thumbnail it will be used for the opengraph metadata.

[britzl]

Can we use webp for images and webm for videos?

Sure, I don't see why not!