Video player
The video player lets you play videos in different formats from external sources. It is included in the Dashboard bundle.
The following video formats are supported. For more information, see Limitations.
- MP4
- OGG
- WEBM
- YouTube
URLs used in the video player must be added to the allowlist by the tenant admin in the Administration activity center. For more information, see Managing Content Security Policy (CSP). For allowlist examples, see Video player allowlist examples.
When to use it
The video player is useful when you want to include a video in your application. For example, you want to show a demo or a training video, add a tutorial, or present corporate news.
Adding videos
You can add video player object to a sheet that you are editing. Add or paste a video link into the video object. The video is streamed from a source; it is not uploaded to Qlik Sense. By default, the video format of the link will be auto-detected, the video will not auto-play, and video controls will be available to app consumers.
Do the following:
- In the advanced edit mode assets panel, open Custom objects > Dashboard bundle and drag a Video player object to the sheet, or click Add to Sheet.
- Add a video as a URL in the video player object field Add URL, or in the properties panel under Video > URL. You can format the URL field as an expression.
- Autodetect format is default setting and it will adjust accordingly based on the URL. You can also turn off Autodetect, and then select the correct supported video format.
Once you have added the video, you may want to adjust its options.
Setting video options
Video options are set in the Properties pane.
Click Auto play if you want the video to automatically start when viewed in analyzer mode. Auto play is turned off by default. When Auto play is selected, the video starts but it is muted. The app user has to select Unmute to turn the sound on.
Click Hide Controls to turn off video controls in analyzer mode. By default, video controls are visible.
You can add a Poster image. By default, the poster image is turned off. For Source, select an external URL that directs to an image, or add an image from your media library.
If a poster image is selected, the selected image is displayed before the video starts playing. Poster alignment specifies how the poster image will align inside the video player.
You cannot play the video in edit mode. The video restarts when you switch between analyzer mode and edit mode.
In analyzer mode, you start the video with the play button. You can pause, switch between mute and unmute, and view the video in full screen. You can also share the video player object, and Take snapshot.
In edit mode, the right-click context menu provides options for Qlik Sense. In analyzer mode, the context menu provides options for YouTube.
The app developer (edit mode) or app c+onsumer (analyzer mode) must allow YouTube videos to play in Qlik Sense.
Customizing styling
With Advanced options turned on, you have a number of styling options available under Appearance in the properties panel.
Click Styling under Appearance > Presentation to further customize the styling of the chart. You can reset your styles by clicking next to each section. Clicking Reset all resets styles for all available tabs in the styling panel.
For general information about styling an individual visualization, see Applying custom styling to a visualization.
Customizing the text
You can set the text for the title, subtitle, and footnote under Appearance > General. To hide these elements, turn off Show titles.
The visibility of the different labels on the chart depends on chart-specific settings and label display options. These can be configured in the properties panel.
You can style the text that appears in the chart.
Do the following:
-
Click Advanced options.
-
In the properties panel, expand the Appearance section.
-
Under Appearance > Presentation, click Styling.
-
On the General tab, set the font, emphasis style, font size, and color for the following text elements:
-
Title
-
Subtitle
-
Footnote
-
Customizing the background
You can customize the background of the chart. The background can be set by color and image.
Do the following:
-
Click Advanced options.
-
In the properties panel, expand the Appearance section.
-
Under Appearance > Presentation, click Styling.
-
On the General tab of the styling panel, you can select a background color (single color or expression). You can also set the background to an image from your media library or from a URL.
Information noteTo add a background image from a URL, the URL's origin needs to be added to the allowlist in your tenant's Content Security Policy. The origin must be added with the following Directive: img-src. This is done by a tenant administrator.
For more information, see Creating a CSP entry.
When using a background color, use the slider to adjust the opacity of the background.
When using a background image, you can adjust image sizing and position.
Customizing the border and shadow
You can customize the border and shadow of the chart.
Do the following:
-
Click Advanced options.
-
In the properties panel, expand the Appearance section.
-
Under Appearance > Presentation, click Styling.
-
On the General tab of the styling panel, under Border, adjust the Outline size to increase or decrease the border lines around the chart.
-
Select a color for the border.
-
Adjust the Corner radius to control the roundness of the border.
-
Under Shadow in the General tab, select a shadow size and color. Select None to remove the shadow.
Limitations
The video player has the following limitations:
- Safari does not support OGG and WEBM formats.
- iPhone adds native video controls. It does not use video player controls, therefore Hide Controls will not turn off controls.
- Android does not support OGG format.
- When exporting or printing a sheet that includes a video player object, the video player object will not be included.
Video player allowlist examples
The following table provides allowlist examples for the video player. For more information, see Managing Content Security Policy (CSP).
Name | Origin | Directive |
---|---|---|
video-play-test-mp4 | file-examples-com.github.io | media-src |
wiki img src | upload.wikimedia.org | img-src, media-src |
YouTube - No cookies | www.youtube-nocookie.com | child-src, font-src, frame-ancestors, frame-src, img-src, media-src, script-src, worker-src |
YouTube | www.youtube.com | child-src, font-src, frame-ancestors, frame-src, img-src, media-src, script-src, worker-src |
YouTube - img | img.youtube.com | img-src |
webm | dl5.webmfiles.org | img-src, media-src |