vue中新增音訊和視訊

視訊播放功能

1. 安裝vue-video-player

npm install vue-video-player --save

或

yarn add vue-video-player --save

2. 在main.js中全域性參照

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'

注：在此處可能會出現參照不上的錯誤，npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-video-player - Not found

這個報錯是因為察覺到元件參照不了，所以再次安裝vue-video-player，解決方法就是在根目錄手動建立宣告檔案，手動建立一個 TypeScript 宣告檔案（.d.ts 檔案），來為 vue-video-player 新增型別宣告。在專案的根目錄中建立一個新檔案，命名為 vue-video-player.d.ts，然後新增以下內容：

declare module 'vue-video-player';

這將告訴 TypeScript vue-video-player 模組的型別資訊，儘管這些資訊可能不是很準確。還有一個解決方案就是你可以在 TypeScript 設定中關閉嚴格模式，這樣 TypeScript 將不會強制執行型別檢查。在 tsconfig.json 檔案中將 "strict": true 更改為 "strict": false。

3. 視訊播放器

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

設定引數 

<script>
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: '此視訊暫無法播放，請稍後再試',
      controlBar: {
        timeDivider: true,   //當前時間和持續時間的分隔符
        durationDisplay: true,   //顯示持續時間
        remainingTimeDisplay: false,  //是否顯示剩餘時間功能
        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,
    };
  },
};
</script>

注：此引數中包含以下音訊播放器的引數

音訊播放功能

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