一次基于Vue的Vedio.js使用

遇到的问题

1.由于采用了分页，所以在两次切回到较小的页码时，会有warning警告，提示player对象已经被初始化过。

2.如果调用对象销毁之后，对应的DOM节点也同时会被销毁，根据id获取节点会报找不到对应元素

//以下是解决方法
      initVedio() {
   

            //初始化视频方法 循环列表获取每个视频的id
                if(this.tableData.length>0){
   
                    //在初始化vedio前要先重置相应的节点，否则切换页码后，视频可能依旧显示之前页码的内容
                    this.initVedioHtml();
                    this.tableData.map((item,i)=>{
   
                        //由于切换页面只去走updated()方法，不会走beforeDestroy(),所以在初始化前先进行对象销毁
                        if(this.$video.players['myVideo'+item.id]){
   this.$video.players['myVideo'+item.id].dispose()}
                        let player = this.$video('myVideo'+item.id, {
   
                            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                            controls: true,
                            //自动播放属性,muted:静音播放
                            autoplay: false,
                            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                            preload: false,

                            //设置视频播放器的显示宽度（以像素为单位）
                            width: "500px",
                            //设置视频播放器的显示高度（以像素为单位）
                            height: "250px",
                            //封面图
                            poster: "",
                            controlBar: {
   
                                timeDivider: true,
                                durationDisplay: false,
                                remainingTimeDisplay: false,
                                fullscreenToggle: true // 全屏按钮
                            }
                        });
                        // this.playerList.push(player)
                        let data = {
   
                            src:item.networkPathURL,
                            type:'video/mp4'
                        };

                        player.src(data);
                        player.load(data);
                        player.pause(); 
                    })
                }
        },
       initVedioHtml(){
   
            if(this.tableData.length>0){
   
                this.tableData.map((item,i)=> {
   
                    let myVideoDiv = document.getElementById('myVideo' + i);
                        let vH = "<video id='myVideo" + item.id + "' class='video-js vjs-default-skin vjs-big-play-centered'></video>"
                        myVideoDiv.innerHTML = vH;
                })
            }
        },

最后附上页面完整代码：

<template>
    <div>

        <div class='handle-box'>
            <el-input v-model='query.title' placeholder='参赛作品名称' class='handle-input mr10'></el-input>
            <el-input v-model='query.songer' placeholder='朗读者' class='handle-input mr10'></el-input>
            <el-button type='primary' icon='el-icon-search' @click='handleSearch'>搜索</el-button>
        </div>
        <el-divider></el-divider>