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
  }
}
</script>

2. Add the player component in your template:

<template>
  <div>
    <!-- Your existing HTML code here -->
    <div id="video-container"> <!-- give some height and width to this div -->
      <ChaptermePlayer video-id="data-video-id" account-id="data-account-id" />
    </div>
  </div>
</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>