0.8.1 • Published 1 month ago

vue-h5p v0.8.1

Weekly downloads
8
License
MIT
Repository
github
Last release
1 month ago

GitHub Actions Coveralls GitHub Dependabot License npm vue

vue-h5p

A vue h5p component for displaying H5P content standalone, inspired by tunapanda/h5p-standalone.

Installation

With module loader

npm install vue-h5p

or

yarn add vue-h5p

in your component:

<template>
  <h5p src="path/to/h5p-content" :l10n="translations" @xapi="handleXAPIEvent">
    Loading...
    <template #error>
      Resource not available. :(
    </template>
  </h5p>
</template>

<script>
import h5p from 'vue-h5p'
import translations from './translations'

export default {
  components: {
    h5p
  },
  computed: {
    translations () {
      return translations
    }
  },
  methods: {
    handleXAPIEvent (ev) {
      console.log('H5P emitted X-API event')
    }
  }
}
</script>

Props

The component accepts the following props:

PropRequiredTypeDefaultDescription
copynoBooleanfalseEnable copy button
copyrightnoBooleanfalseEnable copyright button
cssnoString''Inject css into a in the iframe
embednoString''Set embedCode and enable embed button
exportnoString''Set exportUrl and enable export button
fullscreennoBooleanfalseEnable fullscreen button
iconnoBooleanfalseEnable H5P icon
l10nnoObject{}UI translations
resizenoString''Set resizeCode
srcyesString-Path to the h5p content
actornoObject-Set actor for emitted xAPI statements

See Creating your own h5p plugin for translation strings.

NOTE: UI translations are not reactive. You have to manually trigger a rerender for translation changes to take effect (e.g. by binding :key to your locale).

Events

All events emitted by H5P are emitted by vue-h5p, event names are the H5P event type, payload is the event data.

Besides that we emit an "ready" event when H5P signals that its loaded, and "height-changed" events (with the new height as integer argument), whenever H5P resize the iframe.

Slots

You can use the default slot to render a placeholder while the content is loading.

The named slot "error" is rendered if a request to get the h5p JSON files fails, the slot-scope provides failed request as "error" object.

Custom CSS

You can inject custom CSS into the H5P iframe by using the css prop.

<h5p
  src="path/to/h5p-content"
  :css="`
    .class-in-the-iframe {
      background-color: #fff;
    }
  `"
/>

Actor for xAPI statements

The actor prop can be set to either a combination of name and email adress or to a combination of name and homePage, according to the xAPI specs.

{
  name: 'John Doe',
  mail: 'john.doe@example.com'
}

{
  name: 'account-id',
  homePage: 'https://example.com'
}

Development

Put your extracted h5p content into example/public/h5p, files are served by vue-dev-server.

Serve the example using

yarn serve

Write code, commit changes using conventional commits.

Prepare release with

yarn pre-version

0.8.1

1 month ago

0.6.7

1 year ago

0.6.6

1 year ago

0.8.0

12 months ago

0.7.1

12 months ago

0.6.5

1 year ago

0.7.0

1 year ago

0.6.3

1 year ago

0.6.2

1 year ago

0.6.4

1 year ago

0.6.1

1 year ago

0.6.0

1 year ago

0.5.3

2 years ago

0.5.2

2 years ago

0.5.0

2 years ago

0.4.0

2 years ago

0.5.1

2 years ago

0.3.0

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago