classroom-app/src/components/m-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';
export default defineComponent({
  name: 'o-video',
  props: {
    setting: {
      type: Object,
      default: () => {}
    },
    controls: {
      type: Boolean,
      default: true
    },
    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: () => {}
    }
  },
  emits: ['exitfullscreen'],
  data() {
    return {
      videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
      player: null as any,
      loading: true // 首次进入加载中
    };
  },
  mounted() {
    this._init();
  },
  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 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: this.controls
      }); // player-container-id 为播放器容器 ID，必须与 html 中一致
      if (this.player) {
        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;
          this.domPlayVisibility(false);
        });
        this.player.on('play', () => {
          this.onPlay && this.onPlay(this.player);
        });

        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);
      }
    },

    onReplay() {
      this.player.currentTime(0);
      this.player.play();
      this.domPlayVisibility(false);
    },
    onStop() {
      this.player.currentTime(0);
      this.player.pause();
    }
  },
  unmounted() {
    this.player?.pause();
    this.player?.src('');
    this.player?.dispose();
  },
  render() {
    return (
      <div class={styles['video-container']}>
        <video
          ref="video"
          id={this.videoID}
          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="#FF8057"
              vertical
              style={{ height: '100%', justifyContent: 'center' }}>
              加载中...
            </Loading>
          </div>
        )} */}
      </div>
    );
  }
});