mpvue 如何使用腾讯视频插件的方法

为了使用腾讯视频插件，应该先安装该插件。在命令行里输入以下命令进行安装：

npm install wechat-miniprogram-video --save

安装完成后，根据以下步骤使用mpvue和腾讯视频插件：

1.在 Vue 实例中的生命周期created中使用如下代码引入腾讯视频插件及样式：

import 'wechat-miniprogram-video/dist/style/index.wxss';
import wechatVideo from 'wechat-miniprogram-video';

2.在 Vue 模板中使用we-mp-video组件，例如：

<template>
  <div>
    <we-mp-video
        :src="src"
        :autoplay="true"
        :muted="true"
        :loop="true"
        :page-gesture="false"
        :direction="videoDirection"
        :controls="{{ controls }}"
        :danmu-list="{{ danmuList }}"
    ></we-mp-video>
  </div>
</template>

<script>
export default {
    data() {
        return {
            src: 'http://video.test.com/test.mp4',
            videoDirection: 0,
            controls: true,
            danmuList: [
                {
                    text: '这是第一条弹幕',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '这是第二条弹幕',
                    color: '#ff00ff',
                    time: 2
                }
            ]
        }
    }
}
</script>

这里我们可以看到，we-mp-video组件接受多个参数，包括视频源src，自动播放选项autoplay，静音选项muted，循环播放选项loop，手势控制选项page-gesture，视频方向选项direction，控制条组件显示选项controls和弹幕列表danmu-list等。

3.在后续的业务逻辑中，我们可以对we-mp-video组件进行控制。例如，在点击一个按钮后暂停视频，拖动进度条后改变视频播放时间，等等。操作方法如下：

this.$refs.video.pause() // 暂停视频
this.$refs.video.play() // 播放视频
this.$refs.video.seek(10) // 将视频跳转到10s处

示例代码如下：

<template>
  <div>
    <we-mp-video ref="video" :src="src"></we-mp-video>
    <button @click="pause">暂停</button>
    <button @click="play">播放</button>
    <input type="range" min="0" :max="duration" v-model="currentTime">
  </div>
</template>

<script>
export default {
    data() {
        return {
            src: 'http://video.test.com/test.mp4',
            currentTime: 0,
            duration: 100
        }
    },
    methods: {
        pause() {
            this.$refs.video.pause()
        },
        play() {
            this.$refs.video.play()
        }
    },
    watch: {
        currentTime(val) {
            this.$refs.video.seek(val)
        }
    }
}
</script>

在上述代码中，我们分别使用了暂停和播放按钮来控制视频播放状态，使用进度条来控制视频播放时间。最后，我们通过watch监听了进度条组件的变化，并使用seek方法将视频跳转到相应的时间点。

总的来说，使用腾讯视频插件与mpvue集成非常简单，只需要在 Vue 实例和模板中分别引入组件和参数，然后根据需求进行控制即可。