前端vue视频vue-video-player插件总结知识点案例(带源码)-程序员宅基地

技术标签：自适应音视频前端video-player vue vuevideoplayer 前端 vue.js js方法

文档

文档地址

安装

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,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        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,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        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', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。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>

效果如下

在这里插入图片描述

最后

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

本文链接：https://blog.csdn.net/m0_49714202/article/details/125312364

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

settext 下划线_Android TextView 添加下划线的几种方式-程序员宅基地

文章浏览阅读748次。总结起来大概有5种做法：将要处理的文字写到一个资源文件，如string.xml(使用html用法格式化)当文字中出现URL、E-mail、电话号码等的时候，可以将TextView的android:autoLink属性设置为相应的的值，如果是所有的类型都出来就是**android:autoLink="all"，当然也可以在java代码里做,textView01.setAutoLinkMask(Li..._qaction::settext 无法添加下划线

TableStore时序数据存储 - 架构篇_tablestore 时间类型处理-程序员宅基地

文章浏览阅读6.3k次，点赞2次，收藏10次。摘要：背景随着近几年物联网的发展，时序数据迎来了一个不小的爆发。从DB-Engines上近两年的数据库类型增长趋势来看，时序数据库的增长是非常迅猛的。在去年我花了比较长的时间去了解了一些开源时序数据库，写了一个系列的文章（综述、HBase系、Cassandra系、InfluxDB、Prometheus），感兴趣的可以浏览。背景随着近几年物联网的发展，时序数据迎来了一个不小的爆发。从DB..._tablestore 时间类型处理

Ubuntu20.04下成功运行VINS-mono_uabntu20.04安装vins-mono-程序员宅基地

文章浏览阅读5.7k次，点赞8次，收藏49次。可以编译成功但是运行时段错误查找原因应该是ROS noetic版本中自带的OpenCV4和VINS-mono中需要使用的OpenCV3冲突的问题。为了便于查找问题，我只先编译feature_tracker包。解决思路历程：o想着把OpenCV4相关的库移除掉，但是发现编译feature_tracker的时候仍然会关联到Opencv4的库，查找原因是因为cv_bridge是依赖opencv4的，这样导致同时使用了opencv3和opencv4,因此运行出现段错误。oo进一步想着（1）把vins-mon_uabntu20.04安装vins-mono

TMS320C6748_EMIF时钟配置_tms 6748-程序员宅基地

文章浏览阅读3.6k次，点赞3次，收藏12次。创龙TL6748开发板中，EMIFA模块使用默认的PLL0_SYSCLK3时钟，使用AISgen for D800K008工具加载C6748配置文件C6748AISgen_456M_config（Configuration files，在TL_TMS6748/images文件夹下），由图可以看到DIV3等于4，注意这里的DIV3就是实际的分频值（x），而不是写入相应PLL寄存器的值（x-1）。_tms 6748

eigen稀疏矩阵拼接（基于块操作的二维拼接）的思考-程序员宅基地

文章浏览阅读5.9k次，点赞4次，收藏13次。转载请说明出处：eigen稀疏矩阵拼接（块操作）eigen稀疏矩阵拼接（块操作）关于稀疏矩阵的块操作：参考官方链接 However, for performance reasons, writing to a sub-sparse-matrix is much more limited, and currently only contiguous sets of columns..._稀疏矩阵拼接

基于Capon和信号子空间的变形算法实现波束形成附matlab代码-程序员宅基地

文章浏览阅读946次，点赞19次，收藏19次。波束形成是天线阵列信号处理中的一项关键技术，它通过对来自不同方向的信号进行加权求和，来增强特定方向的信号并抑制其他方向的干扰。本文介绍了两种基于 Capon 和信号子空间的变形算法，即最小方差无失真响应 (MVDR) 算法和最小范数算法，用于实现波束形成。这些算法通过优化波束形成权重向量，来最小化波束形成输出的方差或范数，从而提高波束形成性能。引言波束形成在雷达、声纳、通信和医学成像等众多应用中至关重要。它可以增强目标信号，抑制干扰和噪声，提高系统性能。