視頻播放的總結

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參數）