Видео. js с Vue. js (MPEG-DA SH) ОШИБКА: (КОД: 4 MEDIA_ERR_SRC_NOT_SUPPORTED) - PullRequest
Новая
       117

Видео. js с Vue. js (MPEG-DA SH) ОШИБКА: (КОД: 4 MEDIA_ERR_SRC_NOT_SUPPORTED)

1 голос
/ 09 мая 2020

У меня проблема с видео. js я использую его как компонент в vue. js. Я получаю ссылку .mpd с сервера, и я хочу показать видео по ссылке, мне понравился пример в документации Видео. js и Vue интеграция .

всегда при первом вызове VideoPlayer показывал ошибку:

VIDEO JS: ERROR: (CODE: 4 MEDIA_ERR_SRC_NOT_SUPPORTED) Для этого носителя не был найден совместимый источник.

Когда я go выхожу на предыдущую страницу, а затем снова в VideoPlayer, это работает. (также не работает, когда я обновляю sh страницу)

Ps: я использую vuex для получения всех данных с сервера.

Вот мой код для Stream. vue: 

<template>
    <div class="container">
        <h1 class="text-center">MediaPlayer for: {{ mediaName }}</h1>
        <video-player :options="videoOptions" />
   </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import VideoPlayer from "@/components/VideoPlayer.vue";
export default {
    name: "Stream",
    props: ["stream_id", "source"],
    components: {
        VideoPlayer
    },
    created() {
        this.fetchStream(this.stream_id);
    },
    computed: {
        ...mapState("stream", ["stream", "mediaName"]),
        videoOptions() {
            return {
                autoplay: false,
                controls: true,
                sources: [
                    {
                      src:  this.stream.stream_link,
                      type: "application/dash+xml"
                    }
                ],
                poster:"http://placehold.it/380?text=DMAX Video 2"
            };
        }
     },
     methods: {
         ...mapActions("stream", ["fetchStream"])
    }
  };
</script>

<style scoped></style>

и вот VideoPlayer. vue: 

<template>
    <div>
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script>
  import videojs from "video.js";
  export default {
    name: "VideoPlayer",
    props: {
      options: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data() {
      return {
        player: null
      };
    },
    mounted() {
      this.player = videojs(
              this.$refs.videoPlayer,
              this.options,
              function onPlayerReady() {
                console.log("onPlayerReady", this);
              }
      );
    },
    beforeDestroy() {
      if (this.player) {
        this.player.dispose();
      }
    }
  };
</script>

1 Ответ

0 голосов
/ 26 июня 2020

Я нашел, как решить эту проблему. Проблема заключалась в том, что сначала будет отрисован VideoPlayer, а затем он попытался получить ссылку из магазина.

Как решить эту проблему: вы должны попытаться получить ссылку до визуализации VideoPlayer, я сделал другой компонент VueVideoPlayer . В этом компоненте я выполняю все запросы и жду, пока не получу всю информацию, а затем вызываю компонент VideoPlayer. vue и передаю параметры как реквизиты.

VueVideoPlayer. vue 

<template>
  <div>
      <div v-if="loading">
      <div class="text-center">
        <div
           class="spinner-border m-5 spinner-border-lg"
           style="width: 3rem; height: 3rem;  border-top-color: rgb(136, 255, 24);
                                                              border-left-color: 
                                                               rgb(136, 255, 24);
                                                              border-right-color: 
                                                              rgb(136, 255, 24);
                                                              border-bottom-color: 
                                                              rgb(97, 97, 97); "
            role="status"
        >
          <span class="sr-only">Loading...</span>
         </div>
       </div>
     </div>
    <div v-else>
      <video-player :options="videoOptions" />
    </div>
   </div>
 </template>

 <script>
 import VideoPlayer from "@/components/VideoPlayer.vue";
 import StreamsServices from "../services/StreamsServices";
 import NProgress from "nprogress";
 import CookieService from "../services/CookieSerice";


 export default {
   name: "VueVideoPlayer",
   components: {
     VideoPlayer
   },
   data() {
     return {
      player: null,
      stream_link: "",
      loading: false
    };
  },
  created() {
    this.loading = true;
    NProgress.start();
     StreamsServices.getStream(this.stream_id, this.settings)
      .then(response => {
        this.stream_link = response.data.stream_link;
      })
      .finally(() => {
        NProgress.done();
        this.loading = false;
        this.keepAlive();
        this.interval = setInterval(this.keepAlive, 20000);
      });
  },
  props: ["stream_id", "settings"],
  computed: {
    videoOptions() {
      return {
        autoplay: false,
        controls: true,
        sources: [
          {
            src: this.stream_link,
            type: "application/dash+xml"
          }
        ],
        poster: "http://placehold.it/380?text=DMAX Video 2"
      };
    }
  },
  methods: {
    keepAlive() {
      CookieService.getToken().then(token => {
        StreamsServices.postKeepAlive({
          token: token,
          audiopreset: this.settings.videoPresetId,
          videopreset: this.settings.audioPresetId,
          transcodedVideoUri: this.stream_link
        }).then(() => {});
      });
    }
  }
};
</script>

PS: здесь я не использовал хранилище / поток. js, я направил запрос с помощью StreamsServices.

...