找不到此媒体的兼容来源

Question

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

我尝试添加 videojs-contrib-hls 库，但没有帮助。也许我应该试试其他播放器，哪个播放器可以正常使用 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 问题？我运行它在本地机器上播放

Answer 1

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

找不到此媒体的兼容来源

No compatible source was found for this media

vue.js

http-live-streaming

video.js