I'm trying to embed a video via the html5-tag into a responsive webpage. My problem is that the width of the video ranges from 390 pixel (small mobile) to 4096 pixel (4K-display, fullscreen-mode), and it seems the video-tag doesn't support multiple sources for multiple resolutions. I decided to go with hd-resolution (width 1960 pixel) for all screen-sizes, but this results in strong artefacts on edges in Firefox for example when the video is embeded in a page on a 4K-display even with the width of 780px.
Any ideas what do to about it? Is there any javascript-videoplayer which might handle that?
Most HTML5 video players will support Adaptive Bit Rate Streaming (ABR) streaming.
With ABR you create multiple bit rate versions of the video on the server, each broken into chunks. They player decides which resolution to download the next chunk of the video from based on a number of factors, typically including network conditions and device display size and capabilities.
More info on ABR here: https://stackoverflow.com/a/42365034/334402
Additionally, HTML5 Video players typically offer a way to adapt to different width containers also.
Looking at VideoJS for example, it offers Fluid mode and Fill mode. Fluid will keep the video sized to respect a given aspect ratio and fill with expand the video to fill the container. See here for detail:
Enabling the options is straighforward - for example the below sets fluid mode with an aspect ratio of 1:1 and responsive controls, based on the examples in the link above:
var player = videojs('vid2');
//Set fluid mode
player.fluid(true);
//Set aspect ratio - 1:1 is square in this example
player.aspectRatio('1:1');
//Set UI to be responsive
player.responsive(true);
The above link includes notes on making the video control responsive also so they don't look disproportionate to the display size.
The combination of the player auto sizing and the player choosing the best possible resolution for the current size and network should enable you to get the best quality you can on different size displays, providing, of course, you have the resolutions available.