Проект Nuxt/Vue с использованием видеоплеера Brightcove не имеет звука в ie11

avatar
hendy0817
1 июля 2021 в 17:21
269
0
1

Я использую NUXT / Vue вместе с видеоплеером Brightcove, который работал у меня в прошлом с очень небольшим количеством проблем. Сегодня я заметил, что мои видео воспроизводятся, но НЕТ ЗВУКА в ie11. Видео отлично работает в любом другом браузере, который я тестировал, кроме ie11.

Я не вижу никаких ошибок в ie11, но есть несколько предупреждений, с которыми я не знаком, и я надеюсь, что они как-то связаны с отсутствием звука и могут дать мне какое-то направление для решения:

VIDEOJS: WARN: Invalid playlist STREAM-INF detected. Missing BANDWITH attribute
VIDEOJS: WARN: player.dash() is deprecated. Use player.tech().vhs instead
VIDEOJS: WARN: player.hls is deprecated. Use player.tech().vhs instead
VIDEOJS: WARN: player.vhs is deprecated. Use player.tech().vhs instead
<template>
  <div id="video-component">
    <div class="container--content__full-width-mobile">
      <div class="video-headline font--primary font--bold">
        <slot name="videoHeadline"></slot>
      </div>
      <div
        class="container--video-player"
        :class="{ 'container--video-player__inline': videoInline }"
      >
        <div ref="playerElement" :id="playerId" class="video-player"></div>
        <div v-if="hasTranscript" class="transcript-accordion bg--primary">
          <div
            class="accordion"
            :key="accordion"
            v-for="(row, accordion) in accordionRows"
          >
            <div
              class="accordion-title"
              v-on:click="
                row.open = !row.open;
                rotateIcon = !rotateIcon;
              "
            >
              <div class="l-accordion-title">
                <p>Reveal Video Transcript</p>
                <i
                  class="fas fa-chevron-down transition-fast"
                  :class="{ rotateIcon }"
                  aria-hidden="true"
                ></i>
              </div>
              <!-- /.l-accordion-title -->
            </div>
            <div class="accordion-content" v-if="row.open">
              <slot name="videoTranscript"></slot>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import video from "~/mixins/video/videos.js";
export default {
  name: "VideoPlaylist",
  mixins: [video],
  props: {
    videoInline: {
      type: Boolean,
      required: false,
      default: false
    },
    videoId: {
      type: String,
      required: true
    },
    hasTranscript: {
      type: Boolean,
      required: false
    },
    autoPlay: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data() {
    return {
      accordionRows: {
        videoTranscript: {
          open: false
        }
      },
      rotateIcon: false
    };
  },
  computed: {
    playerId() {
      return `videoPlayer_${this._uid}`;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$brightcovePlayerLoader({
        refNode: `#${this.playerId}`,
        accountId: "2272822669001",
        playerId: "DMcAHJ5QL",
        embedId: "default",
        videoId: this.videoId,
        options: {
          aspectRatio: "16:9",
          autoplay: this.autoPlay
        }
      }).then(data => {
        console.log(`[VideoPlayer.vue] init player.then data:`);
        console.log(data);
      });
    });

    this.stopVideo();
  }
};
</script>
Источник

Ответы (0)