前端vue视频vue-video-player插件总结知识点案例(带源码) 6sF5nzax-泛亚电竞

泛亚电竞

泛亚电竞

文档

文档地址

选项参考

API文档

配置函数方法等

Git地址

安装

1.vue-video-player 插件下载

npm install vue-video-player --save

2.推流/m3u8 的前端下载

npm install --save videojs-contrib-hls

main.js文件全局引入

// 下面引入 位置  全部在node_modules文件依赖里面找到需要对应文件引入即可import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css'Vue.use(VideoPlayer)window.videojs = VideoPlayer.videojs// 全局引入中文提示require('video.js/dist/lang/zh-CN.js')//引入 hls,视频直播(m3u8)必须引入的import 'videojs-contrib-hls'//播放rtmp视频import 'videojs-flash'

视频格式

type:"video/webm"   // 可以播放，用oggtype:"video/ogg"    // 可以播放，用webmtype:"video/3gp"    // 可以播放type:"video/mp4"    // 可以播放type:"video/avi"    // 打不开 无法播放type:"video/flv"    // 打不开 可以使用ftype:"video/mkv"    // 打不开 使用videotype:"video/mov"    // 打不开 使用videotype:"video/mpg"    // 打不开 未测试type:"video/swf"    // 打不开  未测试type:"video/ts"     // 打不开 未测试type:"video/wmv"    // 打不开 未测试type:"video/vob"    // 没转化 未测试type:"video/mxf"    // 转化出错 未测试type::"video/rm"     // 转化出错 未测试

组件方法

this.$refs.videoPlayer这个代表拿div上面的ref组件,后面是方法this.$refs.videoPlayer.player.pause()                          //  暂停视频this.$refs.videoPlayer.player.play()                           //  播放视频this.$refs.videoPlayer.player.playbackRate(2)                  //  改变播放速度  this.$refs.videoPlayer.player.currentTime(5)                   //  改变播放进度位置this.$refs.videoPlayer.player.volume(0.1)                      //  音量大小值在0-1this.$refs.videoPlayer.player.muted(true);                     //  true 代表静音 ,fthis.playerOptions['sources'][0]['src'] = "http:url...."       //  切换音视频资源路this.$refs.videoPlayer.player.load();                          //  视频加载this.$refs.videoPlayer.player.requestFullscreen();             //  直接全屏 如果当this.$refs.videoPlayer.player.exitFullscreen();                //  在全屏模式下，将this.$refs.videoPlayer.player.enterFullWindow();               //  当环境不支持全屏this.$refs.videoPlayer.player.reset();                         //  重置播放器this.$refs.videoPlayer.player.currentSources()                 //  返回当前播放源信this.$refs.videoPlayer.player.preload(val);                    //  获取或者设置预加this.$refs.videoPlayer.player.controls(false);                 //  播放控件是否显示

切换视频清晰度

//添加切换清晰度 按钮// 监听播放onPlayerPlay(){this.$refs.videoPlayer.player.play() // 播放// 播放的时候判断一下 有没有 清晰度这个按钮// !this.$('#vjsControl')if(!document.getElementById('vjsControl')){this.addTool()}},addTool(){let that = thisthis.$(".vjs-control-bar").append(``)let vjsControl = document.getElementById('vjsControl')vjsControl.addEventListener('click',that.resourceClcik)// document.addEventListener()},// 切换资源resourceClcik(){let text = this.$('#vjsControl').text()if(text === '标清') {this.$('#vjsControl').text('超清')// this.playerOptions.sources[0].src = ''} else if(text === '超清') {this.$('#vjsControl').text('标清')// this.playerOptions.sources[0].src = ''}}

基础案例

基础案例,可以直接复制到vue页面查看效果
是否禁止拖动进度条可以设置,在样式里面,被注释掉了,可以打开

前端vue视频vue-video-player插件总结知识点案例(带源码) 6sF5nzax

目录

文档

安装

main.js文件全局引入

视频格式

组件方法

切换视频清晰度

基础案例