使用视频当背景1.0

业务需求,需要做一个登录界面,背景必须是视频,为什么不能是动态图呢?因为动态图有诸多缺点:例如需要同样清晰度,分辨率,动态图会特别大。
话不多说,直接上代码,底层用的videowidget播放视频,在上面叠加透明窗口。

主窗口页面代码,最终呈现的窗口:
widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QLineEdit>
#include <QMoveEvent>
#include <QCloseEvent>
#include <QResizeEvent>
#include "videowidget.h"
#include "inforwindow.h"

class Widget : public QWidget
{
    Q_OBJECT
public:
    Widget(QWidget *parent = 0);
    void moveEvent(QMoveEvent *event);
    void closeEvent(QCloseEvent *event);
    void resizeEvent(QResizeEvent *size);

private:
    VideoWidget* video = nullptr;
    InforWindow     *m_pInforWindow = nullptr;     //登录窗口
    QPoint          m_pLoginBeforPoint;            //登录窗口移动之前的位置

};

#endif // WIDGET_H

widget.cpp

#include <QGraphicsOpacityEffect>
#include <QPainter>
#include <QDebug>
#include <QApplication>
#include <QDesktopWidget>
#include "widget.h"

Widget::Widget(QWidget *parent): QWidget(parent)
{

    //setWindowState(Qt::WindowFullScreen);//全屏
    setMinimumSize(1000,1000);
    video = new VideoWidget(this);

    /*登录窗口*/
    m_pInforWindow = new InforWindow();
    m_pInforWindow->setAttribute(Qt::WA_TranslucentBackground,true);  //背景透明
    m_pInforWindow->setWindowFlags(Qt::FramelessWindowHint
                                   |Qt::WindowStaysOnTopHint);//无边框,置顶
    m_pInforWindow->move((this->width()/4),(this->height()/3+50));
    m_pInforWindow->show();
    m_pLoginBeforPoint = m_pInforWindow->pos();

    move(0,0);
}

void Widget::moveEvent(QMoveEvent *event)
{
    m_pInforWindow->move(m_pLoginBeforPoint+event->pos());
}

void Widget::closeEvent(QCloseEvent *event)
{
    m_pInforWindow->close();
}
/*    */
/***************************************************************************
* Function:重写resize函数,保持窗口大小改变时,控件随之改变
* InPut :
* OutPut :
* Return :void
* Other :
* Author : fanxingwang %{CurrentDate:2018.01.24}
***************************************************************************/
void Widget::resizeEvent(QResizeEvent *size)
{
    video->videoWidget->resize(this->width(),this->height());
    m_pInforWindow->resize((this->width()/2),(this->height()/3));
    m_pInforWindow->move((this->width()/4),(this->height()/3+50));
    m_pLoginBeforPoint = m_pInforWindow->pos();
}

视频播放的代码,即背景
videowidget.h

#ifndef VIDEOWIDGET_H
#define VIDEOWIDGET_H

#include <QWidget>
#include <QMediaPlayer>
#include <QMediaPlaylist>
#include <QVideoWidget>
#include <QLabel>

class VideoWidget : public QWidget
{
    Q_OBJECT
public:
    VideoWidget(QWidget *parent = 0);
    QVideoWidget* videoWidget = nullptr;
    QVideoWidget* videoWidget2 = nullptr;
    QLabel* label = nullptr;
    QMediaPlayer* player = nullptr;
    QMediaPlayer* player2 = nullptr;

private:   
    QMediaPlaylist* playlist  = nullptr;


};

#endif // VIDEOWIDGET_H

videowidget.cpp

#include <QMovie>
#include "videowidget.h"

VideoWidget::VideoWidget(QWidget *parent)
    : QWidget(parent)
{
    /*窗口背景*/
    player = new QMediaPlayer();

    videoWidget = new QVideoWidget(parent);
    videoWidget->setAspectRatioMode(Qt::IgnoreAspectRatio);

    playlist = new QMediaPlaylist;
    playlist->addMedia(QUrl::fromLocalFile("C:/Users/fanxw/Desktop/test.avi"));
    playlist->setCurrentIndex(1);
    playlist->setPlaybackMode(QMediaPlaylist::CurrentItemInLoop);

    player->setPlaylist(playlist);
    player->setVideoOutput(videoWidget);
    player->play();

    setUpdatesEnabled(false);
}

登录窗口界面代码:
inforwindow.h

#ifndef INFORWINDOW_H
#define INFORWINDOW_H

#include <QWidget>
#include <QLineEdit>
#include <QLabel>
#include <QObject>
#include <QPushButton>

class InforWindow : public QWidget
{
    Q_OBJECT
public:
    InforWindow(QWidget *parent = 0);

private:
    QLabel          *m_pUserLabel = nullptr;        //提示输入用户名
    QLabel          *m_pPasswordLabel = nullptr;    //提示输入密码
    QLabel          *m_pInformationLabel = nullptr; //提示按回车

    QLineEdit       *m_pUserLineEdit = nullptr;     //用户名输入框
    QLineEdit       *m_pPasswordLineEdit = nullptr; //密码输入框

    QPushButton     *m_pIsVisibleBtn = nullptr;     //设置密码是否可见按键
    QPushButton     *m_pConfirmBtn = nullptr;       //确认按键

    bool            m_isVisible = false;            //判断按钮状态标志

private slots:
    void            slot_isVisibleBtnClicked();     //是否可见按键响应函数
    void            slot_isConfirmBtnClicked();     //确认按键响应函数
};

#endif // INFORWINDOW_H

inforwindow.cpp

#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QFile>
#include <QDebug>
#include "inforwindow.h"

