zhangsiye/mini/pages/episode/play.vue

<template>
  <view class="play-container">
    <!--播放数据-->
    <view class="view-num main-left cross-center">
      <u-icon name="eye-fill" :color="$colors.primaryColor" size="26rpx" />
      <text>321</text>
    </view>
    <!--按钮-->
    <view class="status-bar dir-top-wrap main-center">
      <view class="item fav dir-top-wrap main-center cross-center">
        <u-icon name="heart-fill" size="58rpx" :color="$colors.primaryColor" />
        <text class="active">3.2k</text>
      </view>
      <view class="item collect dir-top-wrap main-center cross-center">
        <u-icon name="star-fill" size="58rpx" :color="$colors.defaultColor" />
        <text>3.2k</text>
      </view>

      <view class="item share dir-top-wrap main-center cross-center">
        <u-icon name="share-fill" size="58rpx" :color="$colors.defaultColor" />
        <text>3.2k</text>
      </view>
    </view>
    <!--底部-->
    <view class="footer main-between cross-center">
      <view class="icon" />
      <view class="name">
        <u-text text="jldjklsjgkldjglkdfhgklfdhgkldhgjklfhjkfhgjkfdhgjkdfhgk" :color="$colors.infoColor" :lines="1" />
      </view>
      <view class="arrow">
        <u-icon name="arrow-up" :color="$colors.infoColor" size="32rpx" />
      </view>
    </view>
    <!--视频播放-->
    <view class="video-box main-center cross-center">
      <!-- 控制按钮 - 播放 -->
      <view v-if="!isPlaying" class="play-btn main-center cross-center" @tap="handlePlay">
        <u-icon name="play-right-fill" size="100rpx" :color="$colors.defaultColor" />
      </view>
      <!-- 控制按钮 - 暂停 -->
      <view v-if="isPlaying" class="pause-layer" @tap="handlePause" />
      <!--进度条-->
      <view v-if="isPlaying" class="progress-container">
        <view class="progress" :style="{width: progress+'%'}" />
      </view>
      <video
        id="video"
        :show-play-btn="playBtn"
        :show-fullscreen-btn="fullscreenBtn"
        :controls="controls"
        object-fit="contain"
        style="width: 100%;height: 100%;"
        poster="http://zhengda.oss-cn-chengdu.aliyuncs.com/zhangsiye/images/17ec18c234d9f808da0a83cd46749b32.jpg"
        src="http://zhengda.oss-cn-chengdu.aliyuncs.com/zhangsiye/files/002fa937509b428ca12c826c28aba7c4.mp4"
        @timeupdate="timeupdate"
      />
    </view>

  </view>
</template>

<script>
export default {
  name: 'Play',
  data() {
    return {
      id: null,
      isPlaying: false,
      videoContext: null,
      controls: false,
      fullscreenBtn: false,
      playBtn: false,
      progress: 0
    }
  },
  computed: {},
  methods: {
    timeupdate({ detail }) {
      // currentTime, duration
      if (detail.duration) {
        this.progress = (detail.currentTime / detail.duration * 100).toFixed(2)
      }
      console.log('-->data', detail)
      // this.progress =
    },
    handlePlay() {
      this.isPlaying = true
      this.videoContext.play()
    },
    handlePause() {
      if (!this.isPlaying) return
      this.isPlaying = false
      this.videoContext.pause()
    }
  },
  onLoad(options) {
    this.videoContext = uni.createVideoContext('video', this)
    this.id = options.id
  }
}
</script>

<style lang="scss" scoped>
    .play-container {
      font-size: 28rpx;
      .video-box{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .play-btn{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: rgba(255,255,255,0);
          z-index: 99;
        }
        .pause-layer{
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: transparent;
          z-index: 99;
        }
        video{
          position: absolute;
          z-index: 98;
        }
        .progress-container{
          width: 93vw;
          background: #fff;
          height: 10rpx;
          position: fixed;
          z-index: 100;
          bottom: 160rpx;
          .progress{
            height: 10rpx;
            background: linear-gradient(270deg, #6EEBE8 0%, #FF74B9 100%);
          }
        }
      }
      .view-num{
        position: fixed;
        right: 20rpx;
        top: 40rpx;
        color: #fff;
        font-size: 26rpx;
        z-index: 100;
        text{
          margin-left: 10rpx;
        }
      }

      .status-bar{
        position: fixed;
        bottom: 300rpx;
        right: 40rpx;
        color: $default-color;
        z-index: 100;
        .item{
          margin-bottom: 40rpx;
          text{
            margin-top: 10rpx;
            &.active{
              color: $primary-color;
            }
          }
        }
      }

      .footer{
        position: fixed;
        width: 95vw;
        height: 76rpx;
        background: rgba(24, 28, 47, 0.8);
        bottom: 50rpx;
        left: 50%;
        transform: translateX(-50%);
        font-size: 26rpx;
        color: $info-color;
        border-radius: 20rpx;
        padding: 0 20rpx;
        z-index: 100;
        .icon{
          background: url("/static/image/video.png") no-repeat center;
          background-size: 70%;
          width: 80rpx;
          height: 80rpx;
        }
        .name{
          text-align: left;
          flex: 1;
          padding: 0 30rpx;
        }
      }
    }
</style>