基于FFmpeg的视频播放器开发系列教程（五）：界面优化

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

           （1）界面用qss做了优化，实现暗黑效果；

           （2）添加了菜单，按钮添加了图标，窗口大小自适应大小等；

           （3）最大化按钮

           （4）增加了音量调整功能

           （5）增加了网络拉流功能

     主界面

       音量调节与最大化

       

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

       很多播放器的界面都采用了暗黑颜色，大概是 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

 

编码源码编译时需要ffmepg和log4cplus dll, Github对文件大小有限制，因此我把dll放到了百度网盘，链接如下

 

源码地址：https://github.com/linghuzhangmen/FFVideoPlayer

ffmpeg4.2.1和log4cplus dll: https://pan.baidu.com/s/1-2WXb9ExxisK9xaOIuY7wg