Video Player Component

#1

This component was added in a recent nightly build. Embedding video in views is now possible with the addition of the Video Player Component. This component was built as a way for you to point to either a live feed from an IP camera or video file, that is accessible from your gateway, and present that content in a view. The component is wrapped in a skin that gives you control over the style of the video controls and a uniform experience across browsers. Video controls can also be hidden (available on hover) to allow for a simple, clean video display.

One note about building a project inside of the Ignition Designer… The Designer contains an instance of JxBrowser to display your views as you build them. There are a few codecs that JxBrowser does not support. Because of this, you may find that a video file that you know to be valid does not display correctly while building your view. Fear not! It is only a limitation of the Designer. Your video will work as expected in a client session.

Video File


If choosing to display a video file, you will have a decent set of properties at your disposal for display of the video, control over it, and status updates as the video is playing.

Controls

All sub-properties listed under the controls property provide a way to interact with the video (see below for a full list of properties and their descriptions). These properties can be set at design time and are updated when interacting with the video during a client session. Because they are updated during a client session, they can be bound if the display of your video needs to drive the display of any other interface components.

Status

All sub-properties listed under the status property provide feedback as your video is playing (see below for a full list of properties and their descriptions). These properties are passive and simply updated as the video makes progress. These properties can also be bound if the status of your video needs to drive the display of any other interface components.

Live Feed

image
If choosing to display a feed from an IP camera, you’ll just need to toggle on the liveFeed property. After doing this, you’ll see that the list of properties available to you has shrunk to just the source property and both style properties. When connecting to a live feed, it will either be up and available, or you’ll see an error if the feed cannot be accessed. For this reason, control and status properties are not needed.

Mobile Support

We couldn’t leave out mobile support for this component! On Android, you’ll get the same experience as the desktop display with one exception; when going into “fullscreen” mode, you’ll be presented with the native video control for a cleaner fullscreen experience on that platform. On iOS, you’ll get the native video control for standard and “fullscreen” mode.

Style

image
There are two different style configurations to which you have access as a way to customize the look-and-feel of this component to suit your needs:

General Style

The base style property is used a a way to add style to the background display of the component.

Control Style

The controlStyle property is used to style the control bar, all controls, error messaging, context menus, and control popups.

Properties

Listed below is a breakdown of the properties for this component:

  • source (String, required) - The path to the source of the video or live feed.
  • liveFeed (Boolean, optional) - Used to toggle the component to display a live feed. If set to true, the poster, autohideControls, controls, and status properties will be hidden as they pertain only to a video file.
  • poster (String, optional) - The path to an image that will display as the background image of the video file when the video has not yet loaded.
  • autohideControls (Boolean, optional) - Used to toggle the visible state of the control bar when displaying a video file. If set to true, the control bar will be displayed only when the mouse is hovered over the video.
  • controls (Object, required) - This property holds several sub-properties that are used to provide settings and interaction points with a video file:
    • autoplay (Boolean, optional) - If set to true, the video will begin playing when the client session loads. NOTE: If on iOS, the mute control sub-property will also need to be enabled for the video file to play automatically (security restriction of that platform).
    • loop (Boolean, optional) - If enabled, the video file will play over indefinitely once it has completed.
    • mute (Boolean, optional) - If enabled, the video will show as being in a muted state and will have no volume.
    • play (Boolean, optional) - If enabled, the video will play. If disabled, the video will be paused.
    • seek (Number, optional) - The time (in seconds) from which the video should start playing.
    • volume (Number, optional) - A number (percentage value) representing the current volume of the video file.
    • playRate (Number, optional) - The speed at which the video will be played (where 1 is normal speed, .5 is half speed, 2 is double speed, etc.).
  • status (Object, required) - This property holds several sub-properties that are used to provide status updates while the video file goes through the playback process. These sub-properties should not be set as they are constantly overwritten during the playback process.
    • loadedData (Boolean, optional) - true when the current playback position of the media has finished loading; often the first frame.
    • playing (Boolean, optional) - true when playback is ready to start after having been paused or delayed due to lack of data.
    • paused (Boolean, optional) - true when playback has been paused.
    • progress (Number, optional) - A number representing the time (in seconds) where playback has occurred.
    • rateChanged (Number, optional) - A number representing the current playback rate (1 being normal speed).
    • seeking (Boolean, optional) - true when a seek operation is in progress.
    • seeked (NUmber, optional) - A number representing the time (in seconds) where the seek operation was completed.
    • waiting (Boolean, optional) - true when playback has stopped because of temporary lack of data.
    • ended (Boolean, optional) - true when playback has stopped because the end of the media was reached.
  • controlStyle (Object, optional) - An object containing CSS style properties that are applied to the control bar, all controls, error messaging, context menus, and control popups.
  • style (Object, optional) - An object containing CSS style properties that are applied to the background display of the component.
4 Likes

#2

I try to display a video rtsp stream (video camera H264)
In chrome I have the following error:

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME

The source url is:

rtsp://ONVIFClient1:MyPassWord@10.1.11.15:554/live/79dcdc5d-9be6-4e23-bd3f-6cdd696a4b59

The url is read on the same machine with no issue with VLC with the same url.

For …user:password@…
Note : It could be more convenient to have other prop in the component to enter them.

2 Likes

#3

Hello,

We have the same problem, with VLC we are able to connect with the camera through rtsp but when we put the same string connection into the video player it doesn’t works…

1 Like

#4

Scheme in this case is “rtsp://”. Sounds like a protocol limitation in the player.

0 Likes

#5

Yes, Direct RTSP streaming seem not being supported by browsers…:sob:

0 Likes

pinned #6
0 Likes

#7

Yes, you’d need to do something like what is described in the article below to get the stream into a format that can be consumed by the browser. I will open a feature request to see if we can wrap that functionality into the Video Player component, but for now, a technique like that will get you up and running.

1 Like