zhibo/pages_course/components/liveVideo.vue

<template>
  <view class="video-player-container">
    <!-- 直播状态显示 -->
    <view class="videolist" v-if="liveItem.status == 2">
      <view class="video" :class="liveItem.showType == 1 ? 'video_row' : ''">
        <!-- 直播 -->
        <live-player 
          v-if="liveItem.livingUrl && liveItem.liveType == 1" 
          :id="'myLivePlayer_' + liveId"
          :src="liveItem.livingUrl" 
          autoplay 
          mode="live" 
          object-fit="contain" 
          :muted="false"
          orientation="vertical" 
          :enable-play-gesture="false" 
          min-cache="1" 
          max-cache="3"
          @statechange="onLiveStateChange" 
          @error="onLiveError"
          class="item"></live-player>
        
        <!-- 录播 -->
        <video 
          v-if="liveItem.videoUrl && liveItem.liveType == 2" 
          :id="`myVideo_${liveId}`"
          :autoplay="true" 
          class="item" 
          :src="liveItem.videoUrl" 
          :controls="false"
          object-fit="contain" 
          :custom-cache="false" 
          :enable-progress-gesture="false"
          vslide-gesture-in-fullscreen="false" 
          :show-center-play-btn="false" 
          :http-cache="false" 
          loop
          @error="videoError" 
          @timeupdate="onVideoTimeUpdate" 
          @loadedmetadata="onVideoMetaLoaded"
          @pause="onVideoPause" 
          @play="onVideoPlay" 
          @waiting="onVideoWaiting"
          :enable-play-gesture="false" 
          :play-strategy="1" 
          @dblclick="preventDoubleClick"
          preload="auto" 
          :enable-stash-buffer="false" 
          :stash-initial-size="0" 
          :stash-max-size="0"
          :stash-time="0" 
          type="application/x-mpegURL"></video>
        
        <view v-if="liveItem.videoUrl && liveItem.liveType == 2" class="time">{{ diffTotalTime }}</view>
      </view>
    </view>

    <!-- 直播结束状态 -->
    <view class="videolist" v-if="liveItem.status == 3">
      <view class="video" :class="liveItem.showType == 1 ? 'video_row' : ''">
        <view class="end">直播已结束</view>
      </view>
    </view>

    <!-- 直播回放状态 -->
    <view class="videolist" v-if="liveItem.status == 4">
      <view class="video" :class="liveItem.showType == 1 ? 'video_row' : ''">
        <!-- 直播回放 -->
        <video 
          v-if="liveItem.videoUrl && liveItem.liveType == 3" 
          :id="`myVideo_${liveId}`" 
          class="item"
          :src="liveItem.videoUrl" 
          :autoplay="true" 
          :controls="true" 
          object-fit="contain"
          :custom-cache="false" 
          :enable-progress-gesture="liveItem.isSpeedAllowed"
          vslide-gesture-in-fullscreen="true" 
          :show-center-play-btn="true" 
          :http-cache="false" 
          loop
          @error="videoError" 
          @timeupdate="onVideoTimeUpdate" 
          @loadedmetadata="onVideoMetaLoaded"
          @pause="onVideoPause" 
          @play="onVideoPlay" 
          :enable-play-gesture="true" 
          preload="auto"
          @waiting="onVideoWaiting" 
          type="application/x-mpegURL"></video>
        
        <view v-if="liveItem.videoUrl && liveItem.liveType == 3" class="lable">直播回放</view>
      </view>
    </view>

    <!-- 直播预告状态 -->
    <view class="trailer-box" v-if="liveItem.status == 1">
      <video 
        v-if="liveItem.previewUrl" 
        :id="`myVideo_${liveId}`" 
        class="item" 
        :src="liveItem.previewUrl"
        :autoplay="true" 
        :loop="false" 
        :controls="false" 
        object-fit="contain" 
        :custom-cache="false"
        :enable-progress-gesture="false" 
        vslide-gesture-in-fullscreen="false"
        :show-center-play-btn="false" 
        :http-cache="false" 
        @error="videoError"
        @loadedmetadata="onVideoMetaLoaded" 
        @pause="onVideoPause" 
        @play="onVideoPlay"
        :disable-progress="true" 
        :enable-play-gesture="true" 
        @waiting="onVideoWaiting" 
        preload="auto"
        type="application/x-mpegURL"></video>
      
      <image 
        v-if="liveItem.status == 1 && !liveItem.previewUrl" 
        class="img"
        src="/static/images/no_live.png"></image>
      
      <view class="countdown-item mt30 mb30" v-if="liveItem.status == 1 && liveCountdown">
        开播倒计时
        <view class="x-f">
          <view class="white">{{ liveCountdown.hours || '00' }}</view>
          <view class="white">{{ liveCountdown.minutes || '00' }}</view>
          <view class="white">{{ liveCountdown.seconds || '00' }}</view>
        </view>
      </view>
      
      <view class="name">{{ liveItem.liveName }}</view>
      <view class="title" v-if="liveCountdown">暂未开播</view>
      
      <view class="button" v-if="!isAgreement" @click="handleAgreement">预约直播</view>
      <view class="button ash" v-if="isAgreement">已预约</view>
      <view class="title" v-if="!liveCountdown">主播还在来的路上</view>
    </view>

    <!-- 无直播状态 -->
    <view class="trailer-box" v-if="!liveItem">
      <image class="img" src="/static/images/no_live.png"></image>
      <view class="title">暂无直播</view>
    </view>
  </view>
