No compatible source was found for this media

Question

Get that error when try to get stream from any HLS source.

I tried to add videojs-contrib-hls lib , but its dont help. Maybe should i try some other player, and what player will properly work with hls sources?

<script>
  import 'video.js/dist/video-js.css'
  import {videoPlayer} from 'vue-video-player'
  import videojs from 'video.js'
  window.videojs = videojs

  export default {
    components: {
      videoPlayer
    },
    data () {
      return {
        playerOptions: {
          height: '700',
          width: '1820',
          controls: true,
          sourceOrder: true,
          hls: true,
          sources: [{
            // type: "video/mp4",
            type: "application/x-mpegURL",
            // src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
            src: "http://127.0.0.1:8081/live/93UEctBmn/index.m3u8",
            withCredentials: false,
          }],
          autoplay: false,
        },
        techOrder: ['html5'],
        html5: { hls: { withCredentials: false } },

        contentData: {}
      }
    },
  
    
    mounted() {
      this.$store.dispatch("content/getById", this.$route.params.contentId).then(
          (res) => {
              // this.message = data.message;
              // this.snackbar = true;
              if(res.data.error){
                  console.log(res.data.error);
                  return;
              }
              this.contentData = Array.isArray(res.data) ? res.data[0] : res.data;
          },
          (error) => {
          // this.message = error.response.data.message || error;
          //     this.snackbar = true;
          console.log(error)
          }
        );
    }
  }
</script>

<template>
    <div class="content">

        
       
        <div class="content-player">
            <video-player class="vjs-custom-skin videoPlayer" :options="playerOptions" ></video-player>
        </div>

        <div class="content-info">
            <div class="content-info_title">
            {{contentData.streamTitle || 'loading'}}
            </div>
        </div>
        <v-divider></v-divider>
         <div class="content-author">
            <div class="content-author_avatar">
            <v-avatar
                size="56"
            >
                <v-img
                :src="'https://diploma-rtmp-bucket.s3.eu-central-1.amazonaws.com/'+contentData.author[0]._id || ''"
              ></v-img>
            </v-avatar>
            </div>
            <div class="content-author_name">
                {{contentData.author[0].username || 'undefined username'}}
            </div>
        </div>
        

    </div>
  
</template>

Here is my page code. Can it be becouse of some CORS troubles?. I run it player on local machine

Answer 1

I used another player vue-vjs-hls. On this player hls work good, dont now why hls source not works at vue-video-player and video.js. What strange becouse vue-vjs-hls use video.js as core.