vue-video-player はブレークポイントの再生再開を実装しており、currentTime は有効になりません。

vue-video-player はブレークポイントの再生再開を実装しており、currentTime は有効になりません。

ビデオ設定の currentTime は有効になりません。また、Google Chrome も有効になりません。

1. vue-video-player はビデオ再生をどのように実装しますか

この部分については、インターネット上に多くの詳細な説明があります。詳細については、vue-video-player コンポーネント再生の実装方法(または他の記事) を参照してください。

2. ビデオの再生を実現した後、ブレークポイント再生を実現する必要があります。

1. つまり、再生開始時間は 0 秒から始まりませんが、独自の設定(通常はバックエンドから渡される) に従って、使用シナリオで学習 Web サイトに最後にログインしたときに、学習ビデオを視聴します。合計時間が 50 分であると仮定して、(視聴後) 20 分間視聴します。次に、学習 Web サイトに再度ログインしてこのビデオをクリックして再生するときも、20 分から再生を開始する必要があります。 0 から開始するのではなく、分単位で開始します。
   このとき、ブレークポイントレジュームを実装する必要があります。

私のコンポーネントのソースコードをここに貼り付けます。

<template>
  <div class="an-video" :style="{ width: width, height: height }">
    <video-player
      class="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: {
    
    
    //必传：url
    width: {
    
    
      //宽度
      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. 問題があります:

1. 状況 1: 参照されたローカル ビデオは、Firefox と Google の両方のブレークポイントから再開できる
2. 状況 2: http アドレスによって参照されるビデオは、Firefox では有効になりますが、Google では有効になりません。

4. 解決策

応答ヘッダーの Content-Length および Accept-Ranges の設定を変更します。
ie にも対応する問題があり、以下の図のプロンプトに従って特定の変更を行うことができます。Firefoxなら問題ないです。

5. 注意を払う

同じ問題は vue-video-player コンポーネントだけでなくビデオのネイティブ Dom にも存在し、変更方法も同じです。