VAVABUY/components/y-video.vue

<template>
  <view>
    <DomVideoPlayer class="video" :style="{ 'height': height + 'px' }" ref="domVideoPlayer" object-fit='contain'
      :controls="controls" :autoplay="autoplay" :loop="loop" :src="item.video" :key="key" :muted="muted"
      :playback-rate="playbackRate" @play="onPlay" @pause="onPause" @ended="onEnded" @error="onError"
      @timeupdate="onTimeUpdate" @durationchange="onDurationChange" @ratechange="onRateChange"
      @fullscreenchange="onFullscreenChange" @tap.stop="change" />
    <view class="play-btn" @tap.stop="change" :style="{ left: `${width / 2}px`, top: `${height / 2}px` }"
      v-if="showPlayBtn">
      <up-icon name="play-right-fill" size="16" color="var(--light)"></up-icon>
    </view>
    <!-- loading -->
    <image class="loading" :style="{ left: `${width / 2}px`, top: `${height / 2}px` }" src="@/static/loading.gif"
      v-if="loading">
    </image>
    <view class="info" @click.stop="$emit('showMulu')">
      <text class="text title">@{{ item.user && item.user.realname }}</text>
      <text class="text" style="margin-top: 25rpx;font-size: 26rpx;line-height: 40rpx;">{{ item.title }}</text>
      <view class="shop_box" @click.stop="toShopDeatils(item)">
        <up-image :src="item.extend_data && item.extend_data.pic_url" width="70rpx" height="70rpx" radius="4">
          <template #error>
            <image class="toux" src="@/static/tx.png"></image>
          </template>
        </up-image>
        <text class="title">{{ item.extend_data && item.extend_data.title }}</text>
      </view>
    </view>

    <view class="btns" :style="{ height: height + 'px' }" @click.stop>
      <view class="userimg">
        <up-image :src="item.user && item.user.userimg" shape="circle" width="88rpx" height="88rpx">
          <template #error>
            <image class="toux" src="@/static/tx.png"></image>
          </template>

        </up-image>
        <view class="user_bottom" @click.stop="$emit('follow')" v-if="!item.is_follow">+</view>
      </view>

      <image class="btn" :src="item.is_goods ? '/static/dianzan_h.png' : '/static/dianzan.png'"
        @click.stop="$emit('like')">
      </image>
      <text class="text">{{ item.goods }}</text>
      <image class="btn" src="@/static/pinglun.png" @click.stop="$emit('showPinglun')"></image>
      <text class="text">{{ item.comments }}</text>
      <image class="btn" :src="item.is_collect ? '/static/shoucang_h.png' : '/static/shoucang.png'"
        @click.stop="$emit('collect')">
      </image>
      <text class="text">{{ item.collects }}</text>
      <image class="btn" src="@/static/fenxiang.png"></image>
    </view>
    <!-- <view class="progress">
      <view class="line" :style="{ width: lineWidth + 'px' }"></view>
    </view> -->
    <view class="_duration" @click.stop>
      <view style="flex-direction: row;flex: 1;">
        <text class="text">{{ currentTime ? currentTime : '00:00' }}</text>
        <text class="text" style="margin: 0 10rpx;">/</text>
        <text class="text" style="opacity: .5;">{{ duration ? duration : '00:00' }}</text>
      </view>
      <image class="shengyin" :src="muted ? '/static/jingyin.png' : '/static/yinliang.png'" @click="muted = !muted">
      </image>
      <image class="shengyin" style="margin-left:20rpx" src="/static/quanping.png" @click="fullScreen">
      </image>
    </view>
  </view>
</template>


