 Hey everybody, this is Brian. Welcome to the 131st Qt tutorial with C++ and QE programming. We have been doing a lot of multimedia lately, and we're going to kind of continue on with that. This might be the last multimedia, I'm not sure, but the adjust of multimedia is that it's very complex. There's a lot to it, a lot more than what we've really covered. Well, I wanted to point out that if you go to examples in Qt Creator, a lot of people don't really pay attention to this. If you just type in video, which I've already done, so it's already filtered, you'll see there's some examples in here, and you can actually sort by compiler. So, you know, there'll be like different ones for, well, it's not really working for mine, but if you have like Visual Studio, there'll be different ones, but you notice how most of their examples are QML. So, it's good to know that they're there. Just play around with some words like media and you'll see there's different like audio device sampling and things like that, and how to do a spectrum, so what it's called a spectrum. Somebody asked me, Brian, how do I do this? And I was like, well, if you open examples and blah, blah, blah, blah. So just be aware that that's out there. But I'm also a big fan, if you've watched any of my other tutorials, of doing things that aren't here and that you may not find out on the internet somewhere. So we're going to make a graphical video player with a little seek bar and all that. So let's just create a new project. We're going to make a Qt Widgets. And let's call this video GUI next. Now, usually we do dialogue, but we're going to do Q main window. So just make sure it's Q main window, generate form, we're going to hit next, and it'll finish. All right, so let's give this a good build. And I'm going to run this just in case you haven't seen one of these before. I don't know if the video can pick it up, but there's this little, yeah, there's this toolbar here, and you got this little status bar at the bottom. And that's what a Q main window is. You'll have a toolbar at the top, a status bar at the bottom, and you have this central widget area. So it follows a pretty similar design pattern. All right, so first things first, we need to add a few things here. We're going to say multi-media and multi-media widgets. Very important that you add those or this tutorial will not work for you. And once you've done that, give it another good build just to make sure everything links and everything's working, and you should see that. Sometimes I actually do a rebuild just in case, because sometimes Q gets a little funky. I don't know what the deal is, but you can see how it's linking here. So it's got the media widgets and the multi-media. That's how you can tell it's actually linking to those libs. Sorry. I bit my tongue the other day, and it's really just bugging the heck out of me. So if I sound like a bubbling idiot, A, I am a bubbling idiot, and B, my tongue's kind of hurting a little bit. So now we're going to jump in here, and I've got these icons, because I didn't want to waste your time drawing icons. I've got them already there. I'm just going to copy and video GUI. We're just going to paste them right in here. I'm going to add a new resource file, and we'll call it resources. And it's been a while since we worked with a resource file, so I'm going to go through this a little bit here. You need to add a prefix, and we're going to call it slash images. And then in your prefix, you can add files. Just add a whole bunch of those there. So now we've got our pause, play, stop, and the folder icon. I also want to go out here to video two. Let me pause the video. I need to find that sample video that we had. Okay, I found our little sample video here. I just wanted to use a video that I know works that we're not fighting with codec issues to this tutorial. So when you download this project from my website, you'll have the icons in the sample and everything be ready to go. All right, so we've got our resource file in here. Let's close that. Save all. And you should know, someone correct me if I'm wrong, but these images need to be in a sub folder of your project. Otherwise, it won't be able to find it when you build it. Of course, give it a good build, make sure it finds everything. Bring up your main window. Now, we may not have done this in a while, so I'll also go over this. This is your window designer, because I know we've been doing a lot of command line stuff lately. And your toolbars here and your progress bars here. Now, remember, Qt uses a concept called actions, so you can make a new action. And we'll call it open. Notice how it says object name, action open. And open a file. And the icon, this is where you can say choose a file or choose a resource. We're going to choose a resource. And ta-da, there's our icons. So, once we have an action, we can just drag and literally drop it right up onto the toolbar. You can also say go to slot, and then choose triggered. And there's a source code. So, when they click that button, this little function right here will get called. And I'm just going to flesh those out for the rest of the window here. We'll see. Play. Gosh, I really bit my tongue. Man, that's really sucking. And it's really stupid how I did it, because I was playing Skyrim. I got hooked on Skyrim. Don't ask me why Skyrim's like an old game, but it was on Steam. It was $15 for the legendary edition, so I got like everything. And, man, I took this shot with my arrow, because I was an archer, and I know like I sound like a total nerd right now, but I took a shot with an arrow and I missed. And I went to say son of a, you know, you can expletive finish the rest of that sentence for me, but I bit my tongue when I did it. So, it didn't really sound all that great when I did it. Actually, we're going to right-click and you can add a separator in here. So, I don't know if it'll shut in the video, but there's this little bar that separates them. I'm going to add play, pause, and stop. All right. And you can also, actually let me, you can type up here and make a menu. And then in the menu, you can drag and drop, whoops, into the menu. So, we'll say video. And if that's not abundantly clear, you type up here to make the menu item. This little sub-menu appears and then you can drag and drop the actions you want up in there. Yep, you can do multiple. Let's do video. It only did the one. And you can kind of, you know, move them around that little sub-menu wherever you want them, that little red bar. So, we have play, pause, stop. And then make sure we've got our associated slots. So, yeah, Skyrim. Really cool. I've been playing Dota a lot, but Skyrim just, I don't know why, just totally got my attention here. So, let's give this a good build. And let's run it and make sure our icons, our beautiful little icons, appear. And sure enough, they do. So, the premise of this is we're going to have these buttons. We'll click this, an open file dialog, play, pause, stop. The video will show here. And then down in this little bar, we'll have a progress bar and a track bar where we can, you know, or actually we'll put the track bar over here and then we'll have the progress bar here so we can seek through the file and see the progress. Man, that was mouthful. Let's speed this up a little bit here. I don't want this to be a 30-minute video. I get complaints from some people. They're like, your videos are too darn long. Other people say they're not long enough. So, whoops. Include. See, I say we got to speed things up and then I start talking. Media player. Ah. Damn you, physics. Cue media player. We're just going to include a few things here. My keyboard's acting all funky on me. Cue video widget. Now, a Cue video widget, remember from our last tutorial, it's what the video is rendered on. If you think of a video like a painting, the canvas would be the video widget. And then we're going to do a Cue file dialog. And let's just do a Cue progress bar. Yeah, let's do this. And include Cue slider. All right. Down here, we're going to say Cue media player. And we're just going to make these super quick. Cue video widget. Call this video widget. Cue progress bar. We'll call this bar. And Cue slider. We'll call that the very descriptive slider. All right, so we've got the bulk of our program fleshed out here. We're going to actually go in here. And now we're going to say we're going to make a new player. Ah, keyboard. Damn you, new Cue media player. And someone once asked me, why do you make pointers when you're in a form? You can just make it a local variable. You don't have to make a pointer. I don't know what to work with in my opinion. A little bit more dangerous if you don't follow some memory rules. But I just, I don't know, personal taste I like working with pointers. Because what happens is when you go to connect signals and slots, I always forget if it's not a pointer. I forget to put the reference to. And then it gets all screwed up. All right, so this.CentralWidget. Remember the central widget is that central image. We're going to do the video widget. And actually it's back up here. And we're going to say player.setVideoOutput. We're going to set our canvas here. So what we're doing is we're saying, all right, we want to render the video to the video widget. And we want that video widget to be the central widget. So the video is going to appear right here in the center. Cue will take care of all that for us automatically. Now let's just work this out a little bit here. We're going to do our open file, open file dialogue. Cue string, file name. We're going to get open file name. And this always, I don't know why. I always have to look at my notes because this always kind of messes me up the way this is laid out. Open a file. This is the title, obviously. And then we need to specify video files. And then like a real world application, you'd really want to make that a little more professional by searching and seeing what available codecs you have and things that are just vastly beyond the scope of this tutorial. I should note, if you're looking for industrial strength video playing capabilities, there's an open source video player called VLC. And I can't multitask here for some reason. My tongue is really bugging me. Anyway, if you Google Qt, the letter Q and T, Qt VLC, somebody's actually taking VLC and wrapped it inside of Qt and made it actually really, really easy to work with. The reason why I'm not doing a tutorial on that, which I actually might, is because it doesn't really follow pure Qt. And I've been kind of bashed in the past where people are like, well, you shouldn't use third-party libraries. I tend to just ignore them and blow that off from local file. Got kind of sidetracked here. That and it is actually a pretty complex topic. And I'm already getting a flood of mail from this. So what we're really doing here, and let's kind of explain this, is we're going to pop open this dialog box. We're going to call stop to make sure it's stopped. We're going to set the media. And we're just doing the local file, which we chose in the file dialog, and then we're going to play it. Now I have to preface that with an industrial strength program. You're going to want to make sure that the video is valid, that it's playable, et cetera, et cetera, et cetera. This is a very dumb-down example. We just kind of want to, you know, elementary level, high school level kind of player here. We're going to show a message here. Maybe if I can spell. And then through the magic of copy and paste, we can just kind of, you know, do some quick coding here. We're going to pause. We're going to whoopsie. I don't know what button I hit, but that was kind of awkward. Now the difference between pause and stop. Stop will stop playing and actually close the file, or you should say it goes all the way back to the end, where pause will just keep the file open and stay exactly where you are. All right, so let's actually give this a good run and see if our beautiful little file player works here. Yeah, now you can see this black box here. That's the video widget. We're going to open. Oh gosh, good luck finding anything in my mess of a hard drive here. I really need to set up another virtual machine. Hmm, why is the sample not in there that's going to bother me? Let me go look. MPG. Start on MPG should actually grab it. Let me pause the video once again. Hmm, that is just weird. Anyways, on Windows you can actually have the filter, but on my Linux box I had to actually change this to star.star. You can actually set the filter, but it's just getting the filter out of here. So change that to star.star and then it was actually doing it. Let's actually close that and run this just so I can show you that it's actually working. And we're going to go to video GUI samples. So it is playing and you'll see this, or maybe not depending on what platform. That's debug information from the QMedia player. Now if we pause, you notice how the video pauses. We can play it again. We can pause it, play it, pause it. We can stop. That's how it says stopped. Play. That's how it jumps all the way back to the beginning. That's the difference between pause and stop here. So now our goal is we want to put a little track bar down here so we can seek through the video and a little progress bar so we can see how far into the video we really are. Bear with me. This may take me a minute because it's not actually in the original plan for this. I'm kind of like free-styling it right now. So this may be very good or very bad, I'm not sure. Slider equal new, Q slider. We're going to see how much I remember about these objects here. And bar equal new, Q progress bar. Alright now if I remember right, we got to say slider. Oops, set orientation. Otherwise it's going to be a vertical and we want a horizontal. Now we're going to say ui status bar. And we're going to add a permanent widget. And let's add the slider first. And via magic of copy and paste. Somebody told me what the command was to copy the entire line. I just don't remember what it is. Alright let's run this and make sure that's actually going to work. Yep, so there is our slider and there's our progress bar. Which don't work because we haven't wired up the signals and slots which is what we're going to do right now. Alright so let's actually connect up and we're going to say player. What do you guys think of the new connect signals and slots? I kind of like it, it took me a while to really get used to it but now that I've actually gotten used to it instead of typing signal and slot and having all these other mock garbage in there it's actually gotten quite used to it and it's much more elegant in my opinion but just curious what you guys kind of think. So what we're going to do is we're going to connect the duration change of the video to the progress bar maximum and I should warn you right now if you choose a large video this will explode your computer or actually not at your computer but the program because these take integers and a file takes a queue into 64 or 64 bit integer which is much, much larger. So if you're going to do a large file this may actually not work for you so in a professional strength program which unfortunately we don't really have time to do you're going to want to actually you know calculate the value out and then do a percentage etc etc and whoops I kind of did that backwards didn't I? It's okay. So we're going to connect the signals and slots for the slider in the progress bar there's one more we want to do for the slider here we want to say slider and let's grab this that's not queue progress bar it's queue slider that would have been ugly it would have been really ugly so grab that put that there I love copy and paste it's like the best invention ever alright so when the what is it the position that's not position darn it I thought I was going to be all slick and I was going to look through here and just magically know what it was I'll say slider moved ah slider moved that's what it is when the sliders moved and notice how it's an int then we want to set position and notice how that's a queue int 64 that's the difference that's what I'm talking about there is the 64 bit is going to be much larger than it is some compilers will do that for you magically on the fly but it's very rare and I wouldn't depend on it so just know that if you use a large video something that goes bigger than int then you're going to have problems so what you would do is you would you would make your signals and slots and then in the signals and slots you would actually calculate like a percentage of where you are in the file translate it basically from int to int 64 etc etc alright I'm sure there's a more elegant way of doing that but that's how I would handle it let's test this out oh come on anybody I know what the problem is alright so when we run this this should automatically work let's give this a try here and you can see how it's showing our progress and the track bar is moving with it and we can grab this track bar back and forth through here and if it had sound it would actually play the sound etc etc and we can pause this and while it's paused we can seek through it and it stays paused you know pretty neat huh so that is the basis of how to make a video player and I should note that these menu items work too like you can actually go here and play and it'll because it's calling the same action under the hood whew sorry for all the babbling pause is like I said my tongue is just wrecked I don't know why I bet it's so hard but Skyrim man that dude that I shot in the face of the arrow he really had it coming he was kinda making me mad alright so that's it for this tutorial hope you found this educational and entertaining thank you for watching and if you want the source code for this and other tutorials visit my website voidrealms.com you go to tutorials and then you choose cute and it'll be in here and last but certainly not least if you're still watching you're probably interested on Facebook we have a void realms all one word void realms group just asked to join that group there's like a hundred and last I counted I thought there was like a hundred and twenty of us in there we all talk about all different languages not just cute so that's it