vue实现视频播放<video>标签MP4

在Vue中，使用`<video>`标签播放MP4视频是非常直接的。首先，你需要在HTML模板中创建一个`<video>`元素，并设置一些基本属性。以下是一个简单的示例：

<template>
  <div id="video-player">
    <video ref="myVideo" :src="videoUrl" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'path/to/your/video.mp4', // 替换为你的MP4文件路径
    };
  },
};
</script>

在这个例子中：
- `ref`属性用于获取DOM元素的引用，我们用`myVideo`作为标识符。
- `:src`是绑定属性，将`data`中的`videoUrl`值与视频文件路径关联起来，当数据变化时，会自动更新视频源。
- `controls`属性添加了默认的播放控制条，如播放、暂停、音量等。

如果你需要更复杂的操作，比如预加载视频、处理错误等，可以利用`methods`或`mounted`生命周期钩子：

methods: {
  handlePlay() {
    this.$refs.myVideo.play();
  },
  handleError(error) {
    console.error('Video error:', error);
  },
},
mounted() {
  this.$refs.myVideo.addEventListener('error', this.handleError);
  this.$refs.myVideo.load(); // 预加载视频
}

记得替换`videoUrl`为你实际的视频资源路径，并根据需求调整事件处理程序。