Vue使用video标签实现视频播放

下面我将详细讲解“Vue使用video标签实现视频播放”的完整攻略。

概述

想要在 Vue 中使用 video 标签实现视频播放，需要用到 Vue 的指令和事件等相关知识，以下是实现过程的具体步骤。

步骤

1. 安装和引入 video.js

video.js 是一个现代化的视频播放器，它可以帮助我们轻松地实现视频播放功能。我们需要安装它并在 Vue 中引入：

npm install video.js

然后在 main.js 中引入：

import 'video.js/dist/video-js.css'
import 'video.js/dist/video.js'

2. 编写组件模板

在 Vue 组件的模板中，我们需要添加一个 video 标签来呈现视频播放器。此外，我们还需要添加一些控制按钮和进度条。代码示例如下：

<template>
  <div class="video-player">
    <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
    <div class="vjs-control-bar">
      <button @click="handlePlay">
        <i v-if="!isPlaying" class="fa fa-play"></i>
        <i v-else class="fa fa-pause"></i>
      </button>
      <div class="vjs-progress">
        <div class="vjs-progress-bar"></div>
      </div>
    </div>
  </div>
</template>

3. 初始化 video.js

在 Vue 的生命周期函数 mounted 中初始化 video.js。我们首先需要获取 video 标签的引用，然后创建一个 video.js 实例，并将其挂载到 video 标签上，代码示例如下：

import videojs from 'video.js'

export default {
  data() {
    return {
      isPlaying: false,
      player: null
    }
  },
  mounted() {
    // 获取 video 标签的引用
    const video = this.$refs.videoPlayer

    // 创建 video.js 实例
    this.player = videojs(video, {
      controls: false,
      autoplay: false,
      preload: 'auto'
    })

    // 监听视频播放事件
    this.player.on('play', () => {
      this.isPlaying = true
    })

    // 监听视频暂停事件
    this.player.on('pause', () => {
      this.isPlaying = false
    })
  },
}

在上面的代码中，我们创建了一个 isPlaying 的响应式属性来表示视频是否正在播放。我们还创建了一个 player 属性来保存 video.js 实例。

注意：在组件销毁时，需要销毁 video.js 实例，避免内存泄漏。在组件的生命周期函数 beforeDestroy 中，我们需要调用 player.dispose() 来销毁实例。代码示例如下：

beforeDestroy() {
  if (this.player) {
    this.player.dispose()
  }
},

4. 实现视频播放控制

我们需要为播放、暂停按钮添加点击事件，用来控制视频的播放和暂停。代码示例如下：

methods: {
  handlePlay() {
    if (this.isPlaying) {
      this.player.pause()
    } else {
      this.player.play()
    }
  }
}

在上面的代码中，我们调用 player.pause() 来暂停视频播放，调用 player.play() 来开始视频播放。

5. 实现视频进度条

我们需要监听视频播放时间的变化，来更新进度条的显示。代码示例如下：

mounted() {
  // ...

  // 监听视频播放时间变化事件
  this.player.on('timeupdate', () => {
    const currentTime = this.player.currentTime()
    const duration = this.player.duration()
    const percent = (currentTime / duration) * 100
    const progressBar = this.$el.querySelector('.vjs-progress-bar')
    progressBar.style.width = percent + '%'
  })
}

在上面的代码中，我们在监听时间变化事件中获取当前播放时间和总时间，然后计算出当前播放时间的百分比，更新进度条的宽度。

示例说明

示例1

我们可以通过 video 组件来实现视频播放，以下是一个简单的示例：（这里的 video 组件代码示例使用的是 element-ui 的组件）

<template>
  <div>
    <el-video
      ref="player"
      :src="videoSrc"
      :poster="posterSrc"
      :options="playerOptions"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded">
    </el-video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'http://example.com/video.mp4',
      posterSrc: 'http://example.com/poster.jpg',
      playerOptions: {}
    }
  },
  methods: {
    onPlay() {
      console.log('playing')
    },
    onPause() {
      console.log('pause')
    },
    onEnded() {
      console.log('ended')
    }
  }
}
</script>

上面的代码中，我们通过 el-video 组件实现视频播放。在组件的 data 属性中，我们定义了视频的地址、封面和 playerOptions，其中 playerOptions 是用来设置 video.js 的配置项的。

在组件的 methods 属性中，我们定义了三个方法来分别处理播放、暂停和播放结束事件。在事件处理函数中，我们可以添加逻辑代码来处理视频播放时的行为。

示例2

我们也可以通过自定义 video 组件来实现视频播放。以下是一个自定义的 video 组件示例：

<template>
  <div class="video-player">
    <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
    <div class="vjs-control-bar">
      <button @click="handlePlay">
        <i v-if="!isPlaying" class="fa fa-play"></i>
        <i v-else class="fa fa-pause"></i>
      </button>
      <div class="vjs-progress">
        <div class="vjs-progress-bar"></div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      isPlaying: false,
      player: null
    }
  },
  mounted() {
    const video = this.$refs.videoPlayer

    this.player = videojs(video, {
      controls: false,
      autoplay: false,
      preload: 'auto'
    })

    this.player.on('play', () => {
      this.isPlaying = true
    })

    this.player.on('pause', () => {
      this.isPlaying = false
    })

    this.player.on('timeupdate', () => {
      const currentTime = this.player.currentTime()
      const duration = this.player.duration()
      const percent = (currentTime / duration) * 100
      const progressBar = this.$el.querySelector('.vjs-progress-bar')
      progressBar.style.width = percent + '%'
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    handlePlay() {
      if (this.isPlaying) {
        this.player.pause()
      } else {
        this.player.play()
      }
    }
  }
}
</script>

在上面的代码中，我们创建了一个自定义的 video-player 组件，并绑定了一个 video.js 实例。在组件的 methods 属性中，我们实现了一个 handlePlay 方法，用来控制视频的播放和暂停。在组件的 mounted 生命周期函数中，我们监听了视频的播放、暂停和时间变化事件，来实现了视频播放控制和进度条功能。

以上就是使用 Vue 实现 video 标签视频播放的详细攻略，其中包含了安装 video.js、编写组件模板、初始化 video.js、实现视频播放控制、实现视频进度条等多个方面的内容。