ffmpeg播放器6(从2-5的实现)-上

xcyxiner
186 阅读5分钟

1 背景

上面这几篇，是从打开本地文件开始，按照步骤查看hplayer是怎么实现的。从这一篇开始，按照前面的代码，使用qt6来实现。

源码存放位置 github.com/xcyxiner/xp…

2 从选择本地文件开始(ffmpeg播放器2)

2.1 新建工程

名称xplayer image.png

使用qmake

image.png

使用默认的MainWindow

image.png

其他的保持默认到结束

创建后的默认界面如下所示

image.png

2.2 按照 ffmpeg播放器2 的步骤

2.2.1 MainWindow.cpp 添加菜单以及事件

ffmpeg播放器2

qt6默认有ui，就直接界面上添加菜单了 双击mainwindow.ui

image.png

然后在屏幕上中间有 "在这里输入"，双击可以输入文字

image.png

分别添加"文件"两个字，然后再在二级菜单添加"打开"两个字，添加后的效果如下

image.png

然后在下面的action编辑器里，选中右键 转到槽

image.png

选择triggered，并点击确定

image.png

最终的界面如下所示

image.png

以上的就是之前的 菜单里的打开文件

image.png

这里可以简单测试一下效果，比如在上面的方法里输出下，打个断点

#include <iostream>

void MainWindow::on_action_triggered()
{
    std::cout<<"open file"<<std::endl;
}

打上断点后的效果如下

image.png

按F5运行后，选择菜单 文件，然后打开，可以跳转到断点的位置

image.png

继续运行后可以在输出里面看到如下

image.png

2.2.2 OpenMediaDlg 声明

在头文件追加私有私有槽OpenMediaDlg 双击mainwindow.h，如下图所示

image.png

添加如下

private slots:

    void OpenMediaDlg(int index);

效果如下所示 image.png

选中OpenMediaDlg，右键，重构，然后跳转到定义

image.png

最终效果如下

image.png

之前还用了枚举变量，现在追加 MEDIA_TYPE_FILE

2.2.3 MEDIA_TYPE_FILE 定义

新建头文件 在 "头文件" 上右键 点击 添加新文件

image.png

选择c++头文件 image.png

输入文件名 avdef image.png

然后输入下面代码

typedef enum {
    MEDIA_TYPE_FILE=0,
    MEDIA_TYPE_NB,
    MEDIA_TYPE_NONE
} media_type_e;

最终效果如下

image.png

2.2.4 完善之前菜单的 文件-打开 之后的事件

双击mainwindow.cpp，然后输入如下代码

 OpenMediaDlg(MEDIA_TYPE_FILE);

效果如下

image.png

2.2.5 HOpenMediaDlg 的添加

在 "头文件" 上右键 点击 添加新文件，然后选择qt，再点击 Qt Widgets Designer Form Class,效果如下

image.png

下一步后再选择 Dialog With Buttons Bottom的

image.png

文件名这里使用 HOpenMediaDlg

image.png

最终的效果如下，默认会打开hopenmediadlg.ui

image.png

2.2.6 HOpenMediaDlg 添加tab

左边的控制盒子可以将滚动条拉到中间

image.png

拖到界面上

image.png

在右边窗口 对象里面修改对象名 双击可以修改名称 image.png

再在中间的界面上修改tab选项卡的文字 为本地文件

点击中间的tab1，然后拖动右边属性编辑器的滚动条，修改 image.png

修改后的效果如下 image.png

用同样的方法修改另一个tab，点击tab2，然后属性编辑器里修改文字

image.png

然后点击 本地文件的 tab(必须点,否则会放到另一个tab上)，再拖个标签，文本框，以及一个push按钮

先拖个标签，然后双击修改文字 为 媒体文件地址

image.png

然后再拖个文本框

image.png

修改文本框对象名为edit

image.png

再拖个push按钮

image.png

双击修改按钮文字为 ... 选中按钮，右键，转到槽

image.png

再选择click

image.png

最终的效果如下所示

image.png

给按钮的槽追加如下代码(先添加头文件，再写代码,如果edit报错，可以执行下编译....)

#include "QFileDialog"

void HOpenMediaDlg::on_pushButton_clicked()
{
    QString file=QFileDialog::getOpenFileName(this,tr("打开媒体文件"),"","视频文件(*.mp4)");
    if(!file.isEmpty()){
        ui->edit->setText(file);
    }
}

PS: 上面要保存，要编译后，才能找到对象，不然ui好像会找不到对象(如果编译了还找不到对象，那就是自己没设置对象名，设置完再编译下)

2.2.7 调用对话框,先看看效果

之前2.2.2 里写的 OpenMediaDlg 总算能写点代码，看看效果了

双击mainwindow.cpp,添加如下代码

#include "hopenmediadlg.h"

void MainWindow::OpenMediaDlg(int index)
{
    HOpenMediaDlg dlg(this);
    dlg.exec();
}

文件-打开，然后选择一个mp4文件，打开就是下面的效果

image.png

上面默认显示地对话框文字是英文的，这里可以改成中文

双击hopenmediadlg.cpp，然后添加如下代码

HOpenMediaDlg::HOpenMediaDlg(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::HOpenMediaDlg)
{
    ui->setupUi(this);
    ui->buttonBox->button(QDialogButtonBox::Ok)->setText("确定");
    ui->buttonBox->button(QDialogButtonBox::Cancel)->setText("取消");
}

如下所示

image.png

再次运行的效果如下

image.png

2.2.8 对话框的确定事件

双击hopenmediadlg.ui，然后点击中间下面的 信号和槽编辑(signal and slots editor)，可以看到有如下

image.png

说明本身已经绑定了槽，但是我们没在hopenmediadlg.h中看到，那就是绑定的是基类的槽 这里我们需要覆盖基类的槽，所以在头文件如下添加如下槽(可以从基类中复制accept)

private slots:
    void on_pushButton_clicked();
    virtual void accept();

最终的效果如下

image.png

对于槽都是一样的，选中，右键，重构，添加定义

image.png

之后会自动跳到cpp页面，如下图所示 image.png

这里写入如下代码

#include "avdef.h"

void HOpenMediaDlg::accept()
{
    switch (ui->tab->currentIndex()) {
    case MEDIA_TYPE_FILE:
        media.type=MEDIA_TYPE_FILE;
        media.src=ui->edit->text().toUtf8().data();
        break;
    default:
        break;
    }
    QDialog::accept();
}

这里media会报错，需要在头文件中定义media成员变量，这里需要添加media的结构体

头文件，右键添加新文件，然后添加c++的头文件

image.png

名称使用hmedia

image.png

在hmedia.h中添加如下代码

#include "avdef.h"
#include <string>
typedef struct media_s{
    media_type_e type;
    std::string src;
    std::string descr;
    int index;

    media_s(){
        type=MEDIA_TYPE_NONE;
        index=-1;
    }
} HMedia;

如下图所示

image.png

之后再在hopenmediadlg.h中添加media的声明

#include "hmedia.h"

public:
    HMedia media;

这样前面的media就不报错了，打个断点，重新执行一遍

image.png

2.2.8 对象框关闭后拿到对应的结果

mainwindow.cpp中添加如下代码

void MainWindow::OpenMediaDlg(int index)
{
    HOpenMediaDlg dlg(this);
    if(dlg.exec()==QDialog::Accepted){
        std::cout<<dlg.media.src<<std::endl;
        // QMessageBox msgBox;
        // msgBox.setText("dialog accepted");
        // msgBox.exec();

    }
}

最终效果如下

image.png

运行调试后的结果如下

image.png

2.3 下一篇继续

avatar
文章
阅读
粉丝