To implement M3U8 video playback in your Vue application, you'll need to use the Video.js library with the HLS plugin. Follow these steps:

1. First, install the required packages:

npm install video.js @videojs/http-streaming --save

2. Import the necessary modules in your component:

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import '@videojs/http-streaming';

3. Create a video player component:

<template>
  <div class="video-container">
    <video
      id="mediaPlayer"
      class="video-js vjs-default-skin"
      controls
      playsinline
      autoplay
      width="600px"
      height="400px"
    >
      <source :src="videoSource" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import '@videojs/http-streaming';

export default {
  data() {
    return {
      mediaPlayer: null,
      playerConfig: {
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        aspectRatio: '16:9',
        fluid: true,
        notSupportedMessage: 'This video cannot be played. Please try again later.',
        autoplay: true,
        muted: true,
        preload: 'auto',
        controls: true,
      },
      videoSource: 'https://your-video-source.m3u8',
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initializePlayer();
    });
  },
  methods: {
    initializePlayer() {
      this.mediaPlayer = videojs('mediaPlayer', this.playerConfig);
      
      // Alternative method to set video source
      // this.mediaPlayer.src({
      //   src: this.videoSource,
      //   type: 'application/x-mpegURL'
      // });
    },
  },
  beforeDestroy() {
    if (this.mediaPlayer) {
      this.mediaPlayer.dispose();
    }
  },
};
</script>

<style scoped>
.video-container {
  max-width: 800px;
  margin: 0 auto;
}

/* Center the play button */
::v-deep .video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

Implementing FLV Video Playback

For FLV video format playback, we'll use the flv.js library, which is a pure JavaScript implementation without Flash dependency, oriignally developed by Bilibili.

1. Install the package:

npm install flv.js --save

2. Import and implement the player:

<template>
  <div class="flv-player-container">
    <video
      id="flvPlayer"
      ref="flvElement"
      controls
      autoplay
      muted
      width="100%"
      height="500px"
    ></video>
  </div>
</template>

<script>
import flvjs from 'flv.js';

export default {
  data() {
    return {
      flvInstance: null,
      videoUrl: 'https://your-flv-video-source.flv',
    };
  },
  mounted() {
    this.setupFlvPlayer();
  },
  methods: {
    setupFlvPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.flvElement;
        
        this.flvInstance = flvjs.createPlayer(
          {
            type: 'flv',
            isLive: false,
            hasAudio: true,
            url: this.videoUrl,
          },
          {
            cors: true,
            enableWorker: true,
            enableStashBuffer: true,
            stashInitialSize: 256,
            autoCleanupSourceBuffer: true,
            lazyLoad: true,
            lazyLoadMaxDuration: 3 * 60,
            lazyLoadRecoverDuration: 30,
            deferLoadAfterSourceOpen: true,
            autoCleanupMaxBackwardDuration: 3 * 60,
            autoCleanupMinBackwardDuration: 2 * 60,
          }
        );
        
        this.flvInstance.attachMediaElement(videoElement);
        this.flvInstance.load();
        
        // Set up event listeners
        this.setupEventListeners();
        
        // Start playback
        this.flvInstance.play().catch(err => {
          console.error('Playback failed:', err);
        });
      } else {
        console.error('FLV is not supported in this browser');
      }
    },
    
    setupEventListeners() {
      // Error handling
      this.flvInstance.on(flvjs.Events.ERROR, (errorType, errorDetail) => {
        console.error('FLV Player Error:', errorType, errorDetail);
        
        // Attempt to recover from errors
        if (this.flvInstance) {
          this.destroyFlvPlayer();
          setTimeout(() => {
            this.setupFlvPlayer();
          }, 2000);
        }
      });
      
      // Other useful events
      this.flvInstance.on(flvjs.Events.LOADING_COMPLETE, () => {
        console.log('Video loading complete');
      });
      
      this.flvInstance.on(flvjs.Events.MEDIA_INFO, (mediaInfo) => {
        console.log('Media info:', mediaInfo);
      });
    },
    
    destroyFlvPlayer() {
      if (this.flvInstance) {
        this.flvInstance.pause();
        this.flvInstance.unload();
        this.flvInstance.detachMediaElement();
        this.flvInstance.destroy();
        this.flvInstance = null;
      }
    },
  },
  beforeDestroy() {
    this.destroyFlvPlayer();
  },
};
</script>

<style scoped>
.flv-player-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
</style>

MP4 Video Playback

For MP4 videos, you can use the native HTML5 video element without additional libraries:

<template>
  <div class="mp4-container">
    <video
      ref="mp4Player"
      controls
      :poster="videoPoster"
      width="100%"
      @loadeddata="onVideoLoaded"
      @error="onVideoError"
    >
      <source :src="mp4Source" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mp4Source: 'https://your-mp4-video-source.mp4',
      videoPoster: 'https://your-poster-image.jpg',
    };
  },
  methods: {
    onVideoLoaded() {
      console.log('MP4 video loaded successfully');
    },
    onVideoError(event) {
      console.error('Error loading MP4 video:', event);
    },
  },
};
</script>

<style scoped>
.mp4-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
</style>