import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer)

import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

declare module 'vue-video-player';

<video-player
      ref="videoPlayer"
      class="video-player vjs-custom-skin"
      @play="handlePlay"
      @pause="handlePause"
      :options="playerOptions">
</video-player>

import { ref } from 'vue';
export default {
  setup() {
    const videoPlayer = ref(null);
    const audioSource = ref('./assets/music.mp3');
    const playerOptions = {
      height: 400,
      // playbackRates: [0.7, 1.0, 1.5, 2.0],  //視頻加速
      autoplay: false,
      muted: false,
      loop: false,
      preload: 'auto',
      language: 'zh-CN',
      fluid: true,
      sources: [
        {
          type: 'video/mp4',
          src: require('./assets/video.mp4')
        }
      ],
      poster: require('./assets/04.jpg'),   // 封面地址
      notSupportedMessage: '此視頻暫無(wú)法播放，請(qǐng)稍后再試',
      controlBar: {
        timeDivider: true,   //當(dāng)前時(shí)間和持續(xù)時(shí)間的分隔符
        durationDisplay: true,   //顯示持續(xù)時(shí)間
        remainingTimeDisplay: false,  //是否顯示剩余時(shí)間功能
        fullscreenToggle: true,  //全屏按鈕
        showPlayButton: true,
      }
    };
    const showPlayButton = ref(true);
    const handlePlay = () => {
      showPlayButton.value = false;
    };
    const handlePause = () => {
      showPlayButton.value = true;
    };
    return {
      videoPlayer,
      playerOptions,
      showPlayButton,
      handlePlay,
      handlePause,
      audioSource,
    };
  },
};

<audio ref="audioPlayer" controls>
    <source :src="audioSource" type="audio/mpeg">
    您的瀏覽器不支持
</audio>