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