InforWindow::InforWindow(QWidget *parent)
    : QWidget(parent)
{
    QFile qssfile(":/style.qss");
    qssfile.open(QFile::ReadOnly);
    QString qss;
    qss = qssfile.readAll();
    this->setStyleSheet(qss);

    m_pUserLabel = new QLabel(this);
    m_pUserLabel->setText(tr("WHAT'S YOUR NAME?"));

    m_pPasswordLabel = new QLabel(this);
    m_pPasswordLabel->setText(tr("WHAT'S YOUR PASSWORD?"));

    m_pInformationLabel = new QLabel(this);
    m_pInformationLabel->setObjectName(tr("InformationLabel"));
    m_pInformationLabel->setText(tr("OR PRESS ENTER"));

    m_pUserLineEdit = new QLineEdit(this);
    m_pUserLineEdit->setObjectName(tr("UserLineEdit"));

    m_pPasswordLineEdit = new QLineEdit(this);
    m_pPasswordLineEdit->setEchoMode(QLineEdit::Password);
    m_pPasswordLineEdit->setObjectName(tr("PasswordLineEdit"));
    connect(m_pPasswordLineEdit, SIGNAL(returnPressed()),
            this,SLOT(slot_isConfirmBtnClicked()));

    m_pIsVisibleBtn = new QPushButton(this);
    if(!m_isVisible)
    {
    m_pIsVisibleBtn->setObjectName(tr("VisibleBtn"));

    }
    else
    {
        m_pIsVisibleBtn->setObjectName(tr("InVisibleBtn"));
    }

    connect(m_pIsVisibleBtn,SIGNAL(clicked(bool)),
            this,SLOT(slot_isVisibleBtnClicked()));

    m_pConfirmBtn = new QPushButton(this);
    m_pConfirmBtn->setObjectName(tr("ComfirmBtn"));
    connect(m_pConfirmBtn,SIGNAL(clicked(bool)),
            this,SLOT(slot_isConfirmBtnClicked()));


    QHBoxLayout* pHlayout3 = new QHBoxLayout;
    pHlayout3->addWidget(m_pUserLineEdit);
    pHlayout3->addSpacing(100);

    QVBoxLayout* pVlayout1 = new QVBoxLayout;
    pVlayout1->addWidget(m_pUserLabel);
    pVlayout1->addLayout(pHlayout3);

    QHBoxLayout* pHlayout1 = new QHBoxLayout;
    pHlayout1->addWidget(m_pPasswordLineEdit);
    pHlayout1->addWidget(m_pIsVisibleBtn);
    pHlayout1->addWidget(m_pConfirmBtn);

    QVBoxLayout* pVlayout2 = new QVBoxLayout;
    pVlayout2->addWidget(m_pPasswordLabel);
    pVlayout2->addLayout(pHlayout1);

    QHBoxLayout* pHlayout2 = new QHBoxLayout;
    pHlayout2->addStretch();
    pHlayout2->addWidget(m_pInformationLabel);

    QVBoxLayout* pVlayout = new QVBoxLayout;
    pVlayout->addLayout(pVlayout1);
    pVlayout->addLayout(pVlayout2);
    pVlayout->addLayout(pHlayout2);

    setLayout(pVlayout);
}

void InforWindow::slot_isVisibleBtnClicked()
{
    /*通过此段代码,设置密码是否可见图标变化*/
    if(!m_isVisible)
    {
        m_pPasswordLineEdit->setEchoMode(QLineEdit::Normal);
        m_isVisible = true;
        m_pIsVisibleBtn->setObjectName(tr("InVisibleBtn"));
    }
    else
    {
        m_pPasswordLineEdit->setEchoMode(QLineEdit::Password);
        m_pIsVisibleBtn->setObjectName(tr("VisibleBtn"));
        m_isVisible = false;
    }
    QFile qssfile(":/style.qss");
    qssfile.open(QFile::ReadOnly);
    QString qss;
    qss = qssfile.readAll();
    this->setStyleSheet(qss);
}

void InforWindow::slot_isConfirmBtnClicked()
{
    qDebug()<<"confirm....";
}

qss内容

*{
background:transparent;
color: white
}

QLabel{
height: 20px;
font-size: 20px
}

QLabel#InformationLabel{
font-size: 15px
}

QLineEdit{
height: 40px;
border-style: solid;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
border-bottom-color: white;
font-size: 40px
}

QPushButton{
width: 50px;
}

QPushButton#VisibleBtn{
border-image: url(:/visible.png)
}

QPushButton#InVisibleBtn{
border-image: url(:/invisible.png)
}

QPushButton#ComfirmBtn{
border-image: url(:/confirm.png)
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include "widget.h"

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Widget* widget = nullptr;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    widget = new Widget();
    widget->show();

}

MainWindow::~MainWindow()
{

}

这里需要说明一下,因为QT QMediaPlayer机制的原因,控件(即这里的InforWindow)不能指定父窗口,否则设置透明会变成大黑块,这个是无法解决的问题,因此,本文使用的是将之设置为独立窗口,然后重写最终窗口move 和 close函数,使之看起来仿佛是一个窗口,但是这样有诸多风险,请慎用。如果不考虑最终文件的大小,推荐使用动态图当背景,方便好做,如果必须用视频,请进博客,参考《使用视频当背景2.0》。

附上
使用动态图当背景传送门:http://blog.csdn.net/fan_xingwang/article/details/79170087
使用视频当背景2.0:http://blog.csdn.net/fan_xingwang/article/details/79170673

猜你喜欢

转载自blog.csdn.net/fan_xingwang/article/details/79170463