Win10系列：VC++媒体播放控制4

2022-07-15 12:46:21

（7）音量控制

MediaElement控件具有一个Volume属性，通过设置此属性的值可以改变视频音量的大小。接下来介绍如何实现视频的音量控制，首先打开MainPage.xaml文件，并在Grid元素中原有代码的基础上继续添加如下的代码：

在上面的代码中，添加了一个TextBlock控件和一个名为"VolumeBar"的Slider控件，其中Slider控件用于表示一个音量控制条。通过将Slider控件的Minimum属性和Maximum属性分别赋值为0和100，来将音量控制条的音量范围设置在0~100之间。

添加了上述的代码以后，接下来为Slider控件的ValueChanged事件添加事件处理函数VolumeBarChange。打开MainPage.xaml.h头文件，并添加如下的代码，用来声明VolumeBarChange函数。

private:

//当改变音量控制条时改变视频的音量大小

void VolumeBarChange(Platform::Object^ sender,Windows::UI::Xaml::Controls::Primitives::RangeBaseValueChangedEventArgs^ e);

声明了VolumeBarChange函数以后，接着在MainPage.xaml.cpp源文件中添加VolumeBarChange函数的实现代码，具体代码如下所示：

//当改变音量控制条时改变视频的音量大小

void FileDemo::MainPage::VolumeBarChange(Platform::Object^ sender,Windows::UI::Xaml::Controls::Primitives::RangeBaseValueChangedEventArgs^ e)

{

//改变视频的音量

Video->Volume = (VolumeBar->Value)/100;

}

在上面的代码中，将Slider控件的Value属性除以100所得到的值赋给MediaElement控件中的Volume属性，从而改变MediaElement控件中视频的音量。

添加音量控制条后，前台界面的显示效果如图20-14所示。

图20-14音量控制条

（8）添加全屏按钮

实现了视频音量控制之后，接下来实现视频的全屏播放。首先布局前台界面，打开MainPage.xaml文件，并在Grid元素中添加一个"全屏"按钮，用于全屏播放MediaElement控件中的视频，代码如下所示：

添加了"全屏"按钮以后，前台界面的显示效果如图20-15所示，此按钮显示在"快退"按钮之后。

图20-15全屏按钮

布局了前台界面以后，接下来实现视频的全屏播放功能。打开MainPage.xaml.h头文件，添加如下代码：

private:

bool isFullScreen;

private:

//设置视频全屏播放

void FullScreenClick(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

在上面的代码中，使用private关键字声明一个bool类型的私有成员变量isFullScreen，用于表示视频的播放模式是否为全屏播放模式。然后使用private关键字声明一个私有的FullScreenClick函数，用于全屏播放视频。

添加了上述的代码以后，接着在MainPage.xaml.cpp源文件中添加FullScreenClick函数的实现代码，具体代码如下所示：

//设置视频全屏播放

void FileDemo::MainPage::FullScreenClick(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)

{

//设置全屏模式为true

isFullScreen = true;

//根据isFullScreen变量改变视频播放窗口的大小

FullscreenToggle(isFullScreen);

}

在上述的代码中，将isFullScreen变量赋值为true，表示视频的播放模式为全屏播放模式。然后调用FullscreenToggle函数，此函数根据isFullScreen变量的值改变MediaElement控件的大小。

添加了FullScreenClick函数的实现代码以后，接下来在MainPage.xaml.h头文件中添加如下的代码：

private:

Windows::Foundation::Size previousVideoContainerSize;

private:

//根据isFullScreen改变视频窗口的全屏模式

void FullscreenToggle(bool isFullScreen);

在上面的代码中，使用private关键字声明一个Size类型的私有成员变量previousVideoContainerSize，用来保存MediaElement控件的原始大小。然后使用private关键字声明一个私有的FullscreenToggle函数。

声明了FullscreenToggle函数以后，接着在MainPage.xaml.cpp源文件中添加FullscreenToggle函数的实现代码，具体代码如下所示：

//根据isFullScreen改变视频播放窗口的大小

void FileDemo::MainPage::FullscreenToggle(bool isFullScreen)

{

if(isFullScreen)

{

//记录当前MediaElement控件的大小

previousVideoContainerSize.Width = Video->Width;

previousVideoContainerSize.Height = Video->Height;

//将MediaElement控件的大小设置为当前应用窗口的大小

Video->Width = Window::Current->Bounds.Width;

Video->Height = Window::Current->Bounds.Height;

}

else

{

//恢复视频窗口的原始大小

Video->Width = previousVideoContainerSize.Width;

Video->Height = previousVideoContainerSize.Height;

}

在上面的代码中，首先判断FullscreenToggle函数的参数isFullScreen是否为true，如果参数isFullScreen为true，则将当前MediaElement控件的Width属性值和Height属性值分别赋给previousVideoContainerSize变量的Width属性和Height属性，以便将其保存。然后将应用窗口的Width属性值和Height属性值赋给MediaElement控件的Width属性和Height属性，从而实现视频的全屏播放。

如果参数isFullScreen为false，则将previousVideoContainerSize变量的Width属性值和Height属性值赋给MediaElement控件的Width属性和Height属性，从而使视频退出全屏播放。

前面只实现了全屏播放的功能，接下来实现通过按下Esc键来退出视频的全屏播放。在MainPage.xaml文件中，指定Grid元素的KeyUp事件处理函数为VideoKeyUp，代码如下所示：

接下来在MainPage.xaml.h头文件中添加如下代码，用于声明VideoKeyUp函数。

private:

//退出视频的全屏播放

void VideoKeyUp(Platform::Object^ sender, Windows::UI::Xaml::Input::KeyRoutedEventArgs ^ e);

声明了VideoKeyUp函数以后，在MainPage.xaml.cpp源文件中添加VideoKeyUp函数的实现代码，具体代码如下所示：

//当按下Esc键时退出全屏模式

void FileDemo::MainPage::VideoKeyUp(Platform::Object^ sender, Windows::UI::Xaml::Input::KeyRoutedEventArgs ^ e)

{

//当全屏模式下才执行函数

if(isFullScreen && e->Key == Windows::System::VirtualKey::Escape)

{

//设置全屏模式为false

isFullScreen = false;

FullscreenToggle(isFullScreen);

}

在VideoKeyUp函数中首先对isFullScreen变量和按下的键进行判断，如果isFullScreen变量为true且在键盘中按下的键为"Esc"时，将isFullScreen变量赋值为false，并以此变量作为参数调用FullscreenToggle函数来退出视频的全屏播放。

（9）完整前台代码

本部分将给出MainPage.xaml文件中完整的前台代码，由于在前面的部分已经对此代码中所包含的控件进行了详细的介绍，这里将不再赘述，读者可参照这些代码来进行前台界面的布局。在MainPage.xaml文件中用于前台布局的代码如下所示：

<Grid>

</StackPanel>

</Grid>

<Grid>

<Grid>

</Grid>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</StackPanel>

</Grid>

</StackPanel>

</Grid>

码农公寓

相关文章