</template>

<script>
import { generateRandomString } from '@/utils/common.js';
import dayjs from 'dayjs';
import { internetTraffic, liveInternetTraffic } from '@/api/living.js';
import { getUserInfo } from '@/api/user';

export default {
  name: 'LiveVideoPlayer',
  props: {
    liveItem: {
      type: Object,
      default: () => ({})
    },
    liveId: {
      type: [String, Number],
      default: ''
    },
    userData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 流量计算相关
      uuId: '',
      totalTraffic: 0,
      bitrate: 800, // 录播默认码率 0.16Mbps
      bitrateLive: 1600, // 直播默认码率 0.16Mbps
      
      // 定时器
      trafficTimer: null,
      liveStartTimer: null,
      trafficInterval: null,
      lookTimer: null,
      
      // 状态数据
      liveCountdown: {},
      diffTotalTime: '',
      videoCurrentTime: 0,
      videoProgressKey: '',
      startTime: 0,
      stayTime: 0,
      isAgreement: false,
      
      // 性能优化
      videoRetryCounts: Object.create(null)
    };
  },
  computed: {
    // 计算当前时间与开始时间的差值
    currentTimeDiff() {
      if (!this.liveItem.startTime) return 0;
      const timeStr = this.liveItem.startTime;
      const time = new Date(timeStr.replace(/-/g, '/'));
      if (isNaN(time.getTime())) return 0;
      
      const now = new Date();
      return Math.max(0, now.getTime() - time.getTime());
    }
  },
  watch: {
    'liveItem.status': {
      handler(newStatus, oldStatus) {
        if (newStatus === undefined || oldStatus === undefined) return;
        if (newStatus === oldStatus) return;
        
        console.log(`直播状态变化: ${oldStatus} -> ${newStatus}`);
        this.handleStatusChange(newStatus);
      },
      immediate: true
    }
	// ,
 //    'liveItem.status': {
 //      handler(newVal) {
 //        if (newVal && newVal.status === 2) {
 //          this.startTimeTimer(newVal);
 //        }
 //      },
 //      deep: true,
 //      immediate: true
 //    }
  },
  async mounted() {
    await this.initializeComponent();
  },
  beforeUnmount() {
    this.cleanup();
  },
  methods: {
    // 初始化组件
    async initializeComponent() {
      this.uuId = generateRandomString(16);
      this.isAgreement = uni.getStorageSync('isAgreement');
      
      if (this.liveItem.status === 2) {
        this.startTimeTimer(this.liveItem);
      }
      
      if (this.liveItem.status === 1 && this.liveItem.startTime) {
        this.startLiveCountdown();
      }
      
      this.startTimer();
    },
    
    // 处理状态变化
    handleStatusChange(newStatus) {
      // 清理旧定时器
      this.cleanupTimers();
      
      switch (newStatus) {
        case 1: // 预告
          this.startLiveCountdown();
          break;
        case 2: // 直播中
          this.startTimeTimer(this.liveItem);
          this.playVideo();
          break;
        case 3: // 已结束
        case 4: // 回放
          this.pauseVideo();
          break;
      }
    },
    
    // 启动直播倒计时
    startLiveCountdown() {
      if (this.liveStartTimer) {
        clearInterval(this.liveStartTimer);
      }
      
      this.liveStartTimer = setInterval(() => {
        this.liveCountdown = this.handleTime(this.liveItem.startTime, 0);
        if (!this.liveCountdown) {
          this.$emit('liveStart');
          clearInterval(this.liveStartTimer);
        }
      }, 1000);
    },
    
    // 启动时间计时器
    startTimeTimer(item) {
      if (!item) return;
      
      // 立即计算一次
      this.calculateTimeDiff(item);
      
      // 每秒更新
      if (item.timeTimer) {
        clearInterval(item.timeTimer);
      }
      
      item.timeTimer = setInterval(() => {
        this.calculateTimeDiff(item);
      }, 1000);
    },
    
    // 计算时间差
    calculateTimeDiff(item) {
      if (!item.startTime) return;
      
      const time = new Date(item.startTime.replace(/-/g, '/'));
      if (isNaN(time.getTime())) return;
      
      const now = new Date();
      let diffMs = Math.max(0, now.getTime() - time.getTime());
      
      const totalSeconds = Math.floor(diffMs / 1000);
      const hours = this.padZero(Math.floor(totalSeconds / 3600));
      const minutes = this.padZero(Math.floor((totalSeconds % 3600) / 60));
      const seconds = this.padZero(totalSeconds % 60);
      
      this.diffTotalTime = `${hours}:${minutes}:${seconds}`;
    },
    
    // 补零函数
    padZero(num) {
      return num < 10 ? `0${num}` : num;
    },
    
    // 时间处理
    handleTime(time, duration) {
      let timeStamp;
      
      if (typeof time === 'number' && time > 0 && time < 9999999999999) {
        timeStamp = time;
      } else if (typeof time === 'string' && time.trim() !== '') {
        const isoTime = time.replace(' ', 'T');
        const date = new Date(isoTime);
        if (!isNaN(date.getTime())) {
          timeStamp = date.getTime();
        } else {
          console.error('无效的日期格式:', time);
          return false;
        }
      } else {
        console.error('time参数必须是有效的时间戳或日期字符串');
        return false;
      }
      
      const targetTimestamp = timeStamp + duration * 60 * 1000;
      const currentTimestamp = Date.now();
      const timeDiffMs = targetTimestamp - currentTimestamp;
      
      if (timeDiffMs <= 0) {
        return false;
      }
      
      const hours = Math.floor(timeDiffMs / (1000 * 60 * 60));
      const minutes = Math.floor((timeDiffMs % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((timeDiffMs % (1000 * 60)) / 1000);
      
      const formatNum = (num) => num.toString().padStart(2, '0');
      return {
        hours: formatNum(hours),
        minutes: formatNum(minutes),
        seconds: formatNum(seconds)
      };
    },
    
    // 播放视频
    playVideo() {
      if (!this.liveItem) {
        console.log('liveItem 为空，无法播放视频');
        return;
      }
      
      try {
        // 直播流
        if (this.liveItem.liveType === 1 && this.liveItem.livingUrl && this.liveItem.status == 2) {
          const livePlayerId = `myLivePlayer_${this.liveId}`;
          const livePlayerContext = uni.createLivePlayerContext(livePlayerId, this);
          if (livePlayerContext) {
            livePlayerContext.play();
          }
        } 
        // 预告视频
        else if (this.liveItem.status == 1 && this.liveItem.previewUrl) {
          const videoId = `myVideo_${this.liveId}`;
          const videoContext = uni.createVideoContext(videoId, this);
          if (videoContext) {
            videoContext.play();
          }
        } 
        // 录播
        else if (this.liveItem.liveType === 2 && this.liveItem.videoUrl && this.liveItem.status == 2) {
          const videoId = `myVideo_${this.liveId}`;
          const videoContext = uni.createVideoContext(videoId, this);
          if (videoContext) {
            videoContext.play();
          }
        } 
        // 回放
        else if (this.liveItem.liveType === 3 && this.liveItem.videoUrl && this.liveItem.status == 4) {
          const videoId = `myVideo_${this.liveId}`;
          const videoContext = uni.createVideoContext(videoId, this);
          if (videoContext) {
            videoContext.play();
          }
        }
      } catch (error) {
        console.error('播放视频失败:', error);
        this.$emit('playError', error);
      }
    },
    
    // 暂停视频
    pauseVideo() {
      if (!this.liveItem) return;
      
      try {
        if (this.liveItem.status == 1) {
          const videoId = `myVideo_${this.liveId}`;
          const videoContext = uni.createVideoContext(videoId, this);
          if (videoContext) {
            videoContext.pause();
          }
        } else if (this.liveItem.status == 2) {
          if (this.liveItem.liveType === 1) {
            const livePlayerId = `myLivePlayer_${this.liveId}`;
            const livePlayerContext = uni.createLivePlayerContext(livePlayerId, this);
            if (livePlayerContext) {
              livePlayerContext.pause();
            }
          } else if (this.liveItem.liveType === 2) {
            const videoId = `myVideo_${this.liveId}`;
            const videoContext = uni.createVideoContext(videoId, this);
            if (videoContext) {
              videoContext.pause();
            }
          }
        }
      } catch (error) {
        console.error('暂停视频失败:', error);
        this.$emit('pauseError', error);
      }
    },
    
    // 视频错误处理
    videoError(e) {
      if (!this.liveItem || !this.liveId) return;
      
      // 初始化重试计数
      if (this.videoRetryCounts[this.liveId] === undefined) {
        this.videoRetryCounts[this.liveId] = 0;
      }
      
      // 限制重试次数
      if (this.videoRetryCounts[this.liveId] >= 3) {
        console.error(`直播间 ${this.liveId} 视频加载失败，停止重试`);
        this.$emit('videoError', {
          type: 'loadFailed',
          liveId: this.liveId,
          message: '视频加载失败，请检查网络'
        });
        return;
      }
      
      this.videoRetryCounts[this.liveId]++;
      
      // 延迟重试
      setTimeout(() => {
        console.log(`第${this.videoRetryCounts[this.liveId]}次重试播放视频`);
        this.playVideo();
      }, 2000);
      
      this.$emit('videoError', {
        type: 'retry',
        liveId: this.liveId,
        retryCount: this.videoRetryCounts[this.liveId]
      });
    },
    
    // 直播状态变化
    onLiveStateChange(e) {
      const stateCode = e.detail.code;
      
      if (e.detail.code == -2301 || e.detail.code == -2302) {
        this.playVideo();
      } else if (e.detail.code == 2004) {
        this.calculateTimeDiff(this.liveItem);
        this.startTrafficCalculation(this.bitrateLive);
      }
      
      this.$emit('liveStateChange', e.detail);
    },
    
    // 直播错误
    onLiveError(e) {
      this.videoError(e);
      this.$emit('liveError', e.detail);
    },
    
    // 视频元数据加载
    onVideoMetaLoaded(e) {
      this.videoProgressKey = `videoProgress_${this.liveId}`;
      this.setVideoProgress();
      this.$emit('videoMetaLoaded', e.detail);
    },
    
    // 设置视频进度
    setVideoProgress() {
      if (this.liveItem.liveType !== 2 && this.liveItem.liveType !== 3) {
        return;
      }
      
      let currentTime = 0;
      if (this.liveItem.liveType === 2) {
        const diff = this.getTimeDifferenceInSeconds(this.liveItem.startTime);
        if (diff > this.liveItem.duration) {
          const storedProgress = uni.getStorageSync(this.videoProgressKey) || 0;
          currentTime = storedProgress >= this.liveItem.duration ? 0 : storedProgress || 0;
        } else {
          currentTime = diff % this.liveItem.duration;
        }
      } else if (this.liveItem.liveType === 3) {
        const storedProgress = uni.getStorageSync(this.videoProgressKey);
        currentTime = storedProgress || 0;
      }
      
      const videoId = `myVideo_${this.liveId}`;
      const videoContext = uni.createVideoContext(videoId, this);
      if (videoContext) {
        videoContext.seek(currentTime);
      }
    },
    
    // 获取时间差（秒）
    getTimeDifferenceInSeconds(createTimeStr) {
      const createTime = new Date(createTimeStr.replace(/-/g, '/'));
      const now = new Date();
      const timeDiffMs = now - createTime;
      return Math.max(0, Math.floor(timeDiffMs / 1000));
    },
    
    // 视频时间更新
    onVideoTimeUpdate(e) {
      this.videoCurrentTime = e.detail.currentTime;
      
      if (Math.floor(this.videoCurrentTime) % 10 === 0) {
        this.saveVideoProgress();
      }
      
      this.$emit('videoTimeUpdate', e.detail);
    },
    
    // 视频暂停
    onVideoPause(e) {
      if (this.liveItem.liveType === 2) {
        const videoId = `myVideo_${this.liveId}`;
        const videoContext = uni.createVideoContext(videoId, this);
        setTimeout(() => {
          videoContext.play();
        }, 100);
      }
      
      this.saveVideoProgress();
      this.$emit('videoPause', e.detail);
    },
    
    // 视频播放
    onVideoPlay(e) {
      this.$emit('videoPlay', e.detail);
    },
    
    // 视频等待
    onVideoWaiting(e) {
      if (this.liveItem.liveType == 2) {
        this.startTrafficCalculation(this.bitrate);
      } else {
        if (this.trafficInterval) {
          clearInterval(this.trafficInterval);
          this.trafficInterval = null;
        }
        
        this.trafficInterval = setInterval(() => {
          this.getInternetTraffic();
        }, 10000);
      }
      
      this.$emit('videoWaiting', e.detail);
    },
    
    // 阻止双击事件
    preventDoubleClick(e) {
      e.preventDefault();
      e.stopPropagation();
      return false;
    },
    
    // 保存视频进度
    saveVideoProgress() {
      if (this.videoProgressKey) {
        uni.setStorage({
          key: this.videoProgressKey,
          data: this.videoCurrentTime,
          success: () => {},
          fail: (err) => {
            console.error('保存视频进度失败:', err);
          }
        });
      }
    },
    
    // 开始流量计算
    startTrafficCalculation(bitrate) {
      if (this.trafficTimer) {
        clearInterval(this.trafficTimer);
        this.trafficTimer = null;
      }
      
      this.startTime = Date.now();
      this.trafficTimer = setInterval(() => {
        this.calculateTraffic(bitrate);
      }, 10000);
    },
    
    // 计算流量
    calculateTraffic(bitrate) {
      const currentTime = Date.now();
      const duration = (currentTime - this.startTime) / 1000;
      const trafficBits = bitrate * duration;
      this.totalTraffic = trafficBits / 8;
      this.getLiveInternetTraffic();
    },
    
    // 直播流量统计
    getLiveInternetTraffic() {
      if (!this.liveId || !this.userData.userId) return;
      
      const param = {
        userId: this.userData.userId,
        liveId: this.liveId,
        uuId: dayjs().format('YYYYMMDD') + this.uuId,
        internetTraffic: this.totalTraffic
      };
      
      liveInternetTraffic(param).catch(err => {
        console.error('直播流量统计失败:', err);
      });
    },
    
    // 回放、预告流量统计
    getInternetTraffic() {
      if (!this.liveId || !this.userData.userId || !this.uuId) return;
      
      const currentTime = (this.stayTime / this.liveItem.duration) * 100;
      const param = {
        videoType: this.liveItem.videoType,
        videoId: this.liveItem.videoId,
        userId: this.userData.userId,
        liveId: this.liveId,
        uuId: dayjs().format('YYYYMMDD') + this.uuId,
        duration: this.liveItem.duration,
        bufferRate: currentTime
      };
      
      if (this.liveItem.status == 1) {
        param.videoType = this.liveItem.previewVideoType || '';
        param.videoId = this.liveItem.previewVideoId || '';
      }
      
      if (this.liveItem.liveType == 1) {
        param.bufferRate = this.totalTraffic;
      }
      
      internetTraffic(param).catch(err => {
        console.error('流量统计失败:', err);
      });
    },
    
    // 开始计时器
    startTimer() {
      this.startTime = Date.now();
      this.lookTimer = setInterval(() => {
        this.stayTime = Math.floor((Date.now() - this.startTime) / 1000);
      }, 1000);
    },
    
    // 预约直播
    handleAgreement() {
      this.$emit('agreementClick');
    },
    
    // 清理定时器
    cleanupTimers() {
      if (this.liveStartTimer) {
        clearInterval(this.liveStartTimer);
        this.liveStartTimer = null;
      }
      
      if (this.trafficTimer) {
        clearInterval(this.trafficTimer);
        this.trafficTimer = null;
      }
      
      if (this.trafficInterval) {
        clearInterval(this.trafficInterval);
        this.trafficInterval = null;
      }
      
      if (this.lookTimer) {
        clearInterval(this.lookTimer);
        this.lookTimer = null;
      }
      
      if (this.liveItem && this.liveItem.timeTimer) {
        clearInterval(this.liveItem.timeTimer);
        this.liveItem.timeTimer = null;
      }
    },
    
    // 组件清理
    cleanup() {
      this.cleanupTimers();
      this.pauseVideo();
      this.saveVideoProgress();
    }
  }
};
</script>

<style scoped lang="scss">
.video-player-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.videolist {
  position: relative;
  height: 100vh;
  width: 100%;

  .video {
    height: 100vh;
    width: 100%;
    
    .item {
      width: 100%;
      height: 100%;
    }
    
    .time {
      color: #ffffff;
      font-size: 20rpx;
      margin-left: 10rpx;
    }
    
    .end {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 36rpx;
      color: #fff;
    }
    
    .lable {
      position: absolute;
      top: 50rpx;
      right: 16rpx;
      background-color: rgba(57, 57, 57, 0.6);
      padding: 4rpx 10rpx;
      color: #fff;
      border-radius: 15rpx;
    }
  }
  
  .video_row {
    position: absolute;
    top: 20%;
    max-height: 450rpx;
    z-index: 99;
  }
}

.trailer-box {
  position: relative;
  top: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffffff;
  padding: 20rpx;

  .button {
    margin-top: 20rpx;
    background: #6d7bd4;
    color: #fff;
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    position: relative;
    z-index: 99999;
  }

  .ash {
    background: #636363;
  }

  .countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .white {
      width: 60rpx;
      height: 60rpx;
      text-align: center;
      overflow: hidden;
      background: #ffffff;
      border-radius: 8rpx;
      margin: 30rpx 10rpx 0;
      font-weight: 600;
      font-size: 24rpx;
      color: #000000;
      line-height: 60rpx;
    }
  }

  .item {
    width: 100%;
    height: 400rpx;
  }

  .name {
    font-size: 34rpx;
  }

  .img {
    margin-bottom: 40rpx;
    width: 240rpx;
    height: 240rpx;
  }

  .title {
    margin-top: 30rpx;
    font-size: 42rpx;
    font-weight: 500;
  }
}
</style>