vue.js 中的 HTML5 Video 元素？

Question

我正在尝试在 vue.js 应用程序中使用 HTML5 Video 元素。如何将视频包装为数据属性并在 vue.js 应用程序中使用它。

这是我的代码：

<template>
  <div class="video-player">
    <video class="video">
      <source src="@/assets/video.mp4" type="video/mp4">
    </video>
</template>

<script>
export default {
  name: "VideoPlayer",
  data: {
   video: null
  }
}
</script>

Answer 1

首先，您忘记了结束div标签。

正确的方法是使用refs和计算属性而不是data(). 只需将ref属性添加到您的视频标签

  <template>
      <div class="video-player">
        <video class="video" ref="video">
          <source src="@/assets/video.mp4" type="video/mp4">
        </video>
      </div>
    </template>

<script>
export default {
  name: "VideoPlayer",
   computed: {
    videoElement () {
      return this.$refs.video;
    }, 
  }
}
</script>

然后您可以videoElement通过调用在组件内的任何位置使用this.videoElement