@predy-js/player-vue

PredyPlayerVue 组件

使用方法

1. 引入组件

首先，您需要将PredyPlayerVue组件导入到您想要使用它的Vue文件中。

import PredyPlayerVue from '@xhs/predy-player-vue';

2. 在模板中添加组件

在您的模板中包含PredyPlayerVue组件。您可以绑定source属性到您想要播放的媒体的URL。此外，您还可以处理各种事件，例如动画开始或动画失败。 编辑器链接：https://fe.sit.xiaohongshu.com/predy

<template>
   <PredyPlayerVue class="player" :source="source"/>
</template>

3. 设置脚本

在 script 标签内，定义必要的状态和函数。

<script setup lang="ts">
import { ref } from 'vue';
import PredyPlayerVue from '@xhs/predy-player-vue';

const source = 'https://picasso-static.xiaohongshu.com/predy/104102i030tn2kiof1c06b17dcu9g000000000352m76t4';
</script>