0.0.6 • Published 11 months ago
@chapterme/interactive-player v0.0.6
ChapterMe Interactive
Installation
To install ChapterMe's interactive player, you can use npm or yarn. Open your terminal and run the following command:
Using npm:
npm i @chapterme/interactive-player
Using yarn:
yarn add @chapterme/interactive-player
Vue.js
Usage
To use the interactive player in your Vue.js project, follow these steps: 1. Import the ChapterMe player component in your Vue component:
<script> import ChaptermePlayer from '@chapterme/interactive-player/vue/videojs.vue';
export default { components: { ChaptermePlayer } }
2. Add the player component in your template:
*Note - Make sure to replace data-video-id and data-account-id with the actual values for your video id and account id.*
Example code
Here's an example of how you can integrate the interactive player in your Vue.js project:
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<div id="video-container"> <!-- give some height and width to this div -->
<ChaptermePlayer video-id="xxxxxxxx" account-id="xxxxxxxx" />
</div>
</template>
<script>
import ChaptermePlayer from '@chapterme/interactive-player/vue/videojs.vue';
export default {
components: {
ChaptermePlayer
}
}
</script>
<style scoped>
#video-container {
height: 450px;
width: 600px;
}
</style>