vue使用vedio.js播放视频（切换视频源）

vedio.js官方vue教程是采用组件模式，切换视频失败。
参考和众多网上教程，最后采用去掉组件，直接调用this.player.src（）方法切换成功记录下。
后续再研究组件的加载和传函数和参数的问题。
环境参数：
“video.js”: “^7.11.4”,
“vue”: “^2.6.11”,

代码如下：

<template>
    <div>
        <button type="submit" class="btn btn-primary" @click="handle_src('http://1***42/hls/02.mp4','video/mp4')">01</button>
        <button type="submit" class="btn btn-primary" @click="handle_src('http://1***42/hls/01wlf.mp4','video/mp4')">02</button>
        <button type="submit" class="btn btn-primary" @click="handle_src('https://www.runoob.com/try/demo_source/movie.mp4','video/mp4')">03</button>
        <button type="submit" class="btn btn-primary" @click="handle_src('http://1***42/hls/zhibo.m3u8','application/x-mpegURL')">hls</button>

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


   </div>
</template>

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

import videojs from 'video.js';


export default {
    name: "VideoPlayer",

    data () {
        return {
            videoOptions: {
                autoplay: "true",
                controls: "true",
                width: "900px",
                height: "500px",
                preload:'none',
                
                poster:"../assets/logo.png",
                sources: [
                    {
                        src:"https://www.runoob.com/try/demo_source/movie.mp4",
                        type: "video/mp4"
                       
 

                    }
                ]
            }
        }
    },
 methods: {
        handle_src(url,vtpye) {
            //this.player.src(url);
            this.player.src({src:url,type:vtpye});     
        }
    },
    
    mounted() {
        this.player = videojs(this.$refs.videoPlayer, this.videoOptions, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>