onecric_h5/pages/Videos/live.vue

<template>
  <div>
    <div class="top">
      <div class="header">
        <img class="logo" src="/static/logo_big.png" alt="" />
        <div id="palyevent">palyevent</div>
        <u--image
          class="border"
          :showLoading="true"
          :src="info.avatar || '/static/image/match/teams_avatar_ico@2x.png'"
          @click="go('/pages/Match/member/usermanger', true)"
          width="24px"
          height="24px"
          shape="circle"
        ></u--image>
      </div>
      <div class="title-box">
        <div class="flex" @click="stepBack">
          <u-icon name="arrow-left" color="#ffffff" size="16px" bold></u-icon>
          <!-- Videos -->
				  {{ $t('video.lab') }}
        </div>
      </div>
    </div>
    <div style="height: 436rpx; width: 100%">
        <div class="prism-player" id="player-con">
          <!-- <div class="tool-box" v-if="toolbar">
            <img class="case" @click="caseVideo" src="/static/image/common/line-case.png" alt="">
          </div> -->
          <div class="icon-box" v-if="toolbar">
            <u-icon name="rewind-left-fill" color="#fff" size="50" @click="setSeek(-10)"></u-icon>
            <u-icon :name="!isPlay ? 'play-right-fill' : 'pause'" @click="playToggle" color="#fff" size="100"></u-icon>
            <u-icon name="rewind-right-fill" color="#fff" size="50" @click="setSeek(10)"></u-icon>
          </div>
        </div>
    </div>
    <div class="box">
      <div class="name">
        {{ targetInfo.title }}
      </div>
      <div class="time" v-if="targetInfo.addtime">{{ targetInfo.addtime }}</div>
    </div>
    
    <div class="list-box" v-if="list.length">
      <div class="title">
        <!-- Recommended Videos -->
        {{ $t('video.lab19') }}
      </div>
      <div class="item" @click="onTap(params.id)" v-for="(params) in list" :key="params.id">
        <view class="waterfall-item-img">
          <u--image
            :showLoading="true"
            :src="params.flie[0].img"
            width="100%"
            height="348rpx"
          >
            <template v-slot:loading>
              <image class="loading-banner-img" src="/static/image/common/video-list-bg.png" mode="aspectFill"></image>
            </template>
          </u--image>
          <div class="bg"></div>
          <div class="content">
            <div class="text-clamp2">{{ params.title }}</div>
          </div>
          <img class="play" src="/static/image/live/play-icon.png" alt="">
        </view>
      </div>
      <u-loadmore
        :status="status"
        fontSize="28"
        :line="true"
        :loading-text="statusType.loadingText" 
        :loadmore-text="statusType.loadmoreText" 
        :nomore-text="statusType.nomoreText" 
      />
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils/util'
export default {
  components: {},
  data() {
    return {
      id: "",
      tournament: "",
      targetInfo: {},
      isPlay: true,
      toolbar: false,
      player: null,
      toolbarTimer: null,
      userClick: false,
			mediaUrl: '',
      list: [],
      type: '',
      obj: {
        total: 1
      },
      page: 1,
      status: 'loadmore',
      statusType:{
        loadingText: this.$t('common.lab'),
        loadmoreText: this.$t('common.lab1'),
        nomoreText: this.$t('common.lab2')
      },
      cjs: null
    };
  },
  computed: {
    info() {
      return this.$store.state.info;
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
  },
  onLoad(option) {
    this.id = option.id;
    this.tournament = option.tournament;
  },
  onUnload() {
    window.removeEventListener('touchstart', this.owerPlay1)
    // window.removeEventListener('load', this.init)
    this.player && this.player.dispose();
  },
  created() {
    this.getDetail();
  },
  onReachBottom() {
    if (this.status == 'loadmore') {
      this.page++;
      this.getDetail();
    }
  },
  mounted() {
    // window.addEventListener("load", this.init);
    window.addEventListener('touchstart', this.owerPlay1)
    document.getElementById('palyevent').addEventListener('click',this.owerPlay)
  },
  methods: {
    getDetail() {
      this.status = 'loading';
      let obj = {

      }
      if (this.tournament) {
        obj.tournament = this.tournament
      }
      uni.$u.http
        .get("/api/Video/getTournamentVideoInfo", {
          params: {
            id: this.id,
            page: this.page,
            ...obj
          },
        })
        .then((res) => {
          this.targetInfo = res.info || {};
          if(this.targetInfo.flie && this.targetInfo.flie[0]) {
            this.mediaUrl = this.targetInfo.flie[0].video
            this.videoInit()
          }
          if (this.page == 1) {
            // 关闭下拉
            this.list=res.list.data || []
            // uni.stopPullDownRefresh();
          } else {
            this.list = this.list.concat(res.list.data || [])
          }
          this.obj = res.list
          this.status = this.list.length == res.list.total ? 'nomore' : 'loadmore'
        })
        .catch((res) => {});
    },
    onTap(id) {
      uni.navigateTo({
        url: '/pages/Videos/live?id=' + id+'&tournament=' + this.tournament
      });
    },
    playToggle() {
      let status = this.player.getStatus();
      if (this.toolbarTimer) {
        clearTimeout(this.toolbarTimer)
      }
      this.toolbarTimer = setTimeout(() => {
        this.toolbar = false
        this.toolbarTimer = null
      }, 3000)
      if (status == 'playing') {
        this.isPlay = false
        this.userClick = true
        this.player.pause()
      } else {
        this.isPlay = true
        this.player.play()
      }
    },
    clickPlay() {
      try {
        var evt = document.createEvent('HTMLEvents')
        evt.initEvent('click', true, true)
        document.getElementById('palyevent').dispatchEvent(evt)
      } catch (error) {
      }
    },
    owerPlay() {
      this.isPlay = true
      this.player && this.player.play()
    },
    owerPlay1() {
      if (this.userClick) {
        return
      }
      this.owerPlay()
    },
    setSeek(type) {
      if (this.toolbarTimer) {
        clearTimeout(this.toolbarTimer)
      }
      this.toolbarTimer = setTimeout(() => {
        this.toolbar = false
        this.toolbarTimer = null
      }, 3000)
      let t = this.player.getCurrentTime();
      let a = this.player.getDuration();
      t += type
      if (t < 0) {
        t = 0
      }
      if (t > a) {
        t = a
      }
      this.player.seek(t)
    },
    parseTime(t) {
      return parseTime(t, '{y}-{m}-{d} {h}:{i}:{m}')
    },
    videoInit() {
      var $this = this
      this.player = new Aliplayer(
        {
          id: "player-con",
          source: this.mediaUrl,
          width: "100%",
          height: "100%",
          autoplay: true,
          isLive: false,
          rePlay: true,
          showBarTime: '3000',
          // cover: data.thumb,
          videoHeight: "100%",
          keyShortCuts: true,
          playsinline: true,
          "language": "en-us",
          preload: true,
          controlBarVisibility: "hover",
          videoWidth: "100%",
          useH5Prism: true,
          skinLayout: [
            // {
            //   name: "bigPlayButton",
            //   align: "blabs",
            //   x: 30,
            //   y: 80,
            // },
            {
              name: "H5Loading",
              align: "cc",
            },
            {
              name: "errorDisplay",
              align: "tlabs",
              x: 0,
              y: 0,
            },
            {
              name: "infoDisplay",
            },
            {
              name: "tooltip",
              align: "blabs",
              x: 0,
              y: 56,
            },
            {
              name: "thumbnail",
            },
            {
              name: "controlBar",
              align: "blabs",
              x: 0,
              y: 0,
              children: [
                {
                  name: "progress",
                  align: "blabs",
                  x: 0,
                  y: 44,
                },
                // {
                //   name: "playButton",
                //   align: "tl",
                //   x: 15,
                //   y: 12,
                // },
                {
                  name: "timeDisplay",
                  align: "tl",
                  x: 10,
                  y: 7,
                },
                {
                  name: "fullScreenButton",
                  align: "tr",
                  x: 10,
                  y: 12,
                },
                {
                  name: "volume",
                  align: "tr",
                  x: 5,
                  y: 10,
                },
              ],
            },
          ],
        },
        function (player) {
          setTimeout(() => {
            $this.clickPlay()
          }, 1000)
        }
      );
      this.player.on('hideBar', () => {
        this.toolbar = false
      })
      this.player.on('showBar', () => {
        this.isPlay = this.player.getStatus() == 'playing';
        this.toolbar = true;
        if (this.toolbarTimer) {
          clearTimeout(this.toolbarTimer)
        }
        this.toolbarTimer = setTimeout(() => {
          this.toolbar = false
          this.toolbarTimer = null
        }, 3000)
      })
    },
    init() {
      try{
        this.cjs = new Castjs()
        this.cjs.on('error', (err) => {
          console.error(err)
        })
        this.cjs.on('available', () => {
        })
      }catch(error) {
      }
      
    },
    caseVideo() {
      if (this.cjs) {
        console.error(this.cjs.available)
        if (this.cjs.available) {
          var metadata = {
            poster: '',
            title: this.targetInfo.title,
            description: '',
            subtitles: [],
          }
          this.cjs.cast(this.mediaUrl, metadata)
        }
      }
    },
    stepBack() {
      uni.switchTab({
        url: '/pages/Videos/index'
      })
    },
  },
};
</script>

<style lang="scss">
.top {
  position: sticky;
  top: 0;
  z-index: 999;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8rpx 16px 16rpx;
    background-color: #10044a;
    #palyevent {
      opacity: 0;
    }
  }
  .logo {
    height: 24px;
  }
  .border {
    border: 1px solid #cc2900;
    border-radius: 50%;
  }
  .title-box {
    height: 40px;
    background-color: #262e4a;
    padding: 0 16px;
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    .u-icon {
      margin-right: 10px;
    }
  }
}
.tool-box {
  position: absolute;
  right: 16px;
  top: 16px;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 2px 2px 0px;
  .case {
    margin-left: 10px;
    width: 20px;
  }
}
.icon-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 700;
  z-index: 2;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  .u-icon {
    padding: 10px;
  }
}
.box {
  padding: 32rpx;
  .name {
    font-weight: 500;
    font-size: 28rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: #000;
  }
  .time {
    padding-top: 16px;
    text-align: right;
    font-weight: 400;
    font-size: 20rpx;
    color: #4E4E4E;
  }
}
.list-box {
  .title {
    padding: 10rpx 16px 10px;
    font-weight: 600;
    font-size: 18px;
    color: #242424;
  }
  .item {
		background-color: #fff;
		overflow: hidden;
		font-size: 28rpx;
		color: #fff;
		font-weight: 500;
		margin-bottom: 20rpx;

		.waterfall-title {
			padding: 20rpx 10rpx;
			font-weight: 700;
		}

		.waterfall-item-img {
			position: relative;
			height: 348rpx;
			.loading-banner-img {
				width: 100%;
				height: 348rpx;
			}
			.bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(180deg, rgba(16, 4, 74, 0) 0%, #080031 100%);
			}
			.content {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 11px 72px 11px 16px;
			}
			.play {
				position: absolute;
				right: 16px;
				bottom: 19px;
				width: 28px;
			}
		}
	}
}
</style>