安装

npm install xgplayer

使用

<template>
  <div>
    <!-- 视频组件位置 -->
    <div id="video"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
//视频播放组件
import Player from "xgplayer";
export default defineComponent({
  setup() {
    onMounted(() => {
      //创建播放器对象
      new Player({
        id: "video",
        //视频地址
        url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
        //尺寸
        width: 600,
        height: 340,
        //播放器音量
        volume: 0.6,
        //播放图
        poster:
          "https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
        //传入倍速可选数组
        playbackRate: [0.5, 1, 1.5, 2],
      });
    });
  },
});
</script>

<style scoped lang="scss">
</style>

效果

更多内容见官方文档： 西瓜播放器