[00:00] In this lesson, we'll take a look at the Perspective video player component. The component was designed to either play video files or stream a live feed. You can see I have a web browser in front of me with a running session. And inside of that session, there is a video player component. If I play the video here, we can see it in action. It has a lot of the sort of common features and functionality you'd come to expect in a web-based video player. I can pause the video here, I can seek forward to certain timestamps or points in the video. There are some volume control, there's some playback speed controls, there's even a right click menu here with a couple of additional options. Now let's switch over to the designer and take a look at how this component is configured. So I have that same view you just saw the session and I'm going to go and I have my video player component here. If we take a look at the property editor. The source property is arguably the most important property. Source expects a path leading to a video that the component can play. If you needed to configure this component to show a live feed, say you have some camera system and you just want to show the output from the cameras on this component, all you need to do is toggle the liveFeed, and then set the source to the URL of the feed. I'm not using a live feed right now. So I'll set that back to false. And looking at some of the other properties here that are available when you're not using a live feed, we'll play with poster in a moment, but it basically allows you to show an image on the component before the video starts playing. The autohideControls property here, will hide the controls on the component. If I were to enter preview mode here, and I hover my mouse cursor on top of the video player component, you'll notice that the control panel then pops up. So this is ideal in cases where you don't necessarily want the controls to always be visible. Say you're playing the video on a dashboard somewhere or in some kiosk. Under the controls object here, we have a bunch of properties that allow you to control and manipulate the component. So if you wanted to play the video or change the playback rate, you could do that from these controls here, instead of having the user directly interact with the component. The status object here has a bunch of properties that report the current state of the component. So whether or not a video is playing, if data has been loaded into the component, the video is over and a couple of other items. And then we have two style objects, one specifically for the control bar at the bottom and then one for the rest of the component. Now, you've probably noticed, I have an error message here, telling me that the files is not valid. But a moment ago, if I were to switch back to my browser, you notice the video is playing just fine here. What you're seeing here is a video encoding issue that a fair number of you may run into. In short, the browser we're using here in the designer to render your components, has support for some video codecs, but not all. Specifically, the video I'm using in the player here, used H.264 encoding, which isn't currently included, which is why I'm seeing the error in the designer, but I don't see it in the session in my web browser, because the web browser happens to have support for that type of encoding. So it's always a good idea to just test out the component in a browser. If you wanted to see more information, take a look at the video player page in the user manual in the appendix. Now looking back up at the source property here, this could actually be a fully qualified URL that leads to some video that's hosted on some other platform. What I'm actually doing here is I'm actually using web dev to provide a path that the video player here can use. So if you have the MP4 or if you have the video file that you wanted to show and you didn't want to host it on a third party platform of some sort, you could have your gateway host the video. I'm not going to spend too much time talking about web dev, we do have some content in the user manual if you're curious, but I didn't want to show you how I set this up. So I'm going to switch over to the Web Dev workspace in the project browser. And I'm going to right click on Web Dev, I'm going to create a new file resource, which just allows me to pass in a file, and then the gateway will make that file available. I'm going to browse and I actually have this TestVideo, I wanted to make available. So I'll click Open. And I'll use the suggested name here. We'll just click on Create Resource. And now my TestVideo sets as a resource. You can see that my XY Chart video that I showed you earlier is already here. And here's a little logo SVG. This is something I'm going to use for the poster property that we talked about a moment ago. Now all I need to get this up and running because my project that I'm using the video player on is the same gateway that this web dev resource, this TestVideo lives on. I'm going to right click on TestVideo, and I'm going to copy the mounted path, which will give me a partial path that just leads to this particular file. Now we can head back to the Perspective workspace and I'll switch over to my view, I already have it open. And I'm going to actually, I'm just going to duplicate this component here, I'm going to hold Control, left click and drag. And I'm going to replace the source property here. And actually, I'll just right click and paste, which is going to set the source to that TestVideo, I just created a file resource for. And off camera here, I do have a path that leads to that SVG I talked about a moment ago. I'm just going to paste that into the poster property. And you can see because it's an SVG, it's already working. Now I use the same encoding on both videos, which is why you're seeing the file not valid error here. But let's test it out. So let's save our project. And I'll switch back to my browser here. You can see I now have two video player components to see the posters up and running. And just so you don't have to hear the jingle a second time, I'm going to reduce the volume. We'll play it and you can see it's up and running. And that's it. That's all you really need to know to get started with the video player component. But like I said earlier, there's more information in the user manual. If you're curious, take a look at the video player component for the Perspective module in the appendix.