页面加载后从视频元素获取属性

Question

我想从视频对象中获取 'currentSrc' 值。这是我的代码

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()、refs、通过更改元素键值重新呈现页面，甚至超时，但结果总是得到 <empty string>。当我尝试在视频元素上执行 @load 时，它根本不起作用。

有没有办法在页面呈现后立即获取对象值？

Answer 1

在您的第一个代码片段中，<video>.currentSrc 在您尝试记录时尚未设置，因为视频是异步加载的。第二个片段仅记录 <video> 元素本身，浏览器控制台会在更改时自动更新，这就是为什么你看到 currentSrc 已填充。

<video> 元素首先必须在任何数据属性可用之前从源加载视频元数据，并在发生这种情况时发出 loadedmetadata event。您可以在 mounted 挂钩中收听该事件：

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

如果您的站点可能有多个 <video> 元素 id 为 "video"（例如，该页面有多个包含此 <video> 的 Vue 组件），最好使用 template ref:

获取对预期元素的引用

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

demo 1

如果您只是想添加事件侦听器，只需在模板中使用 v-on directive（例如 v-on:loadedmetadata="METHOD" 或 @loadedmetadata="METHOD" shorthand）：

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

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

demo 2

页面加载后从视频元素获取属性

Getting attributes from video element after page load

javascript

vue.js

vue-component