vue-video-player 實現斷點續播，currentTime不生效問題。

video設置currentTime不生效問題，谷歌瀏覽器不生效。

1. vue-video-player 如何實現播放視頻

關于這部分，網上有很多細致的講解，詳情請看（或其他文章）： 如何實現vue-video-player 組件播放

2.實現視頻的播放后，需求是，要求實現斷點播放。

即開始播放時間不再是從0秒開始，而是根據我們自己設置（一般是后端傳值過來的），使用場景上一次登錄學習網站，看一個學習視頻，看到20分鐘（看完），假設總時長50分鐘，那么下次我們再次登錄學習網址，點擊這個視頻播放時，需要依舊從20分開始播放，而不是從0開始播放。
這個時候就需要實現斷點續播。

在此貼上我的組件的源代碼：

<template><div class="an-video" :style="{ width: width, height: height }"><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions":readiedTime="readiedTime"@play="onPlayerPlay($event)"@pause="onPlayerPause($event)"@ended="onPlayerEnded($event)"@ready="playerReadied($event)"// 實現斷點續播的關鍵@timeupdate="onPlayerTimeupdate($event)"></video-player></div> </template><script> import { videoPlayer } from "vue-video-player"; import "video.js/dist/video-js.css"; import "vue-video-player/src/custom-theme.css";export default {name: "AnVideo",components: {videoPlayer,},props: {//必傳：urlwidth: {//寬度type: String,default: "400px",},height: {//高度type: String,default: "240px",},url: {type: String, //必選參數，上傳的地址require,},playbackRates: {type: Array,default: function () {return [0.7, 1.0, 1.5, 2.0]; //播放速度},},autoplay: {type: Boolean,default: false, //如果true,瀏覽器準備好時 自動播放。},muted: {type: Boolean,default: false, //默認情況下將會消除任何音頻。},loop: {type: Boolean,default: false, //視頻一結束就重新開始,循環播放。},aspectRatio: {type: String,default: "16:9", //播放器的動態大小,代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）},poster: {type: String,default: "/課程學習.jpg", //視頻封面地址，使用了本地一個圖片},showPoster: {type: Boolean,default: false, //是否展示 ，視頻封面地址},readiedTime: {type: String,default: "", //設置 開始播放視頻的位置,已經看完的時間},},data() {return {playerOptions: {}, // 播放信息player: null,duration: 0, // 視頻總長};},created() {this.initData();},methods: {initData() {this.playerOptions = {playbackRates: this.playbackRates, //播放速度autoplay: this.autoplay, //如果true,瀏覽器準備好時開始回放。muted: this.muted, // 默認情況下將會消除任何音頻。loop: this.loop, // 導致視頻一結束就重新開始。preload: "auto", //規定是否預加載視頻 ，auto - 當頁面加載后載入整個視頻 meta - 當頁面加載后只載入元數據，none - 當頁面加載后不載入視頻language: "zh-CN",aspectRatio: this.aspectRatio, // 將播放器置于流暢模式，并在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。poster: this.poster, //你的封面地址width: document.documentElement.clientWidth,notSupportedMessage: "此視頻暫無法播放，請稍后再試", //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true, //全屏按鈕},};// 不設置封面地址if (!this.showPoster) {this.playerOptions.poster = "";}// 設置 播放地址和視頻類型if (this.url) {let sources = [];let typeStr = this.url.split(".");let videoType = typeStr[typeStr.length - 1];sources.push({src: this.url,type: "video/" + videoType, // 類型});this.playerOptions.sources = sources;}},// 播放回調onPlayerPlay(player) {this.$emit("play", player);console.log("onPlayerPlay");},// 播放暫停回調onPlayerPause(player) {console.log("onPlayerPause暫停", player);this.$emit("pause");},// 播放結束onPlayerEnded() {console.log("onPlayerEnded 播放結束", player);this.$emit("ended");},//獲取當前播放進度 ， 當前播放位置發生變化時觸發。onPlayerTimeupdate(player) {console.log("onPlayerTimeupdate播放位置發生變",player.cache_.currentTime);// let currentTime = player.cache_.duration; //總時長let currentTime = player.cache_.currentTime; //當前時間this.$emit("timeupdate", currentTime);},// 設置播放進度，實現斷點續播。playerReadied: function (player) {console.log("playerReadied", player);if (this.readiedTime) {//后端傳值來的時間// 我的項目中，后端傳值為 字符串格式 “00：00：00” 時：分：秒 （所以我做了處理，將其轉化為秒）let time = this.readiedTime.split(":");let newTime =Number(time[0]) * 3600 + Number(time[1]) * 60 + Number(time[2]);console.log("處理后的時間", newTime);player.currentTime(newTime);// 此處，設置了開始播放時間。}},}, }; </script><style scoped> .an-video {/* width: 400px; */margin-left: 2%; } .an-video >>> .video-js .vjs-big-play-button {top: 40%;left: 40%; }.an-video >>> .vjs-progress-control { // 不允許自己在界面中，通過點擊，調節進度。（設置后，進度條會不可手動調節）pointer-events: none !important; } </style>

3.出現問題：

情況一： 引用的本地視頻，在火狐和谷歌都可以實現斷點續播

情況二：引用的http的地址的視頻，在火狐可以生效，在谷歌無法生效。

4. 解決方案

更改設置響應頭Content-Length 和 Accept-Ranges。
在ie中也會有相應的問題產生，具體的可以按照下圖的提示進行更改。火狐是沒有問題的。

5.注意

同樣的問題并不是只有vue-video-player組件中存在，是video的原生Dom中就存在，修改方法一樣。

總結

以上是生活随笔為你收集整理的vue-video-player 实现断点续播，currentTime不生效问题。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。