<script>
import DomVideoPlayer from '@/components/DomVideoPlayer'
const systemInfo = uni.getSystemInfoSync();
import { t } from "@/locale"
export default {
  components: {
    DomVideoPlayer
  },
  props: {
    info: {
      type: Object,
      default: () => { }
    },
    item: {
      type: Object,
      default: () => { }
    },
    index: {
      type: Number,
      default: -1
    },
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      playing: true,
      loop: true,
      controls: false,
      autoplay: true,
      playbackRate: 1,
      currentTime: 0,
      duration: 0,
      showPlayBtn: false,
      loading: false,
      lineWidth: 0,
      muted: false,
      isZan: false,
      isSc: false,
      isFullscreen: false,
      width: systemInfo.screenWidth,
      height: systemInfo.screenHeight - 1 - 100,
      key: new Date().getTime(),
    }
  },
  watch: {
    current: {
      handler(val) {
        val == this.index ? this.play() : this.pause()
      }
    },
    playing: {
      handler(val) {
        // #ifdef APP-PLUS
        uni.setKeepScreenOn({
          keepScreenOn: val
        });
        // // #endif
      }
    }
  },
  methods: {
    change() {
      if (!this.isFullscreen) {
        this.playing ? this.pause() : this.play()
      }
    },
    play() {
      this.showPlayBtn = false
      this.playing = true;
      this.$refs.domVideoPlayer.play();
      // this.$refs[`domVideoPlayer${this.current}`] && this.$refs[`domVideoPlayer${this.current}`].play();
    },
    pause() {
      this.showPlayBtn = true
      this.playing = false
      // this.$refs.domVideoPlayer.pause()
      this.$refs.domVideoPlayer.pause()
    },
    onPlay() {
      if (this.current != this.index) {
        this.$refs.domVideoPlayer.pause()
        this.playing = false
      } else {
        this.playing = true
        this.showPlayBtn = false
        this.loading = false
        this.$emit('play', this.item)
      }
    },
    onPause() {
      this.showPlayBtn = true
      this.playing = false
    },
    onEnded() {
      this.currentTime = 0
      this.playing = false;
      setTimeout(() => {
        this.key = new Date().getTime()
      }, 150)
    },
    onError() {
      console.log("onError");
      if (this.current == this.index) {
        uni.showToast({
          title: '播放失败',
          duration: 1000,
          icon: 'none'
        })
        setTimeout(() => {
          this.key = new Date().getTime()
          this.onEnded()
        }, 1000)
      }
    },
    fullScreen() {
      this.$refs.domVideoPlayer.fullScreen();
    },
    onDurationChange(e) {
      if (this.loading) this.loading = false;
      if (!this.playing) this.playing = true;
      if (!this.duration || this.duration == '00:00') this.duration = this.secondToTime(e, 1)
    },
    onTimeUpdate(e) {
      this.currentTime = this.secondToTime(e)
      this.lineWidth = e / this.duration * this.width
    },
    secondToTime(s, n) {
      const t = parseInt(s)
      const hours = Math.floor(t / (60 * 60));
      const seconds = t % (60 * 60)
      const minutes = Math.floor(seconds / 60);
      const seconds2 = seconds % 60
      if (hours > 0) {
        return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds2.toString().padStart(2, '0')}`;
      } else {
        return `${minutes.toString().padStart(2, '0')}:${seconds2.toString().padStart(2, '0')}`;
      }
    },
    onRateChange(e) {
      this.playbackRate = e
    },
    onFullscreenChange(e) {
      console.log('onFullScreenChange', e)
    },
    toShopDeatils(item) {
      uni.navigateTo({
        url: `/pages/shop/productDetail?channel=${item.channel}&goods_id=${item.extend_data.num_iid}`
      })
    }
  },

  onhide() {
    this.pause()
  }
}
</script>

<style scoped lang="less">
@import url('@/style.less');

.action-box {
  margin-top: 30rpx;
  padding: 0 60rpx;
}

.action-box button {
  margin-top: 10rpx;
}

.video {
  width: 750rpx;
  background-color: #000000;
}

.text {
  color: #fff;
  font-size: 28rpx;
}

.info {
  position: absolute;
  z-index: 100;
  left: 0;
  bottom: 50px;
  width: 750rpx;
  padding: 30rpx 140rpx 130rpx 30rpx;
  .flex();
  flex-direction: column;

  .title {
    font-size: 36rpx;
    max-width: calc(750rpx - 140rpx - 60rpx);
  }

  .des {
    background-color: rgba(255, 255, 255, .1);
    border-radius: 10rpx;
    padding: 15rpx 20rpx;

    .text {
      font-size: 24rpx;
    }
  }
}

.btns {
  position: absolute;
  z-index: 100;
  right: 0;
  bottom: 0;
  width: 140rpx;
  .flex_position(flex-end);
  flex-direction: column;
  padding-bottom: 340rpx;

  .userimg {
    position: relative;
    margin-bottom: 40rpx;

    .user_bottom {
      position: absolute;
      left: 50%;
      top: 71rpx;
      margin-left: -17rpx;
      // margin-top: -14rpx;
      // margin-bottom: 40rpx;
      height: 34rpx;
      width: 34rpx;
      border-radius: 50%;
      background: var(--red);
      color: var(--bg);
      text-align: center;
      line-height: 34rpx;
      z-index: 9;
    }
  }



  .toux {
    height: 88rpx;
    width: 88rpx;
    border-radius: 50%;
    object-fit: cover;
  }

  .btn {
    height: 66rpx;
    width: 66rpx;
  }

  .text {
    margin-top: 10rpx;
    margin-bottom: 30rpx;
    font-size: 26rpx;
  }
}

.play-btn {
  height: 68rpx;
  width: 68rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  margin-left: -34rpx;
  margin-top: -34rpx;
  .flex_center();
}

.loading {
  position: absolute;
  height: 60rpx;
  width: 60rpx;
  margin-left: -30rpx;
  margin-top: -30rpx;
}

.progress {
  width: 750rpx;
  height: 90rpx;
  position: absolute;
  left: 0;
  bottom: 100rpx;

  .line {
    height: 2rpx;
    width: 500rpx;
    background-color: rgba(255, 255, 255, .35);
    transform: scaleY(.1);
  }

}

._duration {
  position: absolute;
  height: 88rpx;
  .ver();
  left: 0;
  width: 750rpx;
  bottom: 50px;
  z-index: 101;
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-color: rgba(255, 255, 255, .05);
}

.shengyin {
  height: 38rpx;
  width: 38rpx;
}

.shop_box {
  .hor;
  max-width: 400rpx;
  height: 88rpx;
  border-radius: 20rpx;
  background: #3d3d3d;
  padding: 10rpx;
  box-sizing: border-box;

  .title {
    .ellipsis(2);
    .size(24rpx);
    margin-left: 4rpx;
    color: var(--bg);
  }
}
</style>