I was doing some experiments on this and found that the video will start working when we do pause and play.

   const rVideo = document.getElementById("videoElement");
    if (rVideo) {
      rVideo.pause();
      rVideo
        .play()
        .then((res) => {
          console.log("playing start", res);
        })
        .catch((err) => {
          console.log("error playing", err);
        });
    }

It's not a perfect solution but a workaround to make it work.

You can fix the black screen by using setTimeout as follows:

this.video.pause();
setTimeout(() => {
    this.video.play().then((res) => {
        console.log("playing start", res);
    })
    .catch((err) => {
        console.log("error playing", err);
    });
}, 0);

Just wrap the video tag in div. I'm guessing that you positioned your video tag absolute or fixed. There seems to be a bug with that. Positioning the wrapper div fixed/absolute instead of the video element seems to help. It might also help to give the video element a background-color.

To be correctly served on iOS devices, the videos must be able to be requested even partially as specified by Apple. Therefore the 'byte-range support' must be enabled on the server on which they are hosted: https://discussions.apple.com/thread/4119538?page=2

Because of the number of complaints there have been of iPhones not being able to play some podcasts, Apple now require the server you host your media files on to have 'byte-range support' enabled - basically this means coping with requests for only part of a file at a time, which is required for the iPhone. You should confirm with your hosting service that they support this: if they don't (or don't know what it is) you should find another hosting service.

Also if you are using Cloudflare as a CDN service, and gzip compression is enabled on the server the 'Accept-Ranges' header is not forwarded by Cloudflare and the videos are not properly served: https://community.cloudflare.com/t/accept-ranges-and-content-length-headers-not-forwarded-by-cloudflare/41445/4

Therefore there are two solutions:

1. Completely disable gzip compression on the server.
2. Enable gzip compression on the server and add SetEnvIfNoCase Request_URI \.mp4$ no-gzip dont-vary## Heading ## to the .htaccess file so as not to compress .mp4 files. The solution is applicable for any video format.