I am trying to use the HTML5 Video element in a vue.js application. How can I wrap the video as a data property and use it in the vue.js app.

This is my code:

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

I am trying to use the HTML5 Video element in a vue.js application. How can I wrap the video as a data property and use it in the vue.js app.

This is my code:

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

• javascript
• vue.js

2 Answers 2

Firstly, you have forgotten a closing div tag.

The proper way to do this is by using refsand puted properties instead of data(). Just add a ref attribute to your video-tag

  <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",
   puted: {
    videoElement () {
      return this.$refs.video;
    }, 
  }
}
</script>

Then you can use your videoElement anywhere within the ponent by calling this.videoElement

Create ponent in ./ponents/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 to your ponent:

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

And use dynamic URL:

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