wiz-video

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

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

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>

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.

To ensure the Veeva Vault assets upload with the wiz-video component in eWizard Editor, declare the video component type in the index.vue and ewizard.config.js files of the component.

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 following properties are available:

Property	Type	Default value	Description
autoplay	boolean	false	Starts the video playback when opening the slide.
componentName	string	Video	The text label displayed in eWizard Editor.
controls	boolean	true	Shows the video controls.
fullScreen	boolean	false	Opens the video in full screen mode when you start the video playback.
loop	boolean	false	Loops the video playback.
muted	boolean	true	When true, the video starts muted.
playingDuration	number	0	The video playback duration in seconds.
playsinline	boolean	true	Plays the video inline within the playback area.
poster	string	./media/images/poster.png	Path to the poster thumbnail image that appears on the video.
showPoster	string	true	The poster image visibility on the video.
src	string	N/A	The path to the local video file within the e-Detailer or link to the video file on YouTube/Brightcove.