前端vue播放m3uflv、mp4视频的方法_vue mp4，2024年最新面试

在Vue中播放m3u8、flv和mp4视频，可以使用第三方库如video.js。以下是一个简单的例子：

1. 安装video.js：

npm install video.js

2. 在Vue组件中引入并使用video.js：

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
  </div>
</template>
 
<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
 
export default {
  name: 'VideoPlayer',
  props: {
    source: {
      type: String,
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      sources: [{
        src: this.source,
        type: this.type
      }],
      // 其他video.js选项
    }, function onPlayerReady() {
      console.log('Player is ready');
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>
 
<style>
.video-js .vjs-tech {
  width: 100%;
  height: auto;
}
</style>

3. 使用组件时指定视频源和类型：

<template>
  <div>
    <video-player :source="videoSource" :type="videoType"></video-player>
  </div>
</template>
 
<script>
import VideoPlayer from './VideoPlayer.vue';
 
export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      videoSource: 'https://your-video-source.m3u8', // 或者 'http://your-video-source.flv', 'http://your-video-source.mp4'
      videoType: 'application/x-mpegURL' // 对于m3u8，对于flv应该是 'video/x-flv', 对于mp4应该是 'video/mp4'
    };
  }
};
</script>

确保你的视频源允许跨域访问，如果需要的话，你可能需要配置你的服务器以发送正确的CORS头部。对于m3u8视频，确保你的服务器支持HLS流媒体。对于flv视频，确保你的服务器配置了正确的MIME类型。