Video

wiz-video is a powerful video playback component for (e-Detailers and emails) that supports several video sources (YouTube, Brightcove, eWizard-hosted files, or local files).

The wiz-video component features automatic video type detection, customizable posters and play icons, various shape options (rectangle, circle, square), and comprehensive playback controls. It intelligently adapts its rendering based on the delivery channel, ensuring optimal compatibility and user experience across all platforms.

The cross-channel video component has the following key features:

• Multi-format support (MP4, MOV).

• YouTube, Brightcove, hosted, and locally (in the content item) stored video support.

• Customizable poster images and play icons.

• Shape options: rectangle, circle, square.

• Playback controls and options (autoplay, loop, mute, fullscreen).

• Email-compatible rendering with clickable thumbnails.

• Comprehensive playback event tracking (play, pause, ended, timeupdate).

Installation

The wiz-video component is part of the eWizard.js component library. To install it to your project, run the following command in the terminal:

wiz install @component/wiz-video

Register the component globally in your application or import it in your Vue template.

Properties

The wiz-video component has the following properties:

Property	Type	Default	Description
componentName	String	'Video'	Display name for the component in eWizard Editor.
video	String	''	URL to a video file (supports MP4, WEBM, AVI, MOV, MKV, FLV, WMV, OGG formats).
link	String	''	URL to YouTube, Brightcove, or eWizard-hosted video.
alternativeText	String	'Video'	Alternative text description for accessibility.
shape	String	'rectangle'	Video container shape: 'rectangle', 'circle', or 'square'.
controls	Boolean	true	Show native video controls (Only applies to e-Detailers).
autoplay	Boolean	false	Automatically start playing when the slide opens (Only applies to e-Detailers).
fullScreen	Boolean	false	Play video in fullscreen mode (available only for local video files in e-Detailers).
loop	Boolean	false	Loop the video when it ends (Only applies to e-Detailers).
muted	Boolean	true	Mute audio by default (Only applies to e-Detailers).
playsinline	Boolean	true	Play video inline on mobile devices instead of fullscreen (Only applies to e-Detailers).
playingDuration	Number	0	Maximum duration in seconds for video playback (Only applies to e-Detailers).
poster	String	default-poster.png	Custom poster image URL displayed before playback starts.
showPoster	Boolean	true	Show or hide the poster image (Only applies to e-Detailers).
playIcon	String	playIcon.svg	Custom play icon image URL.
showPlayIcon	Boolean	true	Show or hide the play icon overlay.
align	String	'left'	Content alignment: 'left', 'center', or 'right'.

Custom events

The wiz-video component emits the following custom events for interaction tracking and custom behavior:

Event	Payload	Description
play	None	Emitted when video playback starts.
pause	None	Emitted when video is paused.
ended	None	Emitted when video playback ends or playing duration limit is reached.
load	None	Emitted when the video resource has been loaded successfully.
timeupdate	Number	Emitted as the video plays, with the current playback time in seconds.

Channel-specific behavior

The cross-channel video component adapts its rendering and functionality based on the content item context.

• Full native HTML5 video controls available.

• Support for iFrame-based embeds (YouTube, Brightcove).

• Full video element with playback controls.

• Automatic fullscreen capability for local files.

• Shape constraints applied with CSS (circle and square maintain aspect ratio).

• Videos are rendered as HTML email-compatible content using image and link elements.

• A play icon overlay is displayed as an absolute-positioned image. Since email clients don't support absolute positioning, the as-image attribute is added to the play icon causing the video to be rendered as a single clickable image with a link to the video.

• A poster image is used as a clickable thumbnail.

• Shape support: rectangle, circle, square.

• Interactivity is limited to a single click that starts video playback; video controls are not supported.

Usage examples

Basic YouTube video

<wiz-video
  link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  poster="path/to/poster.jpg"
  shape="rectangle"
/>

Circular video with local file

<wiz-video
  video="path/to/video.mp4"
  :autoplay="false"
  shape="circle"
  :controls="true"
  :muted="true"
/>

Square video with limited playback duration

<wiz-video
  link="https://youtu.be/dQw4w9WgXcQ"
  shape="square"
  :playingDuration="30"
  :loop="true"
  @ended="onVideoEnded"
/>

Listening to video events

<wiz-video
  video="path/to/video.mp4"
  @play="handlePlay"
  @pause="handlePause"
  @timeupdate="handleTimeUpdate"
  @ended="handleEnded"
/>

export default {
  methods: {
    handlePlay() {
      console.log('Video started playing');
    },
    handlePause() {
      console.log('Video paused');
    },
    handleTimeUpdate(currentTime) {
      console.log(`Current playback time: ${currentTime}s`);
    },
    handleEnded() {
      console.log('Video playback ended');
    }
  }
}

Technical notes

• The component automatically detects video source type through URL validation (YouTube URLs, Brightcove URLs, or video file extensions).

• YouTube video IDs are extracted automatically from various YouTube URL formats.

• The component prevents playback during editing.