vue-video-player 实现断点续播，currentTime不生效问题。

VIP文章笨笨要努力

已于 2022-03-28 09:55:53 修改

阅读量3.3k

点赞数

分类专栏： video谷歌断点播放不生效设置currentTime不生效文章标签： vue.js

于 2022-03-28 09:55:34 首次发布

本文链接：https://blog.csdn.net/qq_41117240/article/details/123786389

版权

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-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