Video
  • 20 Apr 2024
  • 2 Minutes to read
  • PDF

Video

  • PDF

Article summary

Use Video widget to stream, and play video files from YouTube, websites, servers, or internally stored devices.

User persona: Application Designer

Let's explore the following Use Case for designing the Video widget!
 
Use Case

User persona: Administrator

Solution
Sandra wants to share the instructional video of specific modules across the organization. The video streamed should be of a defined duration with high clarity!

John can use the Video widget to embed videos on the platform. By attaching the source file link and defining the start and end times, he ensures that the video plays automatically, starting and ending at predetermined times. This feature guarantees a consistent and controlled viewing experience, ideal for instructional content that needs to cover specific topics within a defined time frame.


For details about the Use Case, refer to the GIF below:
video

Configure Video widget

This section contains the list of steps using which Administrator can select the Video widget in the Service Portal through the Design Portal screen.

To configure the Video widget, perform the following steps:

  1. Navigate to Design Portal > Widgets > Video.
    Figure: Adding Widgets

  2. Customize the Service Portal by dragging the Video widget from the widget list screen.Figure: Video

  3. Click the Settings icon to view Properties pop-up.
    Figure: Modify the video properties

You can view the following tabs on the Settings for this field:

Properties

This section contains the list of properties using which the Application Designer can configure the respective widget feature. To know more about the fields available under the Properties section, see the Field Description below.

Figure: Properties
The table below contains the list of fields and their descriptions that are available under the Properties section:
Field Description

Properties
Title
Specify the heading to the Video widget using the widget title textbox.
Figure: Title box
Source
Provide a source for the video by choosing from the source drop-down list.Figure: Source list
If you select the source value as YouTube, then the screen appears as shown below:
Figure: Sample screen titled Asset Dashboard with YouTube link
You can provide a URL under the Link and specify the Start Time and End Time for the display video.
If you select the source value as Others, then the screen appears as shown below:
Figure: Source - Others
You cannot define the start and end time for other sources.
Link
Specify the hyperlink for the video.
The Link field supports MPEG-4 video .mp4 and Web M Video .webm only.

Appearance 

This section contains the list of features using which the Application Designer can select Video and Image Overlay.

Figure: Appearance tab

Field Description

VideoApply the Overlay Image on the video using the toggle bar.
Figure: Image Overlay(Off mode)
By default, the toggle bar is off mode! 
Image OverlayIf you turn it on, then it displays the Image Upload field where you can upload the image from the device.
Figure: Image Overlay(On mode)
The screen appears as shown below:
Figure: Image browsing window
Figure: Uploaded image
BorderSelect the border by selecting desired Border Type from the drop-down list.
Figure: Border
Dimensions
Dimension

Select the widget's height and width from the drop-down list. You can set the height in pixels (px) and the width in both percentage (%) and pixels (px). Using a percentage for width allows the widget to fill the container's width.

Figure: Dimension

Navigate to the Service portal screen and check the configured Video widget.Figure: Video widget


Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.