Create A Background Audio And Video In UWP

In this blog, you will learn how to create a background audio and video in UWP.

Introduction

In this blog, you will learn how to develop the background audio and video, using Universal Windows Platform Application.

Requirements

• Visual Studio 2015 Update 3

Step 1

Open Visual Studio 2015, you can go to the file, new and Project. Afterwards, open the new project. Follow the shortcut keys Ctrl+Shift+N.



Step 2

Now ,we can go to Visual C#(sharp), select the Universal platform and afterwards, you can choose the Blank app (Universal windows). Thus, we can write the Application name and click "OK" button.



Step 3

Here, we can select the Target version minimum and maximum version. You can click "OK" button.



Step 4 

Now, we can go to Mainpage.XAML and open the design page.



Step 5

Here, we can go to View, select the toolbox, open the tool box and afterwards, you can click MediaElement button.







Step 6

Now, we can go to assets, choose Add. Afterwards, select the existing item and open file Windows. Choose the Audio/Video files, click the" Add" button and afterwards, add the the files in our project.





Step 7

Now, go to the XAML page, write the code and go to property. Choose the media and afterwards, you can choose the source and select the file.

XAML code

<Page x:Class="videoandaudio.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:videoandaudio" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <MediaElement x:Name="mediaElement1" Source="Assets/samvideo.mp4" HorizontalAlignment="Left" Height="235" Margin="112,10,0,0" VerticalAlignment="Top" Width="369" />
        <MediaElement x:Name="mediaElement2" HorizontalAlignment="Left" Height="100" Margin="283,245,0,0" VerticalAlignment="Top" Width="100" RenderTransformOrigin="-5.093,0.3" Source="Assets/songs.mp3" /> </Grid>
</Page>

Step 8

Here, we can choose "run the machine". It should be like the local machine, remote machine and so on.



Step 9 

Now, we can see the output.