FFmpeg视频播放器开发(五):界面优化

     最近又把这项目整了整,做了一些优化,增加了一些功能。例如:

           (1)界面用qss做了优化,实现暗黑效果;

           (2)添加了菜单,按钮添加了图标,窗口大小自适应大小等;

           (3)最大化按钮

           (4)增加了音量调整功能

           (5)增加了网络拉流功能

     主界面

FFmpeg视频播放器开发(五):界面优化_第1张图片

       音量调节与最大化

       

     下面具体介绍界面美化功能的实现,先看看主界面

FFmpeg视频播放器开发(五):界面优化_第2张图片

       很多播放器的界面都采用了暗黑颜色,大概是 RGB(53, 53, 53), 左下角的QLabel用来显示时间,在Qt设计器先把样式改掉了,因为去掉文本后,不用深颜色,容易忽略它的存在,按钮的文本也都去掉了,在代码里加图片显示。下面就介绍各个部分的实现,代码很简单,大家溜一遍就会了。

1 主界面

       主界面UI在初始化时设置暗黑颜色,之后调整菜单的样式,不然整个菜单就是黑的,菜单栏字体看不清楚。

void FFVideoPlayer::initUI()
{
	//MainWindow背景色
	setStyleSheet("background-color: rgb(53, 53, 53);");

	//菜单颜色
	ui.menuBar->setStyleSheet("background-color:rgb(53,53,53); border:1px solid gray; color:white; padding: 1px;");

	ui.label_Playtime->clear();
	ui.label_Playtime->setText("00:00:00/00:00:00");

	//各个按钮贴图
	setButtonBackImage(ui.btnPlayVideo, "./Resources/play.png");
	setButtonBackImage(ui.btnSetVolume, "./Resources/volume.png");
	setButtonBackImage(ui.btnFullScreen, "./Resources/fullscreen.png");
}

   2 按钮贴图   

     按钮贴图,替代之前的文字

//设置按钮图标,按钮的默认大小是 30*30
void FFVideoPlayer::setButtonBackImage(QPushButton *button, QString image)
{  
	QPixmap pixmap(image);
	QPixmap fitpixmap = pixmap.scaled(30, 30).scaled(30, 30, Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
	button->setIcon(QIcon(fitpixmap));
	button->setIconSize(QSize(30, 30));
	button->setFlat(true);  //按钮透明  
	button->setStyleSheet("border: 0px"); //消除边框
}

       播放与暂停分别用不同的图片,例如

       下面是代码

void FFVideoPlayer::slotPlay()
{
	g_isPlay = !g_isPlay;
	MyFFmpeg::Get()->m_isPlay = g_isPlay;

	if (g_isPlay)
	{
		setButtonBackImage(ui.btnPlayVideo, "./Resources/stop.png");
	}
	else
	{
		setButtonBackImage(ui.btnPlayVideo, "./Resources/play.png");
	}
}

    3 音量调节的Slider

       下面是音量调节进度条的qss代码

QSlider::groove:horizontal 
{
        height: 3px;
        background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));
}

QSlider::handle:horizontal 
{
        width: 8px;
        background: rgb(0, 255, 255);
        margin: -3px 0px -3px 0px;
        border-radius: 4px;
}

    4 静音设置按钮

   5 全屏与缩放

     控件大小位置自适应,我用是重写了resizeEvent方法,如下:

//窗口大小发生变化时,各控件大小的位置及大小的设置
void FFVideoPlayer::resizeEvent(QResizeEvent *e)
{
	if (isFullScreen())
	{
		ui.openGLWidget->move(0, 0);
		ui.openGLWidget->resize(this->width(), this->height());
	}
	else
	{
		ui.openGLWidget->move(0, 0);
		ui.openGLWidget->resize(this->width(), this->height() - 62);

		ui.timeSlider->move(0, this->height() - 80);
		ui.timeSlider->resize(this->width(), 20);
		ui.label_Playtime->move(5, this->height() - 60);
		ui.btnPlayVideo->move(this->width() / 2 - 15, this->height() - 60);
		ui.btnSetVolume->move(this->width() * 4 / 5, this->height() - 60);
		ui.sliderVolume->move(this->width() * 4 / 5 + 31, this->height() - 60);
		ui.btnFullScreen->move(this->width() - 40, this->height() - 60);
	}
}

       其实这里处理的并不好,我不太会用Qt布局,不然就不用谢这些代码了。

      全屏按钮功能

void FFVideoPlayer::on_btnFullScreen_clicked()
{
	if (!isFullScreen())
	{
		fullShow();
	}
}

/**
 * @brief 全屏时各个按钮隐藏
 */
void FFVideoPlayer::fullShow()
{
	this->showFullScreen();

	ui.menuBar->hide();
	ui.timeSlider->hide();
	ui.label_Playtime->hide();
	ui.btnPlayVideo->hide();
	ui.btnSetVolume->hide();
	ui.sliderVolume->hide();
	ui.btnFullScreen->hide();
}

/**
 * @brief 正常显示时各个控件均显示
 */
void FFVideoPlayer::normalShow()
{
	this->showNormal();

	ui.menuBar->show();
	ui.timeSlider->show();
	ui.label_Playtime->show();
	ui.btnPlayVideo->show();
	ui.btnSetVolume->show();
	ui.sliderVolume->show();
	ui.btnFullScreen->show();
}

      关于界面的优化,主要就是这么多了,其它细节在代码里。

 

相对于专栏的开篇,我换了开发环境,但还是VS Qt,变化如下:

Qt5.12.4 64位

FFmpeg4.2.1 Win64

VS2017

Win10-64

unicode

 

全部源码和FFmpeg链接如下:

       项目全部源码:https://github.com/linghuzhangmen/FFVideoPlayer

   

 

你可能感兴趣的:(#,C++,ffmpeg视频播放器开发)