西瓜播放器

2024年03月13日

柏拉文

越努力，越幸运

一、认识

---

西瓜播放器

二、安装

---

yarn add sass sass-loader
yarn add xgplayer

三、语法

---

3.1 Vue

<template>
<div id="xgplayer"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import Player from 'xgplayer';
import kuli from '../assets/video/kuli.mp4';
export default defineComponent({
name: '',
setup() {
    onMounted(() => {
    let player = new Player({
        id: 'xgplayer', //选择器 必配置
        url: kuli, //视频源 必配置
        fluid: true, //流式布局
        fitVideoSize: 'auto', //自适应视频内容宽高
        videoInit: true, //初始化显示视频首帧
    });
    });
},
});
</script>

<style scoped></style>