视频播放的总结
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参数)