vue3 集成西瓜视频播放器xgplayer

西瓜视频播放器官网地址：https://v2.h5player.bytedance.com/

第一步：安装最新稳定版

$ npm install xgplayer

vue页面使用

<template>
  <div id="mse"></div>
</template>
<script lang="ts">
import { onMounted } from "vue";
import Player from 'xgplayer'
export default {
  name: "Index",
  setup(props, context): any {
    onMounted(() => {
      const player = new Player({
        id: 'mse',
        autoplay: false,
        width: 700,
        height:400,
        url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
        poster: "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
        playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
      })
    });
  }
}
</script>
<style scoped lang="scss">
#mse {
  flex: auto;
}
</style>