UniApp video 使用（自定义进度条，及微信无法暂停播放设置进度问题）

• 在小程序开发的时候，其他小程序能够正常暂停、播放、切换进度，但是在微信小程序发现没有生效，原因是平台差异

  // 官网案例是这样获取 videoContext 的
  this.videoContext = uni.createVideoContext('myVideo')
  
  // 但是如果需要处理微信小程序的差异，则需要将 this 传入
  this.videoContext = uni.createVideoContext('myVideo', this)
  

• 案例效果

  

  <template>
      <view class="video-view">
          <!-- 播放器 -->
          <video
              autoplay
              id="myVideo"
              class="video-content"
              :src="drama.limit_url"
              :controls="false"
              @loadedmetadata="loadedmetadata"
              @timeupdate="timeUpdate"
          >
          </video>
          <!-- 遮盖层 -->
          <view class="video-cover" @click="touchPlay">
              <view class="view-cover-content">
                  <!-- 信息栏 -->
                  <view class="video-info">
                      <!-- 弹簧 -->
                      <view style="flex: 1;"></view>
                      <!-- 显示时间 -->
                      <view class="video-time" v-if="isDrag">
                          <view class="video-time-current">{{ dragStarTime }}</view>
                          <view style="padding: 0 20rpx;">/</view>
                          <text>{{ dragEndTime }}</text>
                      </view>
                      <!-- 进度栏 -->
                      <view class="slider-view" @click.stop>
                          <u-slider
                              v-model="currentTime"
                              min="0"
                              :max="duration"
                              inactiveColor="rgba(255, 255, 255, 0.2)"
                              activeColor="#F8DD52"
                              @changing="sliderChanging"
                              @change="sliderChange"
                          ></u-slider>
                      </view>
                      <!-- 当前集数 -->
                      <view class="video-info-current" @click.stop>
                          <!-- 名称 -->
                          <view class="video-info-title text-ell" v-if="drama.project_drama_name">{{ drama.project_drama_name }}-第{{ drama.eq_number }}集</view>
                          <!-- 弹簧 -->
                          <view style="flex: 1;"></view>
                          <!-- 选集 -->
                          <view class="video-info-btn" @click="touchSwitch">
                              <view class="arrow-right-title">选集</view>
                              <u-icon name="arrow-right" color="#fff"></u-icon>
                          </view>
                      </view>
                  </view>
              </view>
          </view>
      </view>
  </template>
  
  <script>
  export default {
      props: {
          // 当前剧集
          drama: {
              type: Object,
              default: () => {}
          }
      },
      data() {
          return {
              // 播放器上下文
              videoContext: undefined,
              // 播放状态
              isPlay: true,
              // 当前时长
              currentTime: 0,
              // 总时间
              duration: 0.1,
              // 是否正在拖拽进度
              isDrag: false,
              // 拖拽时视频时间
              dragStarTime: '',
              dragEndTime: '',
              // 当前还没显示过提示消息
              isShowMsg: true
          }
      },
      mounted () {
          // 获取播放器上下文（后面的 this 需要传入，在微信小程序上无法暂停播放拖拽精度，所以需要传入这个）
          this.videoContext = uni.createVideoContext('myVideo', this)
      },
      methods: {
          // 播放
          play () {
              this.videoContext.play()
          },
          // 暂停
          pause () {
              this.videoContext.pause()
          },
          // 播放状态切换
          touchPlay () {
              this.isPlay = !this.isPlay
              if (this.isPlay) {
                  this.play ()
              } else {
                  this.pause()
              }
          },
          // 播放进度发生变化
          timeUpdate (e) {
              // 拖拽时不需要进行更新
              if (!this.isDrag) {
                  // 更新进度
                  const { currentTime } = e.detail
                  this.currentTime = currentTime
                  // 播放完成
                  if (Math.trunc(currentTime) === Math.trunc(duration)) {
                      this.$emit('playcomplete', e)
                  }
                  // 返回当前播放时间
                  this.$emit('timeupdate', e)
              }
          },
          // 拖拽结束
          sliderChange (value) {
              // 停止拖拽
              this.isDrag = false
              // 判断一下是否大于基础时间
              if (this.duration > 0.1) {
                  // 跳到指定时间点
                  this.videoContext.seek(value)
                  // 并调用播放
                  this.play()
              }
          },
          // 正在拖拽
          sliderChanging (value) {
              // 开始拖拽
              this.isDrag = true
              // 刷新时间
              this.reloadVideoTime()
          },
          // 刷新显示时间
          reloadVideoTime () {
              // 当前时间
              this.dragStarTime = this.$pub.TIME_CONVERT(this.currentTime)
              // 总时间
              this.dragEndTime = this.$pub.TIME_CONVERT(this.duration)
          },
          // 加载完成
          loadedmetadata (e) {
              const { duration } = e.detail
              // 记录视频总时间
              this.duration = duration
              // 回调
              this.$emit('loadcomplete')
          },
          // 切换选集
          touchSwitch () {
              this.$emit('switch')
          }
      }
  }
  </script>
  
  <style lang="scss">
  .video-view {
      position: relative;
      width: 100%;
      height: 100%;
      .video-content {
          width: 100%;
          height: 100%;
      }
      .video-cover {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          .view-cover-content {
              position: relative;
              width: 100%;
              height: 100%;
              .video-info {
                  display: flex;
                  flex-direction: column;
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  width: 100%;
                  height: 246rpx;
                  background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.40) 100%, rgba(0,0,0,0.40) 100%);
                  .slider-view {
                      flex-shrink: 0;
                  }
                  .video-info-current {
                      flex-shrink: 0;
                      display: flex;
                      align-items: center;
                      width: 100%;
                      color: #fff;
                      font-size: 34rpx;
                      padding: 0 40rpx 40rpx;
                      width: calc(100% - 80rpx);
                      .video-info-btn {
                          flex-shrink: 0;
                          display: flex;
                          align-items: center;
                          padding-left: 40rpx;
                          .arrow-right-title {
                              margin-right: 10rpx;
                          }
                      }
                  }
                  .video-time {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-size: 64rpx;
                      color: rgba(255, 255, 255, 0.7);
                      .video-time-current {
                          color: #fff;
                      }
                  }
              }
          }
      }
  }
  </style>