vue-video-player记录上次播放时间继续播放

最近项目需求记录上次视频播放时长，下次接着播放

1.html

代码如下（示例）：

<video-player  class="video-player-box"
    ref="videoPlayer" 
    :playsinline="true" 
    :options="playerOptions"
    @play="onPlayerPlay($event,'play')"
    @pause="onPlayerPause($event,'pause')"
    @timeupdate="onPlayerTimeupdate($event,'timeupdate')"
    @ready="playerReadied($event)"
    @ended="onPlayerEnded($event)"
></video-player>

2.script

代码如下（示例）：

export default {
  data() {
    return {
		playerOptions : {
          // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/media/media.mp4" //url地址
          }],
        //   poster: "https://file02.16sucai.com/d/file/2014/0829/b871e1addf5f8e96f3b390ece2b2da0d.jpg", //你的封面地址
          // width: document.documentElement.clientWidth, //播放器宽度
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
      },
      timer:null, //定时器
      durations:null, //播放时间
    }
  }
  methods:{
  	putLearningObj () {
        //   向后台传值
        let _this = this
        let time = sessionStorage.getItem('currentTime'+this.cacheVideoObj.videoId)
        if (time) {
            _this.cacheVideoObj.time = time
        }else{
            _this.cacheVideoObj.time = _this.durations 
        }
        putCacheVideo(this.cacheVideoObj).then(res=>{
            console.log(res)
        })
    },
	onPlayerEnded(player){
        // 向后台传值  
          console.log(this.durations,player)
          this.putLearningObj()
      },
      onPlayerPlay(player) {
        console.log('player play!', player)
      },
      onPlayerPause(player) {
        console.log('player pause!',this.durations, player)
        // 向后台存播放时间
        this.putLearningObj()
      },
      
      onPlayerTimeupdate(player){
        this.durations = player.cache_.currentTime
        sessionStorage.setItem('currentTime'+this.cacheVideoObj.videoId,this.durations); 
      },
      // player is ready
      playerReadied(player) {
        // // 从后台获取视频播放时间
        // player.currentTime(this.durations)
          let _this = this
          let time = sessionStorage.getItem('currentTime'+this.cacheVideoObj.videoId)
          if (time) {
              player.currentTime(time)
          }else{
            getCacheVideo(_this.cacheVideoObj).then(res=>{
                if (res.code == 200) {
                    player.currentTime(res.data)
                }else{
                    _this.$message.error(res.msg)
                }
            })
         }
     }
  }
}

标签：vue,currentTime,durations,cacheVideoObj,player,time,播放
来源： https://blog.csdn.net/webCandy/article/details/121538029