@webwriter/interactive-video

Interactive Video (@webwriter/interactive-video@3.0.1)

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/build@1.9.0