Modify the video page and add a MediaElement. Change the code to get the video information passed to the video page by the navigation system.
- [Narrator] I need to adjust the video page so that it plays the video that's selected from the catalog page. I'll start by modifying the UI in the video page. I already have some elements here. I have a button and a font icon. So I have a button that's 30 pixels by 30 pixels. It's centered in the middle of the page, and I've set the opacity to 60%, that way the user will be able to see the thumbnail image through the button. The font icon is where I set the play icon for the button.
The idea is the user can click on this big play button in the center of the screen to start watching the video. I need a media element. I'll put that at the top of the page. This property, are transport controls enabled, automatically shows the play button, the pause button, and some of the other transport controls. I'll set that to true. I don't want it to automatically start playing when the user navigates to the page, so I'll set the auto play to false, and I'll use a binding to show the thumbnail.
So what I want the user to see is a thumbnail that represents the video when they first see the media element. To do that, I can use a property called poster source. Now this is ready. The next step is to go to the catalog page and write an event handler for when the user clicks on one of the items in the grid view. I'll put that code here in the grid view element, press tab here to add a new event handler, and then I'll press F7 to go look at the code behind.
This will get me the clicked item, the item that was clicked in the grid view, and there will an instance of the workshop class in there. So I'll cast this to a workshop. I'll get an error here, and that's because I need to resolve this. Should be Workshop with a capital W, and I need to add a using statement. Now I'll navigate to the video page, and I'll pass in the instance of the workshop.
That way I'll have all the workshop details on the video page. Now I'll go over to the video page, and I'll need a private variable to hold the instance of the workshop. I'll put that down at the bottom. Inside the constructor, I'll set up an event handler for when the media is opened. Press the tab twice to stub in the code for this, and when the media is loaded and opened and ready to play then it will run this code and this event handler.
And here I'll say media element play. You want to do this, especially if you're downloading the video from the cloud. You don't want to try playing until the media element has all the bytes ready to start playing the video. We need to resolve this, the using statement. Now the next step is when the user navigates to this page from the catalog page, I need to set up a data binding.
So I'll override a method on the page. I'll override on navigated to. This method will fire when the user navigates to this page. And what we're doing here is we're getting the parameter that we pass in. Let's review what we did over here on the catalog page. I passed in an instance of the workshop here. So on the video page, I'll get that parameter and cast it to a workshop and then I'll start in this private variable.
Then I'll set the data context equal to the workshop. Now all my elements on the page can use data binding to retrieve the information from the workshop class. Next I need an event handler. So, I'll go back to my button. I'm going to go back to my code behind, press F7. First step inside the click handler is to set the visibility of the overlay button to collapse. I don't want to see it anymore. I'll have the transport controls on the media element so that the user will be able to control them.
So I don't want or need to see this button. And then next part is to get the actual video file, and I remember the video files are over here in the assets folder. So, I'm looking for a file like this, artist.mp4, and I have a path to that inside my model class. Look at the models. Let's see if for instance, here's a video path. Set asset videos clay.mp4. So, I have that path but I need to write some code to actually get the file in this click handler.
I'll declare a variable named storage file. I'm going to have to resolve this, with this using statement. And this bit of code is getting a file from the application using a URI and it's going to do it asynchronously. That's why I'm using this await keyword. It also means I need to make this method a sync, and then I'll need a URI here.
Let's make this a little bit wider, so you can see what's happening. So, I'm creating an instance of the URI class, and I need to basically concatenate my video path. Remember that's this video path here, assets, videos, clay.mp4. I need to concatenate that with the base URI that's coming from this application, and I don't know what that is. So I go and ask for it, base URI, and this builds it, basically combines these two items into a single URI.
Then I need a stream. That gets me my stream, and then the last step is to set the media element source. You might be tempted, there is a source property, and you'll have trouble if you try to set the source property directly. Instead you want to use set source, and that takes two arguments. It takes the stream and it takes what's called a content type.
Now, the content type is, based on this case, it's an mp4 file, and what I can use is a mime type. You can see that here in the IntelliSense. I can use a property on the storage file to retrieve that. And with that, I'm ready to test it on the Xbox.
- Setting up the development environment
- Installing Visual Studio
- Creating a Dev Center account
- Installing and activating Developer Mode on Xbox One
- Pairing Visual Studio with the Xbox
- Mirroring Xbox One content to a PC
- Exploring a UWP app on a PC, mobile device, and Xbox One
- Creating a basic UWP app