在 Vue.js 中播放 MP4 视频

在基于 Vue.js 的 web 应用中，经常需要在前端实现视频播放的功能。本文将介绍如何使用 Vue.js 和 HTML5 <video> 标签，在网页中播放 MP4 视频。

准备工作

在开始之前，请确保你已经准备好了一个 MP4 格式的视频文件。如果你还没有，可以在 https://sample-videos.com/ 下载一个示例视频。

实现过程

步骤一：创建一个 Vue.js 项目

首先，我们需要新建一个 Vue.js 项目。你可以使用 Vue CLI 这样的工具来创建一个空的 Vue.js 项目，默认安装常见的依赖库：

$ npm install -g @vue/cli
$ vue create vue-video-player

步骤二：添加视频文件

将你已经准备好的 MP4 视频文件放置在项目的 /public 目录下。

步骤三：创建组件

打开 src/components/ 目录，创建一个名为 VideoPlayer.vue 的 Vue 组件：

<template>
  <div>
    <video ref="videoPlayer" controls :src="videoSrc"></video>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    src: String,
  },
  computed: {
    videoSrc() {
      return `/video/${this.src}`;
    },
  },
  mounted() {
    this.$refs.videoPlayer.load();
  },
};
</script>

此组件负责展示视频播放器，并从父组件接收传递的 src 属性作为视频文件名。

步骤四：在父组件使用 VideoPlayer

在父组件中，我们可以引入 VideoPlayer 组件，并指定 src 属性为选中的视频文件名：

<template>
  <div>
    <VideoPlayer :src="selectedVideo" />
    <div>
      <button @click="changeVideo('sample.mp4')">播放示例视频</button>
    </div>
  </div>
</template>

<script>
import VideoPlayer from '@/components/VideoPlayer.vue';

export default {
  name: 'App',
  components: {
    VideoPlayer,
  },
  data() {
    return {
      selectedVideo: '',
    };
  },
  methods: {
    changeVideo(src) {
      this.selectedVideo = src;
    },
  },
};
</script>

在这个例子中，我们使用了一个 changeVideo() 方法来改变 selectedVideo 属性，从而触发 VideoPlayer 组件重新加载视频并开始播放。

步骤五：运行项目

最后，我们需要运行这个 Vue.js 项目，并在浏览器中查看 VideoPlayer 组件的显示效果：

$ npm run serve

打开浏览器，在 http://localhost:8080/ 上可以看到如下的页面：

总结

通过以上步骤，我们成功地在 Vue.js 项目中实现了一个简单的视频播放器。如果你要实现更高级的功能，例如视频的自动播放、缓存和封面图等，可以进一步研究 HTML5 <video> 标签的 API，或者使用开源的视频播放器库，例如 Video.js 或 plyr 等。