vue中使用西瓜視頻api

https://v2.h5player.bytedance.com/en/api/

npm install xgplayer

    <div id="mse"></div>
    <div id="box"></div>

<script>
import Player from "xgplayer";

export default {
  name: "home",
  data() {
    return {
      player: null,
    };
  },
  mounted() {
    this.player = new Player({
      id: "mse", //或者 el:document.querySelector('#mse'),
      url: "/api/feiyunzhixia.mp4", //視頻源
      definitionActive: 'hover', //修改清晰度控件的觸發方式（hover或click）   player.emit() 方法
      playNext: {
        urlList: ["url1", "url2", "url3"], //下一集
      },
      download: true, //設置download控件顯示
      autoplay: false, //目前大多數瀏覽器廠商不建議播放器自動播放視頻，開發者對此有特殊需求時可通過該配置項打開
      volume: 0, //播放器預設音量大小。 0 - 1
      // poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",  //封面圖
      playsinline: false,
      playbackRate: [0.5, 0.75, 1, 1.5, 2], //傳入倍速可選數組
      // width: 600,
      // height: 337.5,
      fluid: true, //流式布局，可使播放器寬度跟隨父元素的寬度大小變化，且高度按照配置項中的高度和寬度的比例來變化
      // fitVideoSize: 'auto'  //自適應視頻內容寬高
      loop: true, //循環播放

      // lastPlayTime: 20, //視頻起播時間（單位：秒） 記憶播放   播放器支持設置視頻起播時間。
      // lastPlayTimeHideDelay: 5, //提示文字展示時長（單位：秒）

      rotate: {
        //視頻旋轉按鈕配置項
        innerRotate: true, //只旋轉內部video
        clockwise: true, // 旋轉方向是否為順時針
      },
      rotateFullscreen: true, //樣式橫屏全屏

      danmu: {
        comments: [
          //彈幕數組
          {
            duration: 15000, //彈幕持續顯示時間,毫秒(最低為5000毫秒)
            id: "1", //彈幕id，需唯一
            start: 3000, //彈幕出現時間，毫秒
            prior: true, //該條彈幕優先顯示，默認false
            color: true, //該條彈幕為彩色彈幕，默認false
            txt: "長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕長彈幕", //彈幕文字內容
            style: {
              //彈幕自定義樣式
              color: "#ff9500",
              fontSize: "20px",
              border: "solid 1px #ff9500",
              borderRadius: "50px",
              padding: "5px 11px",
              backgroundColor: "rgba(255, 255, 255, 0.1)",
            },
            mode: "top", //顯示模式，top頂部居中，bottom底部居中，scroll滾動，默認為scroll
            // el: DOM //直接傳入一個自定義的DOM元素作為彈幕，使用該項的話會忽略所提供的txt
            // eventListeners: [{ //支持自定義DOM設置DOM監聽事件
            //   event: 'click',
            //   listener: function (e) {
            //     console.log('click')
            //   },
            //   useCapture: false,
            // }]
          },
        ],
        area: {
          //彈幕顯示區域
          start: 0, //區域頂部到播放器頂部所占播放器高度的比例
          end: 1, //區域底部到播放器頂部所占播放器高度的比例
        },
        closeDefaultBtn: true, //開啟此項后不使用默認提供的彈幕開關，默認使用西瓜播放器提供的開關
        defaultOff: true, //開啟此項后彈幕不會初始化，默認初始化彈幕
      },

      pip: true, //  畫中畫
      miniplayer: true, //mini小窗
      miniplayerConfig: {
        bottom: 200,
        right: 0,
        width: 320,
        height: 180,
      },
      // cssFullscreen: true,  // #網頁樣式全屏 樣式全屏功能不會隱藏當前瀏覽器的標簽欄，導航欄，只是在當前頁面內部全屏顯示。
      screenShot: {
        // 截圖功能支持用戶對當前視頻播放窗口進行即時截屏，截圖尺寸即為當前視頻播放窗口的尺寸，截圖默認為 .png 格式
        saveImg: true,
        quality: 0.92,
        type: "image/png",
        format: ".png",
      },
      // 支持用戶在線預覽本地視頻。
      preview: {
        uploadEl: document.querySelector("#box"),
      },
      // progressDot: [
      //   {
      //     time: 10, //展示標記的時間
      //     text: "標記文字", //鼠標hover在標記時展示的文字
      //     duration: 8, //標記段長度（以時長計算）
      //     style: {
      //       //標記樣式
      //       background: "blue",
      //     },
      //   },
      //   {
      //     time: 22,
      //     text: "標記文字",
      //   },
      //   {
      //     time: 56,
      //     duration: 8,
      //   },
      //   {
      //     time: 76,
      //   },
      // ],
      keyShortcutStep: {
        //鍵盤快捷鍵：按 → 鍵快進10秒， 按 ← 鍵后退10秒，按 ↑ 鍵調高音量，按 ↓ 鍵調低音量，按 space 鍵切換播放/暫停狀態 
        currentTime: 15, //播放進度調整步長，默認10秒
        volume: 0.2, //音量調整步長，默認0.1
      },
      controls: true, //關閉控制條  播放器控制條由播放/暫停、定位、音量、全屏切換等元素
      controlsList: ['nodownload'], // 選擇關閉部分控制條選項可以通過配置controlsList選項實現。 參考值：['nodownload','nofullscreen','noremoteplayback']
    });

    this.player.emit('resourceReady', [{name: '高清', url: '/api/feiyunzhixia.mp4'}, {name: '超清', url: '/api/feiyunzhixia.mp4'}]);

  },
  methods: {},
};
</script>