關於vue-video-player 實現跳轉到特定位置並自動播放


//實現跳轉到固定位置
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')); }, 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM