Video Player Component

Ignition Early Access
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

image
image1060Ă—691 109 KB

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.
6 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.

image
image1918Ă—530 44.2 KB

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.

5

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

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
8

How is this coming along?

I have tried the option, but I don’t know where to put the “embed” codes in to get it to work.

9

FWIW, you can use Ignition v7.9 to do the transcoding for your RTSP live-stream via my latest module:

As noted in the post, support for v8 is planned. Haven't had any demand for that yet, so it is currently at the bottom of the pile.

10

Ty for the info.

Currently I get nothing to work with the video player component in perspective.
Running on 8.0.7 nightly.

Can’t get any streams or avi files to play, only get “File not Valid” on the component

11

Hi @lasse, make sure to preview in a browser after you’ve built your view in the designer. We use an instance of JxBrowser to display your views in the designer, and it has limited codec support.

12

I have tried on the view aswell, but I cant get it to work. Don’t know what im doing wrong.

I am using the links in this page (avi) samples in the source of the video player component, but it still gives me “File not Valid”.

https://file-examples.com/index.php/sample-video-files/sample-avi-files-download/

13

It’s a codec issue. Those AVI files don’t work for me either. Because the Video Player uses an HTML5 video element, you’ll get the best browser support if you’re able to encode your video with H.264 (MPEG-4) or OGG. As an example, you can point to the video player to the various different formats of this sample file and see how the formats differ.

15

I have a HikVision IP-Camera that allows RTSP streaming and MJPEG and H264,H265 streams.

I get everything up and running on VLC media player on my desktop.

On Vision I get the MJPEG stream to work with the IP Camera component.
On Perspective video player I dont get any of those different formats to work.

I tried the sample file in ur post, and got it working with the .mp4 file.

HikVision cameras uses a url like this:
http://user:password@ip.ip.ip.ip/Streaming/channels/102/httppreview

Why is it working in Vision with the MJPEG but not on the Video Player on Perspective?
Is the main purpose of the Video Player component in Perspective to rely soly on a pre-recorded video?
Will there be a similar component in perspective that we have in Vision (IP Camera) ?

To me more precise in the question: What kinda direct video streams do this component support? What kinda url format does it need to be for it to not get the “File not Valid” error?

Is there an example stream that we can try?

16

Being web based, you’re limited to the codecs and streaming protocols that are supported in a web browser. I imagine you’re pretty close to having a working solution if you can access a camera feed over HTTP from a URL with the pattern you posted above. You’ll basically need to copy the video source from that “httppreview” page. It’ll likely be fed to an img or video tag. That will be the URL that you feed to the Video Player Component (making sure you have the liveFeed property set to true).

To get a quick test working for yourself, you can look at the feeds on a site like insecam.org (publicly-accessible IP camera feeds) and copy the URL that is being fed to the img tags.

17

Testing the video player component, we still see the File not valid.
Like mentioned, used the URL in the img tags from the publicly-accessible IP Camera feeds.
What could be the issue ?

18

Yeah im also getting File not valid. Have tried 4 different urls, no luck yet.

I tried opening the view in firefox, and then all out of sudden I saw the stream working for 5sec.
But now its back to file not valid again.

So far I’ve only had luck with pre-recorded videos, doesn’t seem I cant any live feed working with this component yet.

Im gonna try make a media server, and so some converting there and see if I get things working.
The only sad thing is, that my mjpeg stream works fine in Chrome and Firefox, but when I paste the url into the video component I only get “File not Valid”.

I really had no idea that bringing a live camera stream into html5 was so hard, I tought it would be easy since we are in 2019, soon 2020 :smile:

19

I would check your browser console for any errors. That could help point you in the right direction. I will also open a ticket to work specifically with an mjpeg stream and devote some time to testing that out.

20

Is it possible to provide an publicly-accessed url to test the Video Player component ?
IP Camera works as expected in Vision with the IP Camera Viewercomponent; the same url says File Not Valid in Video Player perspective component. Not sure what would be wrong.

21

@bharghavi.balagopal, check out that link. Lots of good publically-accessible camera feeds there.