Interactive Video (@webwriter/[email protected])

License: MIT | Version: 3.0.1

(WIP) Enhance learning by adding interactive content in popups to videos for an engaging, interactive experience.

Snippets

Snippets are examples and templates using the package's widgets.

| Name | Import Path | | :--: | :---------: | | Mondlandung | @webwriter/interactive-video/snippets/Mondlandung.html |

WebwriterInteractiveVideo (<webwriter-interactive-video>)

Class containing the video player as well as all the logic for video playback, interactive elements, controls, file input, and more. This class extends the LitElementWw class.

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/interactive-video/widgets/webwriter-interactive-video.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/interactive-video/widgets/webwriter-interactive-video.js"></script>
<webwriter-interactive-video></webwriter-interactive-video>

Or use with a bundler (e.g. Vite):

npm install @webwriter/interactive-video

<link href="@webwriter/interactive-video/widgets/webwriter-interactive-video.css" rel="stylesheet">
<script type="module" src="@webwriter/interactive-video/widgets/webwriter-interactive-video.js"></script>
<webwriter-interactive-video></webwriter-interactive-video>

Fields

| Name (Attribute Name) | Type | Description | Default | Reflects | | :-------------------: | :--: | :---------: | :-----: | :------: | | hideInteractions (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>)

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.

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/interactive-video/widgets/webwriter-video-interaction.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/interactive-video/widgets/webwriter-video-interaction.js"></script>
<webwriter-video-interaction></webwriter-video-interaction>

Or use with a bundler (e.g. Vite):

npm install @webwriter/interactive-video

<link href="@webwriter/interactive-video/widgets/webwriter-video-interaction.css" rel="stylesheet">
<script type="module" src="@webwriter/interactive-video/widgets/webwriter-video-interaction.js"></script>
<webwriter-video-interaction></webwriter-video-interaction>

Fields

| Name (Attribute Name) | Type | Description | Default | Reflects | | :-------------------: | :--: | :---------: | :-----: | :------: | | tabIndex (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/[email protected]