关于vue-video-player 实现跳转到特定位置并自动播放

Posted on 2021-11-08 11:01  凡凡0410  阅读(5738)  评论(0编辑  收藏  举报
//实现跳转到固定位置
this.player.currentTime(this.videoDetial.duration);
// 自动播放
this.player.play();

无法使用

默认 playerOptions.autoplay = false; 在点击确认自动播放按钮之后,设置为playerOptions.autoplay = true; 这样会自动播放,但是不会跳转到特定位置,不知道原因,
于是使用this.player.play() 方法强行执行播放

完整代码

<video-player  class="video-player vjs-custom-skin"   
   :playsinline="true" 
   :options="playerOptions"
   @canplay="canplay($event)"
   @play="play($event)"
   @pause="pause($event)"
   @ended="ended"
   @timeupdate="timeupdate($event)"
   @seeking="seeked"
></video-player>
data() {
    return {
      videoDetial: {},
      duration: 0,  // 视频总长
      player:null,
      playerOptions: {
          autoplay: false,  //是否自动播放
          muted: false,   //默认音量为静音
          language: 'zh-CN',
          playbackRates: [0.75, 1.0, 1.25,1.5, 2.0 ], //倍数
          sources: [{  //视频data
            type: "",
            src: "http://xxxx.mp4",
            
          }],
          fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
          aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
          poster: "", //你的封面地址
          notSupportedMessage:"浏览器不支持使用video标签/此视频暂无法播放,请稍后再试",
          controlBar:{
            timeDivider:true,
            durationDisplay:true,
            remainingTimeDisplay:true
          }
        }
    };
  },
  watch: {
    duration(){
    
      this.continuePlay();
    }
  },   
methods: {
    loop(currentTime){  // 视频轮询以计算播放时间
      var current = currentTime;
      //可以在这里加入请求,时刻向后端请求,通知服务器,目前视频播放的时长,以便下次播放视频,直接跳转
      this.last = current;
    },
     //默认加载之后,就会执行该函数
    canplay(player){
      this.player = player;
      this.duration = player.duration();
    },
    //点击视频播放
    play(player){
      clearInterval(this.timeid);
      this.interval(this.player.duration);
    },
    //点击暂停时触发
    pause(){
      clearInterval(this.timeid);
      this.loop(this.player.duration);
    },
    ended(){
      clearInterval(this.timeid);
    },
    timeupdate(player){   // 元素的currentTime发生变化时触发
      this.curr = player.currentTime;
      // 限制快进
      if(this.curr - this.oldTime > 2) {
        this.player.currentTime(this.oldTime);
      } else {
        this.oldTime = this.curr;
      }
    },
    seeked(){  // 跳跃操作完成时触发
       clearInterval(this.timeid)
    },
    interval(currentTime){
      this.timeid = setInterval(() => {
        this.loop(currentTime);
      }, 10000);
    },
    // 续播
    continuePlay(){
      let lastTime  = 30;
      if(lastTime  >0 ){
        Dialog.confirm({
          title: '提示',
          message: "上次观看到"+ (lastTime  ?`${lastTime  }分`:'') + 0+"秒,是否继续播放?"
        }).then(()=>{
      // 自动跳转到对应的位置并播放  
      this.player.currentTime(this.videoDetial.duration);
this.player.play();
        }).catch((err)=>{          
            this.player.currentTime(0);
        })
      }
      else{
        this.player.currentTime(0);
      }
    }
  },
  created() {
    this.videoDetial = JSON.parse(sessionStorage.getItem('videoData'));
  },                  

 

Copyright © 2024 凡凡0410
Powered by .NET 9.0 on Kubernetes