Is there any responsive video player for html5, that can play all or most formats?

The formats supported by the browser do not depend on the player you use but on the support that browsers give to the formats. Currently mp4 is the most supported with the H.264 and MP3 codecs , see the article Formats supported by browsers so what is usually done is to specify several formats in the tag videoso that fallback can be done in case of that some of them cannot be used which can be done with the element<source>

<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
    <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
    <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
    <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
    Your browser doesn't support HTML5 video tag.
</video>

In general, when none is supported or HTML5 is not available, what is done is to use plugins to be able to play, which is usually done with Flash and applets, but it has the disadvantage that if these are not installed, it will not work anyway.

Personally, I have used the video.js plugin with very good results because it allows you to have a uniform experience between browsers, you can even install it with bower

bower install --save video.js

To use it, an HTML5 video tag is used just as if you were to use the native form

<link href="https://vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/5.4.6/video.min.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" data-setup='{"example_option":true}'>
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4" />
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm" />
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg" />
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

The video js takes care of the playback and the look and feel of the player, which is customizable and looks identical in all browsers!!! .

It also has a very good feature and that is that it supports plugins so if you have any special needs in your business logic you can use one of the ones that are already there or write your own.

Following the asker's comments, I suggest the following:

I just finished a RWD with video wallpaper (Background Fullsreen HTML5), from it I learned the following which I share my annotations.

Each browser plays HTML5 video in its own way and it will depend on the age of the browser and the codec installed on the browser's device. The older the browser the reproduction is worse. The order of the video formats that you want to present is important and will depend on the quality of the video you have. Here is some HTML5 video embed code:

<div id="fullscreen-bg">
    <video id="bg-video" autoplay poster="images/home-video-poster.jpg" loop>
        <source src="videos/home-intro.webm" type="video/webm" />
        <source src="videos/home-intro.mp4" type="video/mp4" />
        <source src="videos/home-intro.ogv" type="video/ogg" />
        <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/3gpp" />
        <object type="application/x-shockwave-flash" data="videos/flashfox.swf" width="1280" height="720" style="position:relative;">
            <param name="movie" value="videos/flashfox.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="flashVars" value="autoplay=true&amp;controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=true&amp;poster=images/home-video-poster.jpg&amp;src=videos/home-intro.m4v" />
            <embed src="videos/flashfox.swf" width="1280" height="720" style="position:relative;" flashVars="autoplay=true&amp;controls=true&amp;fullScreenEnabled=true&amp;posterOnEnd=true&amp;loop=true&amp;poster=images/home-video-poster.jpg&amp;src=videos/home-intro.m4v" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
            <img alt="Video playback is not supported by your browser" src="images/home-video-poster.jpg" style="position:absolute;left:0px;width:100%;" title="Video playback is not supported by your browser" />
        </object>
    </video>
</div>

For Responsive Web Design (RWD), you would have to use your programming skills or help with external plugins such as EasyHTML5Video .

Here I show you the browser support according to codec:

Nevertheless; Although we make a lot of effort to give the best to the visitor, in the end you might realize that it would be better to upload the video to YouTube and from there play it through its API . Since the YouTube player will serve the video according to the browser's characteristics. user, either by screen size, diameter, codex, resolution, etc.

Here an example:

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'ab0TSkLe-E0',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

In order not to write a lot of code, you can help yourself with Media Element by writing just this:

<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />

I think I am giving you enough information to help you in your project. The thing about RWD is design, it uses CSS2.1+ with HTML5+

Cheers