如何通过vue代码实现在前端观看自己网站的视频

要在前端观看自己网站的视频，可以按照以下步骤实现：

1. 在Vue项目中安装一个视频播放器组件，如Video.js、Vue-Video-Player等。可以通过npm安装：

npm install video.js --save

2. 将视频文件上传到服务器，并在Vue项目中定义视频文件的路径。

3. 在Vue组件中引入视频播放器组件，并在组件中使用视频播放器组件。如使用Video.js播放器：

<template>
  <div>
    <video
      ref="videoPlayer"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls
      preload="auto"
      width="640"
      height="360"
      :poster="poster"
      data-setup='{}'>
      <source :src="videoSrc" type="video/mp4" />
    </video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'VideoPlayer',
  props: {
    videoSrc: String,
    poster: String
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer)
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

其中，`videoSrc`为视频文件的路径，`poster`为视频封面图片的路径。这里使用Video.js播放器，可以在mounted钩子函数中初始化视频播放器，使用beforeDestroy钩子函数来销毁播放器。

4. 在Vue组件中引用视频播放器组件，并传入视频文件路径和封面图片路径。如：

<template>
  <div>
    <VideoPlayer :videoSrc="videoSrc" :poster="poster" />
  </div>
</template>

<script>
import VideoPlayer from './VideoPlayer.vue'

export default {
  name: 'App',
  components: {
    VideoPlayer
  },
  data() {
    return {
      videoSrc: 'your_video_path.mp4',
      poster: 'your_poster_path.jpg'
    }
  }
}
</script>

这样，在Vue项目中就可以使用视频播放器组件来播放自己网站的视频。需要注意的是，在上传视频时需要遵守相关法律法规，不要侵犯视频的版权。