Simple media player app in a Windows 8 Apps.

By -


Simple media player app in a Windows 8 Apps.
In this article we create a simple media player app in a Windows 8 Apps. Windows 8 Apps have a good control for playing videos in applications. You can play videos in aWindows 8 Apps using C# or any other supported language. In this section we see a video app in a Windows 8 Apps using C#. We integrated a media control in an application and use several method to make it a more attractive media player.

To embed a video in your application we use the MediaElement class. We use a media element control of XAML. We also create customized controls to give more functionality like play, pause, volume, enable full-screen mode video. We can set the source of media file either at design time or you can use a FileOpenPicker object to enable the user to choose a file from the local file system.

In this article we are creating a small media app in a Windows 8 Apps using C# with rich user functionality.




Steps for making a video player app

Step 1: Create a media player which is the child of a content control:
    <ContentControl x:Name="videoContainer"
                            KeyUp="VideoContainer_KeyUp"HorizontalContentAlignment="Center"
                            VerticalContentAlignment="Center" Height="700" Width="900" VerticalAlignment="Top" >
            <MediaElement Name="videoMediaElement" PosterSource="videoimage.png" AutoPlay="False" />              
    </ContentControl>

Step 2: Then, we create a panel that contains all the UI controls that interact with the media player such as stop, pause, play; the code is:
    <StackPanel Name="TransportControlsPanel"
                    HorizontalAlignment="Center" Margin="238,599,238,0" Width="900" Height="173"VerticalAlignment="Top" >
            <StackPanel.Background>
                <LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                    <GradientStop Color="#FFA86E6E" Offset="1"/>
                </LinearGradientBrush>
            </StackPanel.Background>
            <StackPanel Height="80">
            <Button x:Name="pick" Click="pick_Click_1"HorizontalAlignment="Center" Style="{StaticResourceUploadAppBarButtonStyle}"></Button>
                <ProgressBar x:Name="vol" Height="15" Width="112" Margin="0,-50,63,0" Value="30" Background="White" FlowDirection="LeftToRight"HorizontalAlignment="Right"/>
            </StackPanel>

            <StackPanel Orientation="Horizontal" Height="83" Margin="0,0,-15,0">
                <Button x:Name="btnPlay" Click="btnPlay_Click" Style="{StaticResourcePlayAppBarButtonStyle}" />
                <Button x:Name="btnPause" Click="btnPause_Click" Style="{StaticResourcePauseAppBarButtonStyle}"/>
                <Button x:Name="btnStop" Click="btnStop_Click" Style="{StaticResourceAppBarButtonStyle}"
                                    AutomationProperties.Name="Stop" Content="[]"/>
                <Button x:Name="btnReverse" Click="btnReverse_Click" Style="{StaticResourceSkipBackAppBarButtonStyle}"/>
                <Button x:Name="btnForward" Click="btnForward_Click" Style="{StaticResourceSkipAheadAppBarButtonStyle}"/>
                <Button x:Name="btnMute" Click="btnMute_Click" Style="{StaticResourceAppBarButtonStyle}"
                    AutomationProperties.Name="Mute" Content="X"/>
                <Button x:Name="btnFullScreenToggle" Click="btnFullScreenToggle_Click"
                                    Style="{StaticResourceAppBarButtonStyle}"AutomationProperties.Name="Full Screen" Content="[-]" />
                <Button x:Name="btnVolumeUp" Click="btnVolumeUp_Click"
                                    Style="{StaticResourceAppBarButtonStyle}" AutomationProperties.Name="Volume" Content="+"/>               
                <Button x:Name="btnVolumeDown" Click="btnVolumeDown_Click" Style="{StaticResourceAppBarButtonStyle}"
                        AutomationProperties.Name="Volume" Content="--" />
            </StackPanel>
    </StackPanel>

In the above code we use a fileopenpicker to pick a file from the local system and play it in the media player with many control buttons.


Here is the full code of the MainPage.xaml file.
<Page
    x:Class="App4.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.TopAppBar>
        <AppBar Background="#E51585E2">
            <StackPanel>
                <Button x:Name="inn"HorizontalAlignment="Right" Click="btnFullScreenToggle_Click"AutomationProperties.Name="Full Screen"
                       Style="{StaticResourceOutAppBarButtonStyle}"></Button>
                <Button x:Name="exit"HorizontalAlignment="Right" Visibility="Collapsed" Click="btnFullScreenToggle_Click"
                      AutomationProperties.Name="Exit Full Screen" Style="{StaticResourceOutAppBarButtonStyle}"></Button>
            </StackPanel>
        </AppBar>
    </Page.TopAppBar>
    <Grid Background="#FFD32121" Margin="0,0,-10,-58">
        <ContentControl x:Name="videoContainer"
                            KeyUp="VideoContainer_KeyUp"
                            HorizontalContentAlignment="Center"
                            VerticalContentAlignment="Center" Height="700" Width="900" VerticalAlignment="Top" >
            <MediaElement Name="videoMediaElement" PosterSource="videoimage.png" AutoPlay="False" />
        </ContentControl>
        <!-- Transport Controls -->
        <StackPanel Name="TransportControlsPanel"
                    HorizontalAlignment="Center" Margin="238,599,238,0" Width="900" Height="173"VerticalAlignment="Top" >
            <StackPanel.Background>
                <LinearGradientBrushEndPoint="0.5,1"StartPoint="0.5,0">
                    <GradientStop Color="Black"/>
                    <GradientStop Color="#FFA86E6E" Offset="1"/>
                </LinearGradientBrush>
            </StackPanel.Background>
            <StackPanel Height="80">
                <Button x:Name="pick" Click="pick_Click_1"HorizontalAlignment="Center" Style="{StaticResourceUploadAppBarButtonStyle}"></Button>
                <ProgressBar x:Name="vol" Height="15" Width="112" Margin="0,-50,63,0" Value="30" Background="White"
                        FlowDirection="LeftToRight"HorizontalAlignment="Right"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Height="83" Margin="0,0,-15,0">
                <Button x:Name="btnPlay" Click="btnPlay_Click" Style="{StaticResourcePlayAppBarButtonStyle}" />
                <Button x:Name="btnPause" Click="btnPause_Click" Style="{StaticResourcePauseAppBarButtonStyle}"/>
                <Button x:Name="btnStop" Click="btnStop_Click" Style="{StaticResourceAppBarButtonStyle}"
                                    AutomationProperties.Name="Stop" Content="[]"/>
                <Button x:Name="btnReverse" Click="btnReverse_Click" Style="{StaticResourceSkipBackAppBarButtonStyle}"/>
                <Button x:Name="btnForward" Click="btnForward_Click" Style="{StaticResourceSkipAheadAppBarButtonStyle}"/>
                <Button x:Name="btnMute" Click="btnMute_Click" Style="{StaticResourceAppBarButtonStyle}"
                    AutomationProperties.Name="Mute" Content="X"/>
                <Button x:Name="btnFullScreenToggle" Click="btnFullScreenToggle_Click"
                                    Style="{StaticResourceAppBarButtonStyle}"AutomationProperties.Name="Full Screen" Content="[-]" />
                <Button x:Name="btnVolumeUp" Click="btnVolumeUp_Click"
                                    Style="{StaticResourceAppBarButtonStyle}" AutomationProperties.Name="Volume" Content="+"/>
                <Button x:Name="btnVolumeDown" Click="btnVolumeDown_Click" Style="{StaticResourceAppBarButtonStyle}"
                        AutomationProperties.Name="Volume" Content="--" />
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>

Step 3: Here is the code behind for the control buttons:
 
privatevoidbtnFullScreenToggle_Click(object sender, RoutedEventArgs e)
{
     FullscreenToggle();
}

privatevoidVideoContainer_KeyUp(object sender, KeyRoutedEventArgs e)
{
            if (flag == 1 &&e.Key == Windows.System.VirtualKey.Escape)
            {
                FullscreenToggle();
            }
            e.Handled = true;
}

privatevoidbtnPlay_Click(object sender, RoutedEventArgs e)
{
            if (videoMediaElement.DefaultPlaybackRate != 1)
            {
                videoMediaElement.DefaultPlaybackRate = 1.0;
            }

            videoMediaElement.Play();
}

privatevoidbtnPause_Click(object sender, RoutedEventArgs e)
{
            videoMediaElement.Pause();
}

privatevoidbtnStop_Click(object sender, RoutedEventArgs e)
{
            videoMediaElement.Stop();
}
privatevoidbtnForward_Click(object sender, RoutedEventArgs e)
{
            videoMediaElement.DefaultPlaybackRate = 2.0;
            videoMediaElement.Play();
}

privatevoidbtnReverse_Click(object sender, RoutedEventArgs e)
{
            videoMediaElement.DefaultPlaybackRate = 1.0;
            videoMediaElement.Play(); ;
}

privatevoidbtnVolumeDown_Click(object sender, RoutedEventArgs e)
{
            if (videoMediaElement.IsMuted)
            {
                videoMediaElement.IsMuted = false;
            }

            if (videoMediaElement.Volume< 1)
            {
                videoMediaElement.Volume += .1;
            }
           vol.Value -= 5;
} 
privatevoidbtnMute_Click(object sender, RoutedEventArgs e)
{
            videoMediaElement.IsMuted= !videoMediaElement.IsMuted;
}
privatevoidbtnVolumeUp_Click(object sender, RoutedEventArgs e)
{
            if (videoMediaElement.IsMuted)
            {
                videoMediaElement.IsMuted = false;
            }

            if (videoMediaElement.Volume> 0)
            {
                videoMediaElement.Volume -= .1;
            }
            vol.Value += 5;
}
privateasyncvoid pick_Click_1(object sender, RoutedEventArgs e)
{
            varopenPicker = newFileOpenPicker();
            openPicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
            openPicker.FileTypeFilter.Add(".wmv");
            openPicker.FileTypeFilter.Add(".mp4");
            var file = awaitopenPicker.PickSingleFileAsync();
            if (file != null)
            {
                var stream = awaitfile.OpenAsync(FileAccessMode.Read);
                // mediaControl is a MediaElement defined in XAML
                videoMediaElement.SetSource(stream, file.ContentType);
            }
}

Step 4: We use an extra feature of the full screen mode:
 
int flag = 0;
privateSize _previousVideoContainerSize = newSize();

privatevoidFullscreenToggle()
{
            if (flag == 0)
            {
                TransportControlsPanel.Visibility = Visibility.Collapsed;
                _previousVideoContainerSize.Width = videoContainer.ActualWidth;
                _previousVideoContainerSize.Height = videoContainer.ActualHeight;
                videoContainer.Width = Window.Current.Bounds.Width;
                videoContainer.Height = Window.Current.Bounds.Height;
                exit.Visibility = Visibility.Visible;
                inn.Visibility = Visibility.Collapsed;
                flag = 1;
}

In the above code we hide all the UI elements in the app. Then, set the Width and Height properties of the ContentControl, which is the parent of the MediaElement, to the maximum bounds of the display.

Step 5 : Exit from Full Screen mode.
 
TransportControlsPanel.Visibility = Visibility.Visible;
videoContainer.Width = _previousVideoContainerSize.Width;
videoContainer.Height = _previousVideoContainerSize.Height;
exit.Visibility = Visibility.Collapsed;
inn.Visibility = Visibility.Visible;

In the above code we use two ways to exit from full screen. One is from the ESC key and other from the app bar. Set the previous height and width of media control to make it in the original postion.

Here is the full code of MainPage.xaml.cs file.
 
using System;
usingSystem.Collections.Generic;
using System.IO;
usingSystem.Linq;
usingWindows.Foundation;
usingWindows.Foundation.Collections;
usingWindows.UI.Xaml;
usingWindows.UI.Xaml.Controls;
usingWindows.UI.Xaml.Controls.Primitives;
usingWindows.UI.Xaml.Data;
usingWindows.UI.Xaml.Input;
usingWindows.UI.Xaml.Media;
usingWindows.UI.Xaml.Navigation;
usingWindows.Storage;
usingWindows.Media;
usingWindows.Storage.Pickers;

namespace App4
{
    publicsealedpartialclassMainPage : Page
    {
        publicMainPage()
        {
            this.InitializeComponent();

        }
        protectedoverridevoidOnNavigatedTo(NavigationEventArgs e)
        {
        }

        int flag = 0;
        privateSize _previousVideoContainerSize = newSize();

        privatevoidFullscreenToggle()
        {
            if (flag == 0)
            {
                TransportControlsPanel.Visibility = Visibility.Collapsed;
                _previousVideoContainerSize.Width = videoContainer.ActualWidth;
                _previousVideoContainerSize.Height = videoContainer.ActualHeight;
                videoContainer.Width = Window.Current.Bounds.Width;
                videoContainer.Height = Window.Current.Bounds.Height;
                exit.Visibility = Visibility.Visible;
                inn.Visibility = Visibility.Collapsed;
                flag = 1;
            }
            else
            {
                TransportControlsPanel.Visibility = Visibility.Visible;
                videoContainer.Width = _previousVideoContainerSize.Width;
                videoContainer.Height = _previousVideoContainerSize.Height;
                exit.Visibility = Visibility.Collapsed;
                inn.Visibility = Visibility.Visible;
            }
        }
        privatevoidbtnFullScreenToggle_Click(object sender, RoutedEventArgs e)
        {
            FullscreenToggle();
        }
        privatevoidVideoContainer_KeyUp(object sender, KeyRoutedEventArgs e)
        {
            if (flag == 1 &&e.Key == Windows.System.VirtualKey.Escape)
            {
                FullscreenToggle();
            }

            e.Handled = true;
        }

        privatevoidbtnPlay_Click(object sender, RoutedEventArgs e)
        {
            if (videoMediaElement.DefaultPlaybackRate != 1)
            {
                videoMediaElement.DefaultPlaybackRate = 1.0;
            }

            videoMediaElement.Play();
        }

        privatevoidbtnPause_Click(object sender, RoutedEventArgs e)
        {
            videoMediaElement.Pause();
        }

        privatevoidbtnStop_Click(object sender, RoutedEventArgs e)
        {
            videoMediaElement.Stop();
        }

        privatevoidbtnForward_Click(object sender, RoutedEventArgs e)
        {
            videoMediaElement.DefaultPlaybackRate = 2.0;
            videoMediaElement.Play();
        }

        privatevoidbtnReverse_Click(object sender, RoutedEventArgs e)
        {
            videoMediaElement.DefaultPlaybackRate = 1.0;
            videoMediaElement.Play(); ;
        }
        privatevoidbtnVolumeDown_Click(object sender, RoutedEventArgs e)
        {
            if (videoMediaElement.IsMuted)
            {
                videoMediaElement.IsMuted = false;
            }

            if (videoMediaElement.Volume< 1)
            {
                videoMediaElement.Volume += .1;

            }
           vol.Value -= 5;
        }
        privatevoidbtnMute_Click(object sender, RoutedEventArgs e)
        {
            videoMediaElement.IsMuted= !videoMediaElement.IsMuted;
        }
        privatevoidbtnVolumeUp_Click(object sender, RoutedEventArgs e)
        {
            if (videoMediaElement.IsMuted)
            {
                videoMediaElement.IsMuted = false;
            }

            if (videoMediaElement.Volume> 0)
            {
                videoMediaElement.Volume -= .1;
            }
            vol.Value += 5;
        }
        privateasyncvoid pick_Click_1(object sender, RoutedEventArgs e)
        {
            varopenPicker = newFileOpenPicker();
            openPicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
            openPicker.FileTypeFilter.Add(".wmv");
            openPicker.FileTypeFilter.Add(".mp4");
            var file = awaitopenPicker.PickSingleFileAsync();
            if (file != null)
            {
                var stream = awaitfile.OpenAsync(FileAccessMode.Read);
                // mediaControl is a MediaElement defined in XAML
                videoMediaElement.SetSource(stream, file.ContentType);
            }
        }
    }
}



Step 6: Press F5 to run the application and see the output. Select a media file from the upload button:





Step 7: Use the various controls buttons like full screen mode:



Step 8: To exit from full screen mode either press the Esc key or right-click on the screen to display the app bar. Click Exit full Screen button.


Comments

Post a Comment

Popular posts from this blog

How to prepare your PC for the Windows 10 upgrade Source: WC

By -
Image
It's been a long ride, but at the end of July, millions of users around the world will finally get their hands on  Windows 10 . In this new release, Microsoft is going back to the drawing board to make Windows better. The company is doing this by bringing back many of the familiarities of Windows 7 with a mix of Windows 8.1 functionality, brand new features, such as  Cortana , Settings, and universal Windows apps, and changing the way people upgrade to the next operating system. So far things are looking very good. Below you will find everything you need to know to prepare your computer to upgrade to Windows 10. From making sure all your system's components are compatible with the new operating system, to preparing a recovery plan, to making the necessary changes to prevent possible hiccups during the process. Making sure Windows 10 is compatible with your PC One of the efforts to put Windows 10 on a billion devices is by making the operating system free for the first y
Read more

Top 5 Japanese Anime (Cartoons)

By -
Image
Hi Guys, Japanese anime or "manga" come in a wide array of themes and genres. No matter the genre, I've always enjoyed its intricate storytelling and limitless creativity. Many highly acclaimed titles are filled with action and are among the most popular of all anime.  Following ratings are in my view. Comment us if you have a different idea.  #5 クレヨンしんちゃん (くれよんしんちゃん)  –  Crayon Shin-chan Where Sazae-san and Chibi Maruko-chan center around the 大家族 (だいかぞく), Crayon Shin-chan features a more modern 核家族 (かくかぞく), or nuclear family. The main character is Shinnosuke, a frank kindergartner with a mischievous streak. He can’t resist the urge to pull down his pants and wiggle his butt, and he loves to point out his mom and dad’s fallacies. Maybe that’s why Crayon Shin-chan has repeatedly earned the distinction as the show Japanese parents feel least comfortable letting their kids watch. But while Shinnosuke’s manners may not be the best, and he’s not the sharpest tool
Read more

Salesforce LWC - Mass Approval Component

By -
Image
Hi, Salesforce in default doesn't have a screen to approve or reject the pending approval items in one go. Users need to click/ open each item and do the approvals. This component enables users to select the records and do the approvals by clicking Approve or Reject button.  This is built on the LWC framework which is faster and lightweight in the salesforce platform. Since this is generic, we can place anywhere on the Home page, App page, and Utility bar and I have uploaded it in Github. If you face any bugs or issues, you can comment on this post.  View on GitHub:  https://github.com/vignesh15081992/Approval-component
Read more