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 iconVideoPlay from '@/common/images/icon_video_play.png'
import { browser } from '@/helpers/utils'
import { state } from '@/state'
import { listenerMessage, postMessage } from '@/helpers/native-message'
export default defineComponent({
  name: 'col-video',
  props: {
    trySee: {
      // 是否试看
      type: Boolean,
      default: false
    },
    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 {
      player: null as any,
      // playTime: 0,
      loading: true, // 首次进入加载中
      trySeeOver: false, // 试看是否结束
      showSeeStatus: true // 是否显示试看状态
    }
  },
  mounted() {
    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: {
    _init() {
      // controls: [
      //   'play-large' ,  // 中间的大播放按钮
      //   'restart' ,  // 重新开始播放
      //   'rewind' ,  // 按寻道时间倒带（默认 10 秒）
      //   'play' ,  // 播放/暂停播放
      //   'fast-forward' ,  // 快进查找时间（默认 10 秒）
      //   'progress' ,  // 播放和缓冲的进度条和滑动条
      //   'current-time' ,  // 播放的当前时间
      //   ' duration' ,  // 媒体的完整持续时间
      //   'mute' ,  // 切换静音
      //   'volume', // 音量控制
      //   'captions' ,  // 切换字幕
      //   'settings' ,  // 设置菜单
      //   'pip' ,  // 画中画（当前仅 Safari）
      //   'airplay' ,  // Airplay（当前仅 Safari）
      //   'download ' ,  // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
      //   'fullscreen' ,  // 切换全屏
      // ] ;
      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)

      // fullscreen: {
      //     enabled: true,
      //     fallback: 'force',
      //     iosNative: true
      //   }
      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()
      })
    },
    // 操作功能
    domPlayVisibility(hide = true) {
      const controls = document.querySelector('.plyr__controls')
      const controls2 = document.querySelector('.plyr__control--overlaid')
      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.restart()
      this.player.play()
      this.domPlayVisibility(false)
      this.trySeeOver = false
      this.showSeeStatus = false
    }
  },
  unmounted() {
    this.player?.destroy()
  },
  render() {
    return (
      <div class={styles['video-container']}>
        {/* <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}
          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
                      ? '免费试看结束，购买完整课程后继续学习'
                      : '试看结束，领取课程后继续学习'}
                  </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
                        ? '立即购买'
                        : '免费领取'
                      : '返回免费'}
                  </Button>
                )}
                <div
                  class={state.platformType !== 'STUDENT' && styles.replay}
                  onClick={this.onReplay}
                >
                  <Icon
                    name="replay"
                    style={{ marginRight: '5px' }}
                    size={16}
                  />
                  重播
                </div>
              </>
            )}
          </div>
        )}
      </div>
    )
  }
})