找不到此媒体的兼容来源

问题描述

尝试从任何 HLS 源获取流时出现该错误。

我尝试添加 videojs-contrib-hls lib ，但它没有帮助。 也许我应该尝试其他播放器，哪个播放器可以正确使用 hls 源？

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

这是我的页面代码。可能是因为一些 CORS 问题吗？我在本地机器上运行播放器

解决方法

我使用了另一个播放器 vue-vjs-hls。在这个播放器上 hls 运行良好，现在不知道为什么 hls 源在 vue-video-player 和 video.js 上不起作用。有什么奇怪的，因为 vue-vjs-hls 使用 video.js 作为核心。