h5-colexiu/src/components/col-video/index.tsx

import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
import { Button, Icon, Loading, Toast } from 'vant'

import TCPlayer from 'tcplayer.js'
import 'tcplayer.js/dist/tcplayer.css'

import iconVideoPlay from '@/common/images/icon_video_play.png'
import { browser } from '@/helpers/utils'
import { state } from '@/state'
import { listenerMessage, postMessage } from '@/helpers/native-message'
import request from '@/helpers/request'
export default defineComponent({
  name: 'col-video',
  props: {
    trySee: {
      // 是否试看
      type: Boolean,
      default: false
    },
    // 收费方式
    payType: {
      type: String,
      default: ''
    },
    freeTitleStatus: {
      type: Boolean,
      default: true
    },
    // 试看比例
    freeRate: {
      type: Number,
      default: 100
    },
    setting: {
      type: Object,
      default: () => {}
    },
    controls: Boolean,
    height: String,
    src: {
      type: String,
      default: ''
    },
    poster: {
      type: String,
      default: ''
    },
    styleValue: {
      type: Object,
      default: () => ({})
    },
    preload: {
      type: String as PropType<'auto' | 'metadata' | 'none'>,
      default: 'auto'
    },
    currentTime: {
      type: Boolean,
      default: true
    },
    playsinline: {
      type: Boolean,
      default: true
    },
    onPlay: {
      type: Function,
      default: () => {}
    },
    isBuy: {
      // 是否把购买方法在外部调用
      type: Boolean,
      default: false
    },
    onBuyEmit: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      disableScreenRecordingFlag: '0', // disable recording
      videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
      player: null as any,
      // playTime: 0,
      loading: true, // 首次进入加载中
      trySeeOver: false, // 试看是否结束
      showSeeStatus: true // 是否显示试看状态
    }
  },
  watch: {
    src() {
      console.log('src, change')
      this._init()
    }
  },
  async mounted() {
    await this.sysParamConfig()
    const Button = TCPlayer.getComponent('Button')
    const BigPlayButton = TCPlayer.getComponent('BigPlayButton')
    BigPlayButton.prototype.createEl = function () {
      const el = Button.prototype.createEl.call(this)
      const _html =
        '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>'

      el.appendChild(
        TCPlayer.dom.createEl('div', {
          className: 'vjs-button-icon',
          innerHTML: _html
        })
      )
      return el
    }
    this.player = TCPlayer(this.videoID, {
      appID: '',
      controls: true
    }) // player-container-id 为播放器容器 ID，必须与 html 中一致
    this._init()

    listenerMessage('setVideoPlayer', result => {
      const content = result?.content
      if (content.status === 'pause') {
        this.player.pause()
      }
    })
  },
  beforeUnmount() {
    postMessage({
      api: 'limitScreenRecord',
      content: {
        type: 0
      }
    })
  },
  computed: {
    computedSeeStatus() {
      // console.log(
      //   this.showSeeStatus,
      //   this.trySee,
      //   this.trySeeOver,
      //   'this.showSeeStatus, this.trySee'
      // )
      return this.showSeeStatus && this.trySee
    },
    playTime() {
      // 允许播放时间
      const player = this.player
      const playTime = (player.duration() * this.freeRate) / 100
      return playTime || 0
    }
  },
  methods: {
    // 获取支付渠道
    async sysParamConfig() {
      try {
        const apiSuffix =
          state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
        const res = await request.get(
          apiSuffix + '/sysConfig/queryByParamName',
          {
            params: {
              paramName: 'disable_screen_recording_flag'
            }
          }
        )
        this.disableScreenRecordingFlag = res.data.paramValue || ''
      } catch {
        //
      }
    },
    _init() {
      // const controls = [
      //   'play-large',
      //   'play',
      //   'progress',
      //   'captions',
      //   'fullscreen'
      // ]
      // if (this.currentTime) {
      //   controls.push('current-time')
      // }
      // const params: any = {
      //   controls: controls,
      //   ...this.setting,
      //   invertTime: false
      // }
      // if (browser().iPhone) {
      //   params.fullscreen = {
      //     enabled: true,
      //     fallback: 'force',
      //     iosNative: true
      //   }
      // }
      // this.player = new Plyr((this as any).$refs.video, params)
      // this.player.elements.container
      //   ? (this.player.elements.container.style.height = this.height || '210px')
      //   : null
      // if (this.preload === 'none') {
      //   this.loading = false
      // }
      // this.player.on('loadedmetadata', () => {
      //   this.loading = false
      //   if (this.trySee) {
      //     this.domPlayVisibility()
      //   } else {
      //     this.domPlayVisibility(false)
      //   }
      //   // 监听播放事件
      //   const _this = this
      //   this.player.on('timeupdate', () => {
      //     const players = _this.player
      //     if (players.currentTime >= this.playTime && _this.trySee) {
      //       players.pause()
      //       _this.trySeeOver = true
      //       _this.showSeeStatus = true
      //       _this.domPlayVisibility() // 试看结束后隐藏播放按钮
      //     }
      //   })
      // })
      // this.player.on('play', () => {
      //   postMessage(
      //     {
      //       api: 'getDeviceStatus',
      //       content: {
      //         type: 'video'
      //       }
      //     },
      //     (res: any) => {
      //       // 判断是否在录屏中, 如果在录屏则不允许播放
      //       if (res.content.status == '1') {
      //         Toast('为了保证数据安全，请不要录屏')
      //         this.player.pause()
      //       }
      //     }
      //   )
      //   postMessage({
      //     api: 'limitScreenRecord',
      //     content: {
      //       type: 1
      //     }
      //   })
      //   this.onPlay && this.onPlay()
      // })
      // this.player.on('enterfullscreen', () => {
      //   console.log('fullscreen')
      //   const i = document.createElement('i')
      //   i.id = 'fullscreen-back'
      //   i.className = 'van-icon van-icon-arrow-left video-back'
      //   i.addEventListener('click', () => {
      //     this.player.fullscreen.exit()
      //   })
      //   console.log(document.getElementsByClassName('plyr'))
      //   document.getElementsByClassName('plyr')[0].appendChild(i)
      // })
      // this.player.on('exitfullscreen', () => {
      //   console.log('exitfullscreen')
      //   const i = document.getElementById('fullscreen-back')
      //   i && i.remove()
      // })

      if (this.player && this.src) {
        this.player.src(this.src) // url 播放地址
        this.player.poster(this.poster || '')

        if (this.preload === 'none') {
          this.loading = false
        }
        this.player.on('loadstart', () => {
          this.loading = false
          if (this.trySee) {
            this.domPlayVisibility()
          } else {
            this.domPlayVisibility(false)
          }
          // 监听播放事件
          this.player.on('timeupdate', () => {
            const players = this.player
            if (players.currentTime() >= this.playTime && this.trySee) {
              players.pause()
              this.trySeeOver = true
              this.showSeeStatus = true
              this.domPlayVisibility() // 试看结束后隐藏播放按钮
            }
          })
        })
        this.player.on('play', () => {
          if (this.disableScreenRecordingFlag === '1') {
            postMessage(
              {
                api: 'getDeviceStatus',
                content: {
                  type: 'video'
                }
              },
              (res: any) => {
                // 判断是否在录屏中, 如果在录屏则不允许播放
                if (res.content.status == '1') {
                  Toast('为了保证数据安全，请不要录屏')
                  this.player.pause()
                }
              }
            )
            postMessage({
              api: 'limitScreenRecord',
              content: {
                type: 1
              }
            })
          }
          this.onPlay && this.onPlay()
        })

        this.player.on('fullscreenchange', () => {
          if (this.player.isFullscreen()) {
            console.log('fullscreen')
            const i = document.createElement('i')
            i.id = 'fullscreen-back'
            i.className = 'van-icon van-icon-arrow-left video-back'
            i.addEventListener('click', () => {
              this.player.exitFullscreen()
            })
            // console.log(document.getElementsByClassName('video-js'))
            document.getElementsByClassName('video-js')[0].appendChild(i)
          } else {
            console.log('exitfullscreen')
            const i = document.getElementById('fullscreen-back')
            i && i.remove()
          }
        })
      }
    },
    // 操作功能
    domPlayVisibility(hide = true) {
      const controls = document.querySelector('.vjs-big-play-button')
      const controls2 = document.querySelector('.vjs-control-bar')
      if (hide) {
        controls?.setAttribute('style', 'display:none')
        controls2?.setAttribute('style', 'display:none')
      } else {
        controls?.removeAttribute('style')
        setTimeout(() => {
          controls2?.removeAttribute('style')
        }, 200)
      }
    },
    onClickPlay() {
      this.player.play()
      this.domPlayVisibility(false)
      this.showSeeStatus = false
    },
    onBuy() {
      if (this.isBuy) {
        this.onBuyEmit()
        return
      }
      this.$router.back()
    },
    onReplay() {
      this.player.currentTime(0)
      this.player.play()
      this.domPlayVisibility(false)
      this.trySeeOver = false
      this.showSeeStatus = false
    }
  },
  unmounted() {
    this.player?.pause()
    this.player?.src('')
    this.player?.dispose()
  },
  render() {
    return (
      <div
        class={[styles['video-container'], 'colVideo']}
        style={{
          height: this.height || '210px'
        }}
      >
        {/* <div ref="video" class={styles['video']} style={{ ...this.styleValue }}> */}
        {/* <Icon
          name="arrow-left"
          class={styles.videoBack}
          size="20"
          color="#fff"
        /> */}
        <video
          ref="video"
          class={styles['video']}
          // src={this.src}
          id={this.videoID}
          playsinline={this.playsinline}
          poster={this.poster}
          preload={this.preload}
          style={{ ...this.styleValue }}
        ></video>
        {/* </div> */}
        {/* 加载视频使用 */}
        {this.loading && (
          <div
            class={styles.loadingVideo}
            style={{
              height: this.height || '210px'
            }}
          >
            <Loading
              size={36}
              color="#2dc7aa"
              vertical
              style={{ height: '100%', justifyContent: 'center' }}
            >
              加载中...
            </Loading>
          </div>
        )}
        {/* 试看结束 */}
        {this.trySee && this.computedSeeStatus && !this.loading && (
          <div
            class={[styles.loadingVideo, styles.playOver]}
            style={{
              height: this.height || '210px'
            }}
          >
            {!this.trySeeOver ? (
              <>
                <Icon
                  name={iconVideoPlay}
                  size={50}
                  onClick={this.onClickPlay}
                />
                <p class={styles.freeTxt}>
                  免费试看
                  {/* {this.freeTitleStatus ? '试看' : '领取'} */}
                </p>
                {/* <p class={styles.freeRate}>每课时可试看{this.freeRate}%</p> */}
              </>
            ) : (
              <>
                {state.platformType === 'STUDENT' ? (
                  <p class={styles.tips}>
                    {this.freeTitleStatus
                      ? '免费试看结束，购买完整课程后继续学习'
                      : this.payType === 'VIP'
                      ? '免费试看结束，开通会员后继续学习'
                      : '试看结束，领取课程后继续学习'}
                  </p>
                ) : (
                  <p class={styles.tips}>
                    {/* 若需完整观看，请下载酷乐秀领取或购买 */}
                    试看结束
                  </p>
                )}
                {state.platformType === 'STUDENT' && (
                  <Button
                    class={styles.btn}
                    type="primary"
                    round
                    size="small"
                    onClick={this.onBuy}
                  >
                    {state.platformType === 'STUDENT'
                      ? this.freeTitleStatus
                        ? '立即购买'
                        : this.payType === 'VIP'
                        ? '开通会员'
                        : '免费领取'
                      : '返回免费'}
                  </Button>
                )}
                <div
                  class={state.platformType !== 'STUDENT' && styles.replay}
                  onClick={this.onReplay}
                >
                  <Icon
                    name="replay"
                    style={{ marginRight: '5px' }}
                    size={16}
                  />
                  重播
                </div>
              </>
            )}
          </div>
        )}
      </div>
    )
  }
})