wiz-video component in e-Detailers

With the wiz-video component, you can add videos to your e-Detailer.

Installation

To install the wiz-video component, run the following command in your e-Detailer project root directory:

wiz install @edetailer/wiz-video

For more information, see Install components.

Usage

NOTE: As a best practice, use eWizard Editor to add and edit the components.

To add the wiz-video component to the slide template:

1) Add the <wiz-video></wiz-video> tag to the slide template in the ./slides/default/index.vue file.

<!-- ./slides/default/index.vue --><template>
<wiz-slide>
<wiz-video></wiz-video>
</wiz-slide>
</template>

2) Add the path to the video as the src attribute value. For example:

<!-- ./slides/default/index.vue --><wiz-video src="./media/videos/my-video.mp4"></wiz-video>

NOTE: To use a video on any slide of your e-Detailer, save this video file to the ./../../common/media/videos/ path. For more information, see Manage video files.

Attributes

You can change the wiz-video component appearance and behavior using the following attributes within the <wiz-video></wiz-video> tag:

• autoplay

To play the video on the slide opening, change the attribute value to true:

<wiz-video src="./media/videos/my-video.mp4" :autoplay="true"></wiz-video>

• full-screen

To open the video in full screen mode when you start the playback, change the attribute value to true:

<wiz-video src="./media/videos/my-video.mp4" :full-screen="true"></wiz-video>

• loop

To loop the video playback, change the attribute value to true:

<wiz-video src="./media/videos/my-video.mp4" :loop="true"></wiz-video>

• muted

To play the video with sound when you start the playback, change the attribute value to false. By default, the video playback starts muted:

<wiz-video src="./media/videos/my-video.mp4" :muted="false"></wiz-video>

• playsinline

To play the video inline within the playback area, change the attribute value to true. You can still open the video in full screen mode using controls:

<wiz-video src="./media/videos/my-video.mp4" :playsinline="true"></wiz-video>

• playing-duration

To set the playing duration of the video, define the time in seconds as the attribute value:

<wiz-video src="./media/videos/my-video.mp4" :playing-duration="35"></wiz-video>

• poster

Add the path to the poster image that appears in your video:

<wiz-video
src="./media/videos/my-video.mp4"
poster="./media/images/poster.jpg"
show-poster="true"
></wiz-video>

• show-poster

To display the poster image in the video, change the value to true:

<wiz-video
src="./media/videos/my-video.mp4"
poster="./media/images/poster.jpg"
show-poster="true"
></wiz-video>

• controls

To show controls in the video, change the value to true:

<wiz-video src="./media/videos/my-video.mp4" :controls="true"></wiz-video>

Properties

The wiz-video component has the following properties:

Property	Type	Default	Description
`componentName`	String	`Video`	The text of the component name label in eWizard Editor.
`src`	String	N/A	The path or link to the video file.
`controls`	Boolean	`true`	Show the video controls.
`autoplay`	Boolean	`false`	Start the video playback on the slide opening.
`fullScreen`	Boolean	`false`	Open the video in full screen mode when you start the video playback.
`loop`	Boolean	`false`	Loop the video playback.
`muted`	Boolean	`true`	Mute the video when you start the playback.
`playsinline`	Boolean	`true`	Play the video inline within the playback area.
`playingDuration`	Number	`0`	Set the playback duration in seconds.
`poster`	String	`./node_modules/` `wiz-video/media/` `images/poster.png`	Path to the poster image (thumbnail) that appears on the video.
`showPoster`	Boolean	`true`	Show the poster image on the video.

For more information, see Component properties.