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

Answer 2

在 ./components/Video.vue 中創建組件：

<template>
  <div class="video-wrap">
    <video controls="true">
      <source :src="mp4" type="video/mp4">
    </video>
  </div>
</template>
<script>
export default {
  name: "Video",
  props: {
    mp4: String
  }
}
</script>

導入到您的組件：

import Video from '@/components/Video.vue'

並使用動態網址：

<Video :mp4="require(`@/assets/video.mp4`)" />