Блог

Я хочу получить значение «currentSrc» из объекта video. Это мой код

 mounted: function () {
    this.$nextTick(function () {
      console.log(document.getElementById('video').currentSrc)
    });
  },
 

Что бы я ни делал, я всегда получаю <empty string> ответ . Что довольно странно из-за того, что, когда я это делаю:

 mounted: function () {
    this.$nextTick(function () {
      console.log(document.getElementById('video'))
    });
  },
 

Я получаю в консоли этот объект с правильным атрибутом currentSrc.

Я пытался использовать created(), ссылки, перенаправление страницы путем изменения значения ключа элемента и даже тайм-аута, но всегда получал <empty string> в результате. Когда я попытался выполнить @load на видеоэлементе, это просто не работает вообще.

Есть ли какой-либо способ получить значения объектов сразу после отображения страницы?

В вашем первом фрагменте кода <video>.currentSrc еще не задано, когда вы пытаетесь его зарегистрировать, так как видео загружается асинхронно. Второй фрагмент просто регистрирует сам <video> элемент, который консоль браузера автоматически обновляет при изменении, поэтому вы видите currentSrc заполненным.

<video> Элемент сначала должен загрузить метаданные видео из источника, прежде чем будут доступны какие-либо свойства данных, и при этом он выдает loadedmetadata событие. Вы могли бы прослушать это событие в своем mounted крючке:

 export default {
  mounted: function() {
    this.$nextTick(() => {
      const video = document.getElementById('video')
      video.addEventListener("loadedmetadata", function() {
        console.log('currentSrc', video.currentSrc);
      });
    });
  }
}
 

Если на вашем сайте потенциально было более одного <video> элемента с id оф "video" (например, на странице было несколько компонентов Vue, содержащих это <video> ), было бы лучше получить ссылку на предполагаемый элемент с помощью ссылки на шаблон:

 <template>
  <video ref="myVideo"></video>
</template>

<script>
export default {
  mounted: function() {
    this.$nextTick(() => { // use arrow functions here to capture `this`!
      this.$refs.myVideo.addEventListener("loadedmetadata", () => {
        console.log('currentSrc', this.$refs.myVideo.currentSrc);
      });
    });
  }
}
</script>
 

демонстрация 1

Если вы только пытаетесь добавить прослушиватель событий, просто используйте v-on директиву в шаблоне (например, v-on:loadedmetadata="METHOD" или @loadedmetadata="METHOD" сокращенно).:

 <template>
  <video ref="myVideo" @loadedmetadata="logCurrentSrc"></video>
</template>

<script>
export default {
  methods: {
    logCurrentSrc() {
      console.log('currentSrc', this.$refs.myVideo.currentSrc);
    }
  }
}
</script>
 

демонстрация 2