Hello, and welcome. In this video, we'll be looking at how to display and work with a video in your app. So, let's start with a new project, Empty Activity. I'll call this Video Demo. All this is okay, finish. And while this loads up, for video, you're going to need to get a video file to work with. And the one I'll be working with is a test video, which is an MP4 file type and it's attached to the resources of this video. So, you can download it from there or you can also get an MP4 file for yourself. All right. So, here's our app. First, I'm going to set up my view bindings, so I'll go to Gradle Script and then build.gradle file and write here buildFeatures, viewBinding true. And let's sync this. All right, it's synced. So, that's done. And over here I'm going to bring in private lateinit var_binding and it's going to be of type ActivityMainBinding. And down here binding  = ActivityMainBinding.inflate (layoutInflater) and then setContentView binding.root, okay?

So, we're all ready to go with the app. Now let's bring in a video file. So, over here under app resources, so res folder. So, within this res folder, we're going to create a folder called raw. So, right here, if you have it highlighted, right click and then a new and select directory, okay? And we're going to say raw. And now we have this directory. Now we just have to bring the video file in here. So, again you can either copy paste or you can drag it in here. I'm going to right click and paste. And my file is called tes_video_for_videoview, Refactor and there is the file. Great. Now that we have the video, let's go ahead and bring in a video view into our layout. So, I'm going to go to my layout. I'll close this tab for now. I'll get rid of the TextView, okay? And you can search for a videoview if you don't see it. So, I'll go over here and video and there we go, videoview. I'll drag this to the screen. All right, and then constrain it as you like. 

I'll bring this to the top, okay? So, there left, on top, the right and the bottom. All right. So, let's now bring in the video to play over here. We'll go to our main activity, and in our onCreate method, after we setContentView. So, what we have to do is simply set the video URL or the path to the video and then start playing it. And since we have our view binding set up, we can simply say binding.videoView. There we go. And this videoView, the ID is of my videoView right here. If you look at the ID, there's the ID. You can change it if you like, but I'm simply going to leave it as videoView and then start it that way. But I don't want to keep typing binding.videoView because I'm going to refer to it a few times. 

So, what I'll say instead is just say val video, I'll use variable for this and set it to binding.videoView. Now I can simply reference this videoView by referencing video. Now let's set video to have the path to my video file. So, I'll say video. The method to do that is setVideoURI. There we go, it pops up and then URI. You see once I start typing it, Uri.parse, then I have to provide the path. And this first path, I'm going to put within double quotes. Basically, the entire thing is going to be a string for the path. And since I want it to look in my Android resources area, the way you do that is say android, that's how you start it .resource://. And you see how it resembles an Internet address. So, if you were to play a video from a raw Internet address, a video file, you would enter in the HTTP address over here, okay? So, after this what we want is our own app name. And the way we do that is by using package name. 

I'll concatenate this in. So, + packageName right there. That will give me my app's name. And then I'll concatenate in \, and then the last bit is we will concatenate the video file name which is stored in R.raw. You see there's my test video for videoView. All right. And that is how you create a path to access resources that are stored in the file structure of your app over here. All right. And next it's pretty simple. We just say video.start. Two lines of code and we should have a video up and running. Let's try it out. All right. Looks like everything worked. I'll pull up my emulator and there it is. Our test video is showing up and working. However, there are no controls on this video. As you see, I cannot pause or forward or rewind. I can click around but nothing happens. So, to have those functions, we're going to need to use a media controller. Let's go ahead and define a variable for this type. 

Over here, we're going to say var mediaControls =. This is going to be a class, so MediaController and there we go, android widget. I'll hit 'Enter'. And MediaController needs a context which will be this, which is what we've been doing so far. So, now we have a MediaController that we can use using this name, a mediaControls. So, before we start our video, what we have to do is link it up to this MediaController. So, before this we're going to say video.setMediaController. You see it pops up, the method. There we go. So, video.setMediaController and we'll have to give it the name of our media controller which is mediaControls. So, mediaControls. All right, and that should be it. So, let's try it out now. We'll apply and rerun, pull up the emulator. All right. There's my video. If I click on it, you see my controls pop up at the bottom, so I can pause it. And you can see that I can rewind if I want. I can forward if I want, I can replay it if I want. There we go. All working, great. 

I want to pause it, and that's how you add video to your app. But one thing is for video, you'd most likely want to view them in landscape mode, not just portrait mode for a wider screen view. And if I change this to landscape mode, if you see that your video is pinned in portrait mode, it's probably because auto rotate is turned off by default in your emulator, which is the case in mine because I never changed that setting once I set up my emulator. So, I'm going to move this back. You see on top here, drag down the notifications and you see that option right there. That's the auto rotate. You see it's turned off by default, so I'm going to tap on this or click on this to turn it on. Now, if I rotate this, check it out. 

The video starts showing up in landscape mode. But you see the settings aren't that good. The video isn't showing up the way we want in landscape mode, and it's because for portrait, we are using the layout_width of match_parent, right? Right here, match_parent and that's spanning the entire width of the screen. And if you apply that to landscape mode, that means the entire width of the screen which is basically stretching this video out too much. Now you do have an option to apply a different layout, a different layout file. We have activity main, this is a portrait mode. We can apply a different layout file for landscape mode. Let's first see what happens if we switch this existing layout file that we have to wrap_content. 

All right, and apply and rerun. All right. There we go. The width is adjusted now, you see that it's no longer stretched. All right, and if I move this back, there we go. The video is displaying like we want. So, that's one way of doing this which is you can use wrap_content for both the portrait and landscape mode. The other thing, if you wanted to do something different with landscape mode, you could add a different layout file. And so while that's not necessary for this video, since we were able to solve this problem without doing that, in the next video, we're going to explore how we can add a separate layout file for landscape and then alter it as we want. So, we're going to leave it at that in this video. I hope you enjoyed building this feature, and I'll see you in the next video.