classroom-app/src/views/intention-questionnaire/initVideo.ts

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

export const _initVideo = (type: string, forms: any, videoRef: any) => {
  let player = type === 'one' ? forms.player1 : forms.player2;
  // _initVideo('one', forms, forms.player1, videoIntervalRef, forms.introductionVideo, forms.coverImg, forms.player1Speed, forms.videoLoading1)
  const videoUrl =
    type === 'one' ? forms.introductionVideo : forms.introductionVideo2;
  const coverImg = type === 'one' ? forms.coverImg : forms.coverImg2;
  let playerSpeed = type === 'one' ? forms.playerSpeed1 : forms.playerSpeed2;
  let videoLoading = type === 'one' ? forms.videoLoading1 : forms.videoLoading2;
  const videoId = type === 'one' ? 'register-video' : 'register-video2';
  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="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="播放/播放" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><circle id="椭圆形" stroke="#FFFFFF" stroke-width="1.20385619" fill-opacity="0.3" fill="#000000" stroke-linecap="square" cx="25" cy="25" r="24.4114519"></circle><g id="视频/暂停" transform="translate(17.2619, 13.0952)" fill="#FFFFFF"><path d="M12.1943373,5.31370674 L19.8894148,18.3953385 C20.5636212,19.5414893 20.1810346,21.0171804 19.0348838,21.6913868 C18.6648746,21.9090393 18.2434029,22.0238095 17.8141251,22.0238095 L2.42397011,22.0238095 C1.09422728,22.0238095 0.0162577307,20.94584 0.0162577307,19.6160971 C0.0162577307,19.1868194 0.131027981,18.7653477 0.34868043,18.3953385 L8.04375794,5.31370674 C8.71796432,4.1675559 10.1936554,3.78496932 11.3398063,4.4591757 C11.6926653,4.66673986 11.9867731,4.96084767 12.1943373,5.31370674 Z" id="三角形" transform="translate(10.119, 11.9048) rotate(-270) translate(-10.119, -11.9048)"></path></g></g></svg></button>';

    el.appendChild(
      TCPlayer.dom.createEl('div', {
        className: 'vjs-button-icon',
        innerHTML: _html
      })
    );
    return el;
  };
  player = TCPlayer(videoId, {
    appID: '',
    controls: true,
    plugins: {}
  }); // player-container-id 为播放器容器 ID，必须与 html 中一致
  if (player) {
    player.src(videoUrl); // url 播放地址
    player.poster(coverImg || '');

    // player.on('loadstart', () => {})
    player.on('ready', (item: any) => {
      console.log('ready', item);

      // player.pause()
    });
    player.on('loadedmetadata', () => {
      console.log('loadedmetadata');
      videoLoading = false;
      if (type === 'one') {
        forms.videoLoading1 = false;
      } else {
        forms.videoLoading2 = false;
      }
    });

    // 速度变化时
    player.on('ratechange', () => {
      playerSpeed =
        playerSpeed < player.playbackRate()
          ? player.playbackRate()
          : playerSpeed;
    });

    player.on('seeking', () => {
      console.log('seeking');
      videoRef.isActive.value && videoRef.pause();
    });

    // // 拖动结束时
    player.on('seeked', () => {
      console.log('seeked');
      videoRef.isActive.value && videoRef.pause();
    });

    // 正在搜索中
    player.on('waiting', () => {
      // console.log('waiting pause')
      videoRef.isActive.value && videoRef.pause();
    });

    // 如何视频在缓存不会触发
    player.on('timeupdate', () => {
      // console.log('timeupdate', player.currentTime())
      // 判断视频计时器是否暂停，如果暂停则恢复
      // 添加 「forms.player.playing」 是由会跳转到上次播放时间，会触发些方法
      if (
        !videoRef.isActive.value &&
        player.currentTime() > 0 &&
        !player.paused()
      ) {
        // console.log('timeupdate play')
        videoRef.resume();
      }
    });

    // 视屏播放时暂停
    player.on('ended', () => {
      player.pause();
    });

    // 开始播放
    player.on('play', () => {
      // 视频一播放
      if (player.id() === 'register-video') {
        forms.player2.pause();
      }
      // 视频二播放
      if (player.id() === 'register-video2') {
        forms.player1.pause();
      }
      // console.log('play');
      // 判断视频计时器是否暂停，如果暂停则恢复
      videoRef.resume();
    });

    // 暂停播放
    player.on('pause', () => {
      // console.log('pause', videoRef.isActive.value);

      videoRef.pause();
    });
    let isFullscreen = false;
    player.on('fullscreenchange', () => {
      console.log('fullscreen fullscreenchange', player.isFullscreen());
      // if (player.isFullscreen()) {
      if (isFullscreen) {
        isFullscreen = false;
        const i = document.getElementById('fullscreen-back');
        i && i.remove();
      } else {
        isFullscreen = true;
        const i = document.createElement('i');
        i.id = 'fullscreen-back';
        i.className = 'van-icon van-icon-arrow-left video-back';
        i.addEventListener('click', () => {
          player.exitFullscreen();
        });
        document.getElementById(videoId)?.appendChild(i);
      }
      // } else {
      //   const i = document.getElementById('fullscreen-back');
      //   i && i.remove();
      // }
    });
    return player;
  }
};