视频播放的总结

1.播放采用方式 

 a.原生的video 标签  直接给标签src内容   

 b.video.js  

initVideoJs(){
                // 中文报错
                videojs.addLanguage('zh-CN', {
                "You aborted the media playback": "视频播放被终止",
                "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
                "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
                "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
                "No compatible source was found for this media.": "无法找到此视频兼容的源。",
                });
                let this_ = this;
                let options = {
                    bigPlayButton: true, //是否显示播放按钮（这个播放按钮默认会再左上方，需用CSS设置居中）
                    autoplay: false,
                    controls: true,
                    sources: [
                        {
                            src:this_.url,
                            type: "video/mp4"
                        }
                    ]
                }
                this.$nextTick(() => {
                    let this_ = this;
                    this.myPlayer = videojs(this_.$refs['viodeRef'+this.id], options, function () {
                        // this.src({
                        //     src:this_.url,
                        //     type:"video/mp4"
                        // })
                        // // this.load()
                        // this.load(this_.url)
                        // this_.myPlayer.play();
                        // setTimeout(() => {
                        //     if(this_.myPlayer)this_.myPlayer.pause();
                        // },1000)
                    })
                    this.myPlayer.on('pause', function() {
                        this_.firsLoad = true
                    })
                })
            },

c.ckplayer

init(){
                if(this.liveCheck===undefined){
                    this.liveCheck=true
                }else {
                    this.liveCheck=false;
                }
                let videoObject = {
                    container: '.player'+this.num, //容器的ID或className
                    variable: 'player',//播放函数名称
                    autoplay:false,//自动播放
                    live:this.liveCheck,//直播视频形式
                    video:this.url,//视频地址
                    flashplayer: true,
                    control:false,
                };
                this.player = new ckplayer(videoObject);
            },

d.flv.js

initPlayer(){
                if (flvjs.isSupported()) {
                    if (this.flvPlayer) {
                        this.destory(this.flvPlayer);
                    }
                    if (this.videoUrl) {
                        const videoElement = document.getElementById("videoElement"+this.id);
                        this.flvPlayer = flvjs.createPlayer({
                            type: "flv",
                            url: this.videoUrl,
                            isLive: this.lives,
                            isAutoPlay: true,
                            isContinue: true,
                            lazyLoad: true
                        },{
                            enableWorker: true,
                            enableStashBuffer: false,
                            stashInitialSize: 128,
                        });
                        this.flvPlayer.attachMediaElement(videoElement);
                        this.flvPlayer.load();
                        let _this = this;
                        this.flvPlayer.on("error",(err)=>{
                            if (err === 'NetworkError')  {
                                console.log('资源请求出错或者已被中断',err);
                                
                            }else{
                                console.error(err);
                            }
                            // _this.flvPlayer.pause();
                            // _this.flvPlayer.unload();
                        });
                        this.flvPlayer.play().then(
                            () => {  
                            }
                        )
                        .catch(
                            (error) => {
                                if (error && error.toString().toLowerCase().includes('the play() request was interrupted by a call to pause()')) {                  
                                } else {
                                    throw error
                                }

                            }
                        );
                    }
                }
            },
             destory(flvplayer) {
                //  && flvplayer._emitter && flvplayer.destroy
                if (flvplayer != null ) {
                    flvplayer.pause();
                    flvplayer.unload();
                    flvplayer.detachMediaElement();
                    flvplayer.destroy();
                    flvplayer = null;
                }
            }

解决延迟问题：在flv的参数配置的时候，需要将两个参数分开设置（media参数以及config参数）