<template>
    <div class="video-container">
      <video ref="video" controls autoplay></video>
    </div>
  </template>
  
  <script>
  import Hls from 'hls.js';
  
  export default {
    props: {
      videoUrl: {
        type: String,
        required: true,
      },
    },
    mounted() {
      const video = this.$refs.video;
  
      if (Hls.isSupport()) {
        const hls = new Hls();
  
        hls.loadSource(this.videoUrl);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          video.play();
        });
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = this.videoUrl;
        video.addEventListener('loadedmetadata', () => {
          video.play();
        });
      }
    },
  };
  </script>
  
  <style scoped>
  .video-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  video {
    width: 100%;
    max-width: 800px;
  }
  </style>