基于video.js来实现vue的视频播放功能

video.js是一个很好的视频播放插件，但是如果移植到vue上相信很多小伙伴很苦恼，是不是网上搜了一堆，发现不好使，我也是踩坑了，后来发现官方文档上就有，好尴尬，建议以后学习先看看官方文档，会有惊喜的。
1.首先安装video.js，然后在main.js中引入

npm i video.js -D  //安装
//main.js 引入
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video;

1.先官方基础的使用方法，自定一个组件，说明一下在使用video.js组件时需要在beforeDestroy增加一个dispose()方法，来销毁它，这样就可以解决重复载入报错问题了。

<template>
    <div>
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script>
import videojs from 'video.js';

export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            player: null
        }
    },
    mounted() {
        this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>

使用的时候

<template>
  <div>
        <video-player :options="videoOptions"/>
    </div>
</template>

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

export default {
    name: "VideoExample",
    components: {
        VideoPlayer
    },
    data() {
        return {
            videoOptions: {
                autoplay: true,
                controls: true,
                sources: [
                    {
                        src:
                            "/path/to/video.mp4",
                          type: "video/mp4"
                    }
                ]
            }
        };
    }
};

以上是最基础的，但是在vue项目中使用感觉还是有问题的，比如跳转到指定的位置去播放视频，视频重复更改源播放地址，就会发现还是有好多问题的，接下来是重点

华丽的分割线
下面这个解决了重复加载视频及预览图片更改二次渲染等问题，不做过多解释，比较忙，懒得敲字直接贴代码了：

<template>
    <div>
        <el-button @click="handleClickPlay" type="text" size="small" style="font-size:14px;">打开播放</el-button>
        <el-dialog title="播放窗口" append-to-body :visible.sync="playVisible" width="1050px"
                   :before-close="handleClose">
            <div>
                <div class="absorbedPicBox">
                    <video ref="videoPlayer" class="video-js"></video>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "VideoPlayer",
    data() {
        return {
            playVisible:false,
            player: null,
            options: {
                autoplay: true,
                controls: true,
                poster: "//vjs.zencdn.net/v/oceans.png",
                preload: "auto",
                'data-setup': '{}',
                sources: [
                    {
                        src: "//vjs.zencdn.net/v/oceans.mp4",
                        type: "video/mp4"
                    }
                ]
            },

        }
    },
    methods: {
        handleClose() {
            this.playVisible = false;
            if (this.player) {
                this.player.paused()
            }
        },
        handleClickPlay(){
            this.playVisible = true;
            let videoParams = {
                "begin_time": params.value[1],
                "end_time": params.value[2],
                "video_id": parseInt(this.$route.params.id),
                "student_id": this.stuId
            }
            api.getTabVideo(videoParams).then(data => {
                if (data.code == '000000') {
                    this.video_begin_time = data.result.video_begin_time;
                    console.log(this.video_begin_time)
                    this.options.poster = data.result.img_path;
                    this.options.sources[0].src = data.result.video_path;
                    if (this.player) {
                        this.player.poster(this.options.poster);
                        this.player.src(this.options.sources[0].src);
                        this.player.load();
                    }else{
                        setTimeout(()=>{
                            this.initVideo();
                        },600)
                    }
                }

            }).catch(error => {
                console.log(JSON.stringify(error));
            })
        },
        initVideo() {
            let that = this;
            this.player = this.$video(this.$refs.videoPlayer, this.options, function onPlayerReady() {
                console.log('onPlayerReady', this);
                this.currentTime(that.video_begin_time)
            })
        }
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>