微信小程序之PC端video 全屏播放时,通过键盘来控制播放以及播放进度

 <video class="video" id="myVideo" src="{
  
  {videoDatas.mediaUrl}}" bindfullscreenchange="onFullscreenChange"></video>

  data: {
    isPC: false //判断是否是PC端
  },

 onLoad: function (options) {
    const that = this
    // 判断是否是 PC 端
    const systemInfo = wx.getSystemInfoSync();
    const platform = systemInfo.platform.toLowerCase();
    if (platform === 'windows' || platform === 'mac') {
      that.setData({
        isPC: true
      })
    }
  },

  //监听进入和退出全屏
  onFullscreenChange(event) {
    var that = this;
    //进入全屏
    if (event.detail.fullScreen == true) {
      // 注册键盘按下事件
      wx.onKeyDown((res) => {
        const keyCode = res.code;
        const step = 5; // 每次调整的秒数
        //暂停和播放
        if (keyCode === 'Space') {
          that.videoContext = that.videoContext || wx.createVideoContext('myVideo')
          if (that.data.videoDatas.play == false) {
            that.videoContext.play()
          } else {
            that.videoContext.pause()
          }
        } else if (keyCode === 'ArrowLeft') { //向左
          that.seekVideo(-step);
        } else if (keyCode === 'ArrowRight') { //向右
          that.seekVideo(step);
        }
      });
    } else {//退出全屏,关闭监听
      if (this.data.isPC == true) {
        wx.offKeyDown();
      }
    }
  },

  //更改播放进度
  seekVideo(step) {
    var that = this;

    //防止长按后进度更新不丝滑
    if (that._temp_submit) return
    that._temp_submit = true
    var inter = setTimeout(() => {
      clearTimeout(inter)
      that._temp_submit = false
    }, 200)

    var videoDatas = that.data.videoDatas;
    const newTime = videoDatas.currentTime + step;//当前播放进度+要求的进度
    that.videoContext = that.videoContext || wx.createVideoContext('myVideo')
    if (newTime >= 0 && newTime <= videoDatas.duration) {//更新后进度不可大于视频总时长,同时不可小于0
      that.videoContext.seek(newTime);//设置播放进度
      that.setData({
        "videoDatas.currentTime": newTime
      });
    }
  },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值