在 HTML5 中找不到此媒体类型 = video/mpeg 的兼容源

Question

所以我尝试使用 vue-video-player 在我的模态上制作视频播放器，所以下面是我的 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>

props videoSource 数组是

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

如您所见，如果 videoSource 属性以 mp4 / mov 格式传递 src 值，这些代码可以正常工作，但如果 videoSource 的 src 和类型是 mpeg，则这些代码将不起作用。

我也尝试过这个方法但是没用。

任何人请帮我提供有关在 HTML5 中播放 mpeg 格式视频的库或插件的参考信息。提前谢谢大家，爱你们。

Answer 1

您可以尝试的一件事是将 mpeg 视频转换为 HTML5 更广泛支持的其他格式，例如 mp4、webm 或 ogg。您可以使用商业或开源工具来执行此操作，然后将转换后的视频上传到您的网络服务器。然后，您可以在标签内使用多个标签来提供同一视频的不同格式供浏览器选择。例如，你可以这样做：

<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>

这样，您可以确保您的视频播放器可以在任何支持 HTML5 的浏览器中播放视频。您可以通过以下链接了解有关 HTML5 视频格式以及如何将它们嵌入到 HTML 中的更多信息：HTML 视频 - W3Schools 和 HTML 视频 - 如何使用 HTML 5 视频标签嵌入视频播放器。

Answer 2

您可以尝试的另一件事是使用可以在 HTML5 中播放 mpeg 视频的 JavaScript 库或插件。有一些库可以执行此操作，例如 MediaElement.js、Video.js 或 Plyr。这些库可以提供自定义视频播放器，可以处理不同的视频格式和编解码器，并添加字幕、字幕、播放列表等功能。您可以使用 npm 或 CDN 安装这些库，然后在 Vue 组件中使用它们。例如，你可以这样做：

<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>

这样，您就可以使用库或插件来播放 HTML5 中的 mpeg 视频。您可以通过以下链接了解有关这些库以及如何在 Vue 组件中使用它们的更多信息：[MediaElement.js]、[Video.js] 和 [Plyr]。

我希望这可以帮助您了解如何使用 vue-video-player 在 HTML5 中播放 mpeg 视频。