(WIP) Enhance learning by adding interactive content in popups to videos for an engaging, interactive experience.
npm install @webwriter/interactive-video@webwriter/interactive-video@3.0.1)(WIP) Enhance learning by adding interactive content in popups to videos for an engaging, interactive experience.
| Name | Import Path |
| :--: | :---------: |
| Mondlandung | @webwriter/interactive-video/snippets/Mondlandung.html |
WebwriterInteractiveVideo (LitElementWw class.Use with a CDN (e.g. jsdelivr):
``html`
Or use with a bundler (e.g. Vite):
`
npm install @webwriter/interactive-video
`html`
(hide-interactions) | boolean | Whether interactions should be shown | false | ✓ |
| hideChapters (hide-chapters) | boolean | Whether the video has chapters and they should be shown | false | ✓ |
| disablePlaybackRateChange (disable-playback-rate-change) | boolean | Whether the user is allowed to change the playback rate | false | ✓ |
| videoBase64 (video-base64) | string | Video file as a base64 string for offline storage. | "" | ✓ |
| videoURL (video-url) | string | Video URL for online playback. | "" | ✓ |
| videoLoaded (videoLoaded) | boolean | Indicates whether the video is currently loaded. | false | ✗ |
| videoType (video-type) | string | Type of the video source. | "placeholder" | ✓ |
| videoDetails (video-details) | { title: string; author: string; duration: number } | Details of the video, such as title, author, and duration. | { title: "", author: "", duration: 0, } | ✓ |
| waveformData (waveform-data) | number[][] | Waveform data for audio visualization generated by WaveSurfer.js. | null | ✓ |
| chapterConfig (chapter-config) | { title: string, startTime: number }[] | Contains the current chapter configuration as an object. | [] | ✓ |
| selectedInteractionId (selectedInteractionId) | number | Contains the ID of the selected interaction. | -1 | ✗ |
| videoInteractions | - | The list of video interaction elements slotted into the component. | - | ✗ |
| tabIndex (tabIndex) | number | The tab index of the component. | -1 | ✓ |
| videoPlayer | VideoPlayer | The video player element | - | ✗ |Fields including properties and attributes define the current state of the widget and offer customization options.
Methods
| Name | Description | Parameters |
| :--: | :---------: | :-------: |
| showPopups | Renders the overlay elements for the video. | -
| updateContext | Updates the videoContext attribute and requests an update. | -
| updateBaublePositions | Updates the positions of the baubles in the widget. | -
| playVideo | Plays the video. | -
| pauseVideo | Pauses the video. | -Methods allow programmatic access to the widget.
Editing config
| Name | Value |
| :--: | :---------: |
| draggable | false |
| definingAsContext | true |
| content | (webwriter-video-interaction)* |The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
WwVideoInteraction ()
webwriter-video-interaction is a custom element that represents an interaction in a replace interaction.
It extends LitElementWw and provides a slot for content insertion.$3
Use with a CDN (e.g. jsdelivr):
`html
`Or use with a bundler (e.g. Vite):
npm install @webwriter/interactive-video
html
`Fields
| Name (Attribute Name) | Type | Description | Default | Reflects |
| :-------------------: | :--: | :---------: | :-----: | :------: |
| (tabIndex) | number | The tab index of the component. | -1 | ✓ |
| id (id) | - | The interaction id. Must be unique. | - | ✓ |
| startTime (startTime) | - | The interaction start time in seconds. | - | ✓ |
| endTime (endTime) | - | The interaction end time in seconds. | - | ✓ |
| noInitialPause (noInitialPause) | boolean | Whether the interaction should pause the video when shown. | false | ✓ |
| hasPaused (hasPaused) | boolean | Whether the interaction has already paused the video. | false | ✗ |
| posX (posX) | - | The x position of the interaction as a percentage of the video width. | - | ✓ |
| posY (posY) | - | The y position of the interaction as a percentage of the video height. | - | ✓ |
| width (width) | - | The width of the interaction in pixels. | - | ✓ |
| height (height) | - | The height of the interaction in pixels. | - | ✓ |
| parentWidth (parentWidth) | - | The width of the parent video player. | - | ✗ |
| parentHeight (parentHeight) | - | The height of the parent video player. | - | ✗ |
| videoBaseWidth (videoBaseWidth) | number | The video width in non-full-screen mode. | 800 | ✗ |
| videoBaseHeight (videoBaseHeight) | number | The video height in non-full-screen mode. | 450 | ✗ |Fields including properties and attributes define the current state of the widget and offer customization options.
Events
| Name | Description |
| :--: | :---------: |
| interactionClicked | - |
| positionChanged | - |Events are dispatched by the widget after certain triggers.
Editing config
| Name | Value |
| :--: | :---------: |
| draggable | false |
| definingForContent | true |
| isolating | true |
| content | (flow)* |
| uninsertable | true` |The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public methods, slots, custom CSS properties, or CSS parts.
---
Generated with @webwriter/build@1.9.0