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

目录

    • 文档
    • 安装
    • main.js文件全局引入
    • 视频格式
    • 组件方法
    • 切换视频清晰度
    • 基础案例
      • 效果如下
    • 完整案例1
      • 效果如下
    • 完整案例2
      • 效果如下
    • 最后

文档

文档地址

选项参考

API文档

配置函数方法等

Git地址

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"   // 可以播放,用ogg
type:"video/ogg"    // 可以播放,用webm
type:"video/3gp"    // 可以播放
type:"video/mp4"    // 可以播放
type:"video/avi"    // 打不开 无法播放
type:"video/flv"    // 打不开 可以使用f
type:"video/mkv"    // 打不开 使用video
type:"video/mov"    // 打不开 使用video
type:"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-1
this.$refs.videoPlayer.player.muted(true);                     //  true 代表静音 ,f
this.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 = this
	this.$(".vjs-control-bar").append(
	   `<button class="vjs-control" id="vjsControl">${text}button>`)
	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页面查看效果

是否禁止拖动进度条可以设置,在样式里面,被注释掉了,可以打开

<template>
  <div class="course_node_video">
    <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
      @ready="playerReadied" @pause="onPlayerPause($event)" @timeupdate="onPlayerTimeupdate($event)">
    video-player>
  div>
template>
 
<script>

export default {
  data () {
    return {
      playerOptions: {
        // 可选的播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 如果为true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 是否视频一结束就重新开始。
        loop: false,
        // 建议浏览器在
        preload: 'auto',
        // 语言设置
        language: 'zh-CN',
        // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
        aspectRatio: '16:9',
        // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        fluid: true,
        sources: [{
          // 视频类型
          type: "video/mp4",
          // 视频地址
          src: 'https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4'
        }],
        // 视频地址
        poster: '',
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放,请稍后再试',
        //底栏控制器
        controlBar: {
          // 当前时间和持续时间的分隔符
          timeDivider: true,
          // 显示持续时间
          durationDisplay: true,
          // 是否显示剩余时间功能
          remainingTimeDisplay: false,
          // 是否显示全屏按钮
          fullscreenToggle: true
        }
      },
      currentTime: 7,         // 秒数设置 单位默认s
    }
  },
  methods: {
    /* 获取视频播放进度 */
    onPlayerTimeupdate (player) {
      this.currentTime = player.cache_.currentTime
    },
    /* 设置视频开始的进度 */
    playerReadied (player) {
      player.currentTime(this.currentTime)
    },
    // 暂停回调   将视频播放的时间保存
    onPlayerPause (player) {
      console.log('player pause currentTime!', player.cache_.currentTime);
      // let that = this;
      //   存储player.currentTime 是当前暂停时间    用于下次断续播放
    },
  },
  beforeMount () {
    // let id = this.$route.query.id;
    // if (id != undefined && id != null) {
    //   //编辑
    //   localStorage.setItem("videoId", id);
    //   // this.loadCourseNodeVideo(id);
    // } else {
    //   id = localStorage.getItem("videoId");
    //   if (id != undefined && id != null) {
    //     // this.loadCourseNodeVideo(id);
    //   } else {
    //     localStorage.removeItem("videoId");
    //   }
    // }
  }
}
script>
 
<style scoped>
.course_node_video {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

/* 是否设置禁止进度条被拖动样式 */
/* .course_node_video >>> .vjs-progress-control {
  pointer-events: none;
} */
style>

效果如下

完整案例1

完整案例,可以直接复制到vue页面查看效果,有需要的功能自行复制到基础版里面使用
里面有视频观看起点设置
这里面style没有设置scoped注意,设置scoped里面底栏可能不生效

<template>
  <div class="box">
    <div class="course_node_video">
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
        @ready="playerReadied" @pause="onPlayerPause($event)" @timeupdate="onPlayerTimeupdate($event)"
        customEventName="customstatechangedeventname" @play="onPlayerPlay" @ended="onPlayerEnded"
        @waiting="onPlayerWaiting" @playing="onPlayerPlaying" @loadeddata="onPlayerLoadeddata"
        @canplay="onPlayerCanplay" @canplaythrough="onPlayerCanplaythrough" @statechanged="playerStateChanged">
      video-player>
    div>
  div>
template>
 
<script>

export default {
  data () {
    return {
      // 视频播放器配置
      playerOptions: {
        // 自定义设置播放速度
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        // 如果为true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 是否视频一结束就重新开始。
        loop: false,
        // 建议浏览器在
        preload: 'auto',
        // zh-CN  需要main.js全局引入才可以生效
        language: 'zh-CN',
        // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
        aspectRatio: '16:9',
        // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        fluid: true,
        sources: [{
          // 视频格式
          type: "video/mp4",
          // 视频地址
          src: 'https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4'
        }],
        // 视频封面地址
        poster: '',
        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放,请稍后再试',
        controlBar: {
          //  分割线/显示隐藏
          timeDivider: true,
          //  显示总时间
          durationDisplay: true,
          //  是否显示剩余时间功能
          remainingTimeDisplay: false,
          //  是否显示全屏按钮
          fullscreenToggle: true,
          //  播放暂停按钮
          playToggle: true,
          //  音量控制
          volumeMenuButton: false,
          //  当前播放时间
          currentTimeDisplay: true,
          //  进度条显示隐藏
          progressControl: true,
          //  直播流时,显示LIVE
          liveDisplay: true,
          //  播放速率,当前只有html5模式下才支持设置播放速率   如果false右下角 1X 播放速率将会隐藏
          playbackRateMenuButton: true,
        }
      },
      //视频观看起点
      //  playtimes:"",                                        有请求  接口方式设置视频播放起点  步骤:111111111
      // 秒数设置 单位默认s  进度条位置设置   视频观看起点设置     没有    请求接口方式设置视频播放起点  步骤:111111111
      currentTime: 7,
    }
  },
  // created () {                                              有请求  接口方式设置视频播放起点  步骤:2222222222
  //   this.fetchData();//获取的视频从何处播放的时间点
  //   this.playerOptions.sources[0].src = '视频地址'//视频地址
  // },
  methods: {
    //接口获取的视频观看起点                                     有请求  接口方式设置视频播放起点  步骤:333333333
    // fetchData (id) { //id为传的参数
    //   this.$http
    //     .get(`请求地址` + id, {
    //     })
    //     .then(res => {
    //       //console.log(res.data)
    //       this.playtimes = res.data;
    //     });
    // },
    //设置视频开始的进度 准备就绪(预加载前会调用)(初始化调用)     没有  请求接口方式设置视频播放起点  步骤:222222222
    playerReadied (player) {
      player.currentTime(this.currentTime)
      // player.currentTime(playtimes)                        //有请求  接口方式设置视频播放起点  步骤:555555555
    },
    //获取视频播放进度 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
    onPlayerTimeupdate (player) {
      this.currentTime = player.cache_.currentTime
      // console.log(player);
    },
    // 暂停回调   将视频播放的时间保存  暂停回调(暂停时调用)(用户操作调用)
    onPlayerPause (player) {
      console.log('player pause currentTime!', player.cache_.currentTime);
      // let that = this;
      //   存储player.currentTime 是当前暂停时间    用于下次断续播放
    },

    // 播放回调(播放时会调用)(用户操作调用)
    onPlayerPlay (player) {
      console.log('播放', player)
      this.$emit('onPlayerPlay', player)
    },
    // 播放状态改变回调
    playerStateChanged (playerCurrentState) {
      console.log('数据变化', playerCurrentState)
      this.$emit('playerStateChanged', playerCurrentState)
    },
    //视频播完回调 (结束)(视频播放完毕调用)
    onPlayerEnded (player) {
      console.log('结束', player)
      this.$emit('onPlayerEnded', player)
    },
    // 等待(视频中出现loading就会调用,加载时调用)(高频调用)
    onPlayerWaiting (player) {
      console.log('等待', player)
      this.$emit('onPlayerWaiting', player)
    },
    // 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
    onPlayerPlaying (player) {
      console.log('播放中', player)
      this.$emit('onPlayerPlaying', player)
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata (player) {
      console.log('预加载', player)
      this.$emit('onPlayerLoadeddata', player)
    },
    // 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
    onPlayerCanplay (player) {
      console.log('是否播放', player)
      this.$emit('onPlayerCanplay', player)
    },
    // 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
    onPlayerCanplaythrough (player) {
      console.log('能够从头到尾播放', player)
      this.$emit('onPlayerCanplaythrough', player)
    }
  },
  // watch: {                                         //有  请求接口方式设置视频播放起点  步骤:44444444444
  //   playtimes (val, oldVal) {//普通的watch监听
  //     console.log("playtimes: " + val);
  //     this.playerReadied(this.$refs.videoPlayer.player, val);
  //   },
  // }
  // beforeMount () {
  // let id = this.$route.query.id;
  // if (id != undefined && id != null) {
  //   //编辑
  //   localStorage.setItem("videoId", id);
  //   // this.loadCourseNodeVideo(id);
  // } else {
  //   id = localStorage.getItem("videoId");
  //   if (id != undefined && id != null) {
  //     // this.loadCourseNodeVideo(id);
  //   } else {
  //     localStorage.removeItem("videoId");
  //   }
  // }
  // },

}
script>
 
<style>
/* 盒子大小设置,视频在盒子内铺满且自适应 */
/* .box {
  width: 50%;
  margin: 100px auto;
} */

/* 重置样式也需要全局挂载 */
* {
  margin: 0;
  padding: 0;
}

.course_node_video {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

/* 是否禁止拖动进度条 >>> 深度选择器 */
/* .course_node_video >>> .vjs-progress-control {
  pointer-events: none;
} */


/* 这里深度选择器这种生效,需要去掉style标签里面的scoped才可以生效使用,才可以铺满屏幕    完整案例,可以直接复制到vue页面查看效果,有需要的功能自行复制到基础版里面使用*/
::v-deep video {
  width: 100% !important;
  /* 我的容器高度设置的是100vh-95px,你们根据你们容器高度设置视频高度即可 */
  height: calc(100vh - 95px) !important;
  /* 消除两边留白 */
  object-fit: fill;
}

/* 播放器底栏控制   下面自定义按钮样式  如果不需要可以注释掉  就自动变为初始播放样式 */
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  content: '播放视频';
  font-size: 18px;
  line-height: 3.5;
  letter-spacing: 2px;
  text-align: center;
  overflow: hidden;
  border: 0;
}

.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,
.vjs-icon-fullscreen-enter:before {
  content: '全屏';
  font-size: 15px;
  line-height: 2.8;
}

.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,
.vjs-icon-fullscreen-exit:before {
  content: '退出';
  font-size: 15px;
  line-height: 2.8;
}

.video-js .vjs-play-control .vjs-icon-placeholder:before {
  content: '播放';
  font-size: 15px;
  line-height: 2.8;
}

.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
  content: '暂停';
  font-size: 15px;
  line-height: 2.8;
}

.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
  content: '重播';
  font-size: 15px;
  line-height: 2.8;
}
style>

效果如下

完整案例2

这个案例加了几个按钮,通过自定义按钮,实现这几个功能,源码如下

<template>
  <div class="box">
    <div class="course_node_video">
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
        @ready="playerReadied" @pause="onPlayerPause($event)" @timeupdate="onPlayerTimeupdate($event)"
        customEventName="customstatechangedeventname" @play="onPlayerPlay" @ended="onPlayerEnded"
        @waiting="onPlayerWaiting" @playing="onPlayerPlaying" @loadeddata="onPlayerLoadeddata"
        @canplay="onPlayerCanplay" @canplaythrough="onPlayerCanplaythrough" @statechanged="playerStateChanged">
      video-player>
      <div class="footer">
        <div class="list" @click="videoPlay">播放div>
        <div class="list" @click="videoPause">停止div>
        <div class="list" @click="videoPosition">播放位置div>
        <div class="list" @click="videoDoubleSpeed">倍速div>
        <div class="list" @click="videoMute">静音div>
      div>
    div>
  div>
template>
 
<script>

export default {
  data () {
    return {
      playerOptions: {
        playbackRates: [0, 0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在
        language: 'zh-CN',  // zh-CN  需要main.js全局引入才可以生效
        aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4", // 类型
          src: 'https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4' // url地址https://qkodo.playlistmusic.com.cn/transcode_1080/video/2dd0dd6bb83b71d16c6313d0411d26aa.mp4
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          // 当前时间和持续时间的分隔符
          timeDivider: true,
          // 显示持续时间
          durationDisplay: true,
          // 是否显示剩余时间功能
          remainingTimeDisplay: false,
          // 是否显示全屏按钮
          fullscreenToggle: true,
          //播放暂停按钮
          playToggle: true,
          //音量控制
          volumeMenuButton: false,
          //当前播放时间
          currentTimeDisplay: true,
          //点播流时,播放进度条,seek控制
          progressControl: true,
          //直播流时,显示LIVE
          liveDisplay: true,
          //播放速率,当前只有html5模式下才支持设置播放速率
          playbackRateMenuButton: true,
        }
      },
      // currentTime: 7,         // 秒数设置 单位默认s                                        进度条位置设置 ,  进入页面直接开始位置一一一一一一
      playtimes: 7,             //  通过点击videoPosition事件改变视频位置二二二二二
    }
  },
  methods: {
    // 视频播放
    videoPlay () {
      // this.player.play();
      // this.playerOptions.controlBar.playToggle = false;
      this.$refs.videoPlayer.player.play();
    },
    // 视频暂停
    videoPause () {
      this.$refs.videoPlayer.player.pause();
    },
    // 视频位置
    videoPosition () {            //  通过点击videoPosition事件改变视频位置二二二二二
      this.$refs.videoPlayer.player.currentTime(this.playtimes)
    },
    // 视频倍速
    videoDoubleSpeed () {
      //https://www.zhangxinxu.com/study/201807/video-playbackrate.html
      // https://blog.csdn.net/qq_35153373/article/details/112183508

      this.$refs.videoPlayer.player.playbackRate(2)   // 这个能设置固定倍速
      // var button = document.getElementsByTagName('vjs-playback-rate')
      // button.addEventListener('change', function () {
      //   this.$refs.videoPlayer.player.playbackRate = this.playerOptions.playbackRates;
      // });

      // this.$refs.videoPlayer.player.ready(function () {
      //   const num = Math.round(Math.random()*5+5);
      //   // 定义一个随机常数倍数
      //   var _this = this
      //   //速率
      //   setTimeout(function () {
      //     // _this.playbackRate(parseFloat(10));// 能设定固定值
      //     _this.playbackRate(parseFloat(num));  // 随机的
      //   }, 20);
      // });
    },
    // 视频静音
    videoMute () {
      this.$refs.videoPlayer.player.muted(true);
    },
    //获取视频播放进度 进度更新(当前播放位置发生变化时触发)(视频接收到新内容会一直调用)(高频调用)
    onPlayerTimeupdate (player) {
      //   this.currentTime = player.cache_.currentTime                                           进度条位置设置 ,  进入页面直接开始位置一一一一一一
      console.log(player);
    },
    /* 设置视频开始的进度 准备就绪(预加载前会调用)(初始化调用) */
    playerReadied (player) {
      player.currentTime(this.currentTime)
    },
    // 暂停回调   将视频播放的时间保存  暂停回调(暂停时调用)(用户操作调用)
    onPlayerPause (player) {
      console.log('player pause currentTime!', player.cache_.currentTime);
      // let that = this;
      //   存储player.currentTime 是当前暂停时间    用于下次断续播放
    },

    // 播放回调(播放时会调用)(用户操作调用)
    onPlayerPlay (player) {
      console.log('播放', player)
      this.$emit('onPlayerPlay', player)
    },
    // 播放状态改变回调
    playerStateChanged (playerCurrentState) {
      console.log('数据变化', playerCurrentState)
      this.$emit('playerStateChanged', playerCurrentState)
    },
    //视频播完回调 (结束)(视频播放完毕调用)
    onPlayerEnded (player) {
      console.log('结束', player)
      this.$emit('onPlayerEnded', player)
    },
    // 等待(视频中出现loading就会调用,加载时调用)(高频调用)
    onPlayerWaiting (player) {
      console.log('等待', player)
      this.$emit('onPlayerWaiting', player)
    },
    // 播放中(进入播放状态会调用)(等待onPlayerWaiting和播放onPlayerPlay执行后会调用)(高频调用)
    onPlayerPlaying (player) {
      console.log('播放中', player)
      this.$emit('onPlayerPlaying', player)
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata (player) {
      console.log('预加载', player)
      this.$emit('onPlayerLoadeddata', player)
    },
    // 媒体的readyState为HAVE_FUTURE_DATA或更高(预加载onPlayerLoadeddata调用后会调用)(初始化调用)
    onPlayerCanplay (player) {
      console.log('是否播放', player)
      this.$emit('onPlayerCanplay', player)
    },
    // 能够从头到尾播放(是否播放onPlayerCanplay调用后会调用)(初始化调用)这意味着可以在不缓冲的情况下播放整个媒体文件
    onPlayerCanplaythrough (player) {
      console.log('能够从头到尾播放', player)
      this.$emit('onPlayerCanplaythrough', player)
    }
  },
  beforeMount () {
    // let id = this.$route.query.id;
    // if (id != undefined && id != null) {
    //   //编辑
    //   localStorage.setItem("videoId", id);
    //   // this.loadCourseNodeVideo(id);
    // } else {
    //   id = localStorage.getItem("videoId");
    //   if (id != undefined && id != null) {
    //     // this.loadCourseNodeVideo(id);
    //   } else {
    //     localStorage.removeItem("videoId");
    //   }
    // }
  }
}
script>
 
<style>
.box {
  width: 50%;
  margin: 100px auto;
}
/* 重置样式也需要全局挂载 */
* {
  margin: 0;
  padding: 0;
}
.course_node_video {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  /* object-fit:fill; */
}

/* 是否禁止拖动进度条 */
/* .course_node_video >>> .vjs-progress-control {
  pointer-events: none;
} */

/* 这里深度选择器这种生效,需要去掉style标签里面的scoped才可以生效使用,才可以铺满屏幕 */
::v-deep video {
  width: 100% !important;
  /* 我的容器高度设置的是100vh-95px,你们根据你们容器高度设置视频高度即可 */
  height: calc(100vh - 95px) !important;
  /* 消除两边留白 */
  object-fit: fill;
}

.footer {
  width: 100%;
  height: 50px;
  /* border: 1px solid red; */
  /* background-color: rgb(67,77,71); */
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}
.footer .list {
  width: 15%;
  height: 100%;
  /* background-color: rgba(255, 255, 255, 0.1); */
  background-color: rgb(67, 77, 71);
  border: 1px solid rgb(224, 208, 208);
  color: #fff;
  line-height: 2.8;
}
style>

效果如下

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

你可能感兴趣的:(vue,js方法,自适应,vue.js,前端,音视频,vuevideoplayer,前端video-player)