No compatible source was found for this media for type = video/mpeg in HTML5

So I tried to make a video player on my modal using vue-video-player, so below is my template code for the ModalDetailMediaVideo.vue

<template>
<div @keydown.esc="modalClosed()" @click="modalClosed()" class="modal fade" id="modalMediaVideo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div  class="modal-dialog modal-dialog-centered modal-lg justify-content-center">
        <div class="layout-video">
            <video-player 
            ref="videoPlayer"
            class="vjs-custom-skin vjs-layout-small"
            :options="playerOptions"
            :aspectRatio="'9:16'"
            @play="onPlayerPlay($event)"
            @ready="onPlayerReady($event)"
            @pause="onPlayerPause($event)"
            >
         </video-player>   
        </div>
              
        </div>
</div>

<script>

import { videoPlayer } from 'vue-video-player';

export default {
  props: {
    videoSource: {
            type: Array,
            default: function() {
                return [];
            }
          }
  },
  components: {
    videoPlayer
  },
  data () {
    return {
      playerOptions: {
        mute: true,
        controls: true,
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        sources: this.videoSource
      },
      isPlaying: false
    }
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    onPlayerPlay (player) {
      console.log('player play!', player)
      this.isPlaying = true;
    },
    onPlayerReady (player) {
      console.log('player ready!', player)
      this.player.play()
    },
    onPlayerPause (player) {
        this.player.pause();
        this.isPlaying = false;
    },
    modalClosed(player){
        if(this.isPlaying == true){
            this.player.pause();
        }
    }
  },
  watch: {
    videoSource: function(){
        console.log(this.videoSource, "INSIDE WATCHER")
        this.playerOptions.sources = this.videoSource;
        this.playerOptions.sources[0].type = 'video/mp4';
        this.isPlaying = false;
    }
  }
}
</script>

the props videoSource array is

videoSource = { 
                src: '',
                type: ''
              }

As you can see these code work just fine if the videoSource props passing src value in mp4 / mov format, but it will not work if the src and type of the videoSource is mpeg.

I also have tried this method but it didn't work.

Anyone please help me with any references for the library or plugin for playing video in mpeg format in HTML5. Thanks in advance love you all.

One thing you can try is to convert your mpeg videos to other formats that are more widely supported by HTML5, such as mp4, webm, or ogg. You can use commercial or open source tools to do this, and then upload the converted videos to your web server. Then, you can use multiple tags inside your tag to provide different formats of the same video for the browser to choose from. For example, you can do something like this:

<video-player 
  ref="videoPlayer"
  class="vjs-custom-skin vjs-layout-small"
  :options="playerOptions"
  :aspectRatio="'9:16'"
  @play="onPlayerPlay($event)"
  @ready="onPlayerReady($event)"
  @pause="onPlayerPause($event)"
>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video-player>

This way, you can ensure that your video player can play the video in any browser that supports HTML5. You can learn more about HTML5 video formats and how to embed them in your HTML from these links: HTML Video - W3Schools and HTML Video – How to Embed a Video Player with the HTML 5 Video Tag.