current position:Home>Set video label based on Vue

Set video label based on Vue

2022-04-29 11:15:43Black and white guests

<template>
  <div>
      <div class="video_box">
        <div class="video_center">
              <div class="resource-container" style="width:70%;position:relative;">
                <div class="video-title">1233123</div>
                <template>
                  <video ref="video" id="video" src="./cat.mp4" :autoplay="videolist.autoplay" :controls="videolist.controls" :controlslist="videolist.controlslist" :webkit-playsinline="webkitplaysinline" style="width:100%;height:100%" >
                  </video>
                </template>
              </div>
              <div style="width:30%" class="video_right">
                <p style="padding:1rem;"> Anthology </p>
                <ul>
                  <li v-for="(item,index) in 3" :key="index" style="cursor:pointer;padding:10px;" :class="activeIndex == index + '' ? 'video-active':''" @click="open(item,index)" >{
   {index + 1}}.  The Chinese people ...</li>
                </ul>
              </div>
        </div>
      </div>
  </div>
</template>

<script> export default {
       name: '', data() {
       return {
       videolist:{
       autoplay:false, //  Auto play  controls:'controls', // operation  controlslist:'nodownload noplaybackrate' /* 1、nodownload:  Don't download the button  2、nofullscreen:  Don't use full screen buttons  3、noremoteplayback:  Don't replay it remotely  4、disablePictureInPicture  Don't draw in picture buttons  5、noplaybackrate  Don't play the speed button  */ }, //video To configure  webkitplaysinline:'true', playHistory:{
       resourceIndex:-1, currentFileIndex:-1, currenTime:0 }, // History playback record located during initialization  videoPlayer:null, activeIndex:'0', // Choose to switch the background color for the course on the right  currentResource:{
      } // Current resources  } }, mounted(){
       this.querylist() }, methods: {
       querylist(){
       this.$nextTick(() => {
       this.initVideoplayer() this.fileTimelengthRecord() }) }, initVideoplayer(){
       if(!this.videoPlayer && this.$refs.video){
       this.videoPlayer = this.$refs.video //  No fast forward  let sym setInterval(() => {
       let time = this.videoPlayer.currentTime if(time-sym>1){
       this.videoPlayer.currentTime=sym } sym=this.videoPlayer.currentTime },500) //  Video progress changes  --  Play triggers  this.videoPlayer.addEventListener('timeupdate',(e) => {
       // console.log(this.videoPlayer.currentTime,'currentTime') // Current playback progress  // console.log(this.videoPlayer.duration,'duration') // Current playback progress  sessionStorage.setItem('currentTime',this.videoPlayer.currentTime) sessionStorage.setItem('duration',this.videoPlayer.duration) }) // Video pause  --  Click pause ( Exit will also trigger and record the time ) this.videoPlayer.addEventListener('pause',(e) => {
       // this.fileTimelengthRecord(this.videoPlayer.currentTime,this.videoPlayer.duration) }) // //  Progress drag  // this.videoPlayer.addEventListener('seeking',(e) => {
       // console.log(this.videoPlayer.currentTime,'seeking Drag ') // }) // //  Progress drag ( The progress bar will be dragged first  pause --> seeked--->play) // this.videoPlayer.addEventListener('seeked',(e) => {
       // console.log(this.videoPlayer.currentTime,'seeked Drag ') // }) //  Video playback  --  Click play  this.videoPlayer.addEventListener('play',(e) => {
      }) //  Video playback  --  End of play  this.videoPlayer.addEventListener('ended',(e) => {
       console.log(this.videoPlayer.currentTime,'ended  The playback is finished ') }) } }, //  Progress record update  -  The current duration of the attachment  fileTimelengthRecord(){
       let stat = sessionStorage.getItem('currentTime') // let end = sessionStorage.getItem('duration') if(stat > 0){
       this.ifopen() }else{
       this.videoPlayer.currentTime = 0 } }, ifopen(){
       this.$confirm(' Whether to start playing from the last record ?', ' Tips ', {
       confirmButtonText: ' determine ', cancelButtonText: ' Cancel ', type: 'warning' }).then(() => {
       let stat = sessionStorage.getItem('currentTime') this.videoPlayer.currentTime = stat this.videoPlayer.play() }).catch(() => {
       this.videoPlayer.currentTime = 0 this.videoPlayer.pause() }) }, open(it,id){
       // sessionStorage.setItem('arrylistId',id) sessionStorage.setItem('currentTime',0) sessionStorage.setItem('duration',0) this.activeIndex = id } } } </script>

<style scoped> .video_box{
       margin: 0 auto; margin-top: 50px; width: 1450px; height: 640px; border: 1px solid #ccc; background: #000; } .video_center{
       margin: 20px auto; width: 1400px; height: 600px; background: #3f3f3f; display: flex; justify-content: space-between; } .video-title{
       width: 100%; display: none; padding: 1rem; position: absolute; top: 0; color: #fff; background-color: rgb(6, 6, 6,0.3); z-index: 2; } .resource-container:hover .video-title{
       display: block; } .video_right > p{
       background-color: rgb(6, 6, 6,0.3); color: #fff; } .video-active{
       background-color: rgb(6, 6, 6,0.3); color: aqua; } </style>

copyright notice
author[Black and white guests],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290954358233.html

Random recommended