Question 299235 in Html Question posted in
Some basic documentation can be found here.

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Another thing you can try is to use a JavaScript library or plugin that can play mpeg videos in HTML5. There are some libraries that can do this, such as MediaElement.js, Video.js, or Plyr. These libraries can provide a custom video player that can handle different video formats and codecs, as well as adding features like subtitles, captions, playlists, etc. You can install these libraries using npm or CDN, and then use them in your Vue component. For example, you can do something like this:

    <template>
  <div class="layout-video">
    <video id="video" class="video-js vjs-default-skin vjs-layout-small" controls preload="auto" width="640" height="360">
      <source src="video.mpeg" type="video/mpeg">
    </video>
  </div>
</template>

<script>
import videojs from 'video.js';

export default {
  mounted() {
    // initialize the video player
    this.player = videojs(this.$refs.video, this.options, function onPlayerReady() {
      console.log('onPlayerReady', this);
    });
  },
  beforeDestroy() {
    // destroy the video player
    if (this.player) {
      this.player.dispose();
    }
  },
  data() {
    return {
      player: null,
      options: {
        // video player options
      }
    };
  }
};
</script>

    This way, you can use a library or plugin to play mpeg videos in HTML5. You can learn more about these libraries and how to use them in your Vue component from these links: [MediaElement.js], [Video.js], and [Plyr].

    I hope this helps you understand how to play mpeg videos in HTML5 using vue-video-player.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search