QT多媒体 播放视频并显示字幕

亦凉 2023-01-20 09:45 387阅读 0赞

#

标签： # Qt qt 多媒体 字幕 视频播放

在这里插入图片描述

  1. QVideoWidget *videoWidget = new QVideoWidget();
  2.     QMediaPlayer *player = new QMediaPlayer();
  3.     player->setMedia(QUrl::fromLocalFile("/Users/pikachu/Movies/《千与千寻》片段.mp4"));
  4.     player->setVideoOutput(videoWidget);
  5.     setCentralWidget(videoWidget);
  6.     player->play();
  7.     resize(1920, 1080);

但是 QMediaPlayer却没有办法播放字幕
一个做法是自己把字幕画上去
想法来源：https://forum.qt.io/topic/47378/again-how-show-a-subtitle-on-qmediaplayer
在这里插入图片描述
我根据这个想法，做了一个实现
在这里插入图片描述

  1. resize(1440, 720);
  2.     auto videoItem = new QGraphicsVideoItem();
  3.     auto srtTextItem = new QGraphicsTextItem();
  4.     auto scene = new QGraphicsScene();
  5.     auto view = new QGraphicsView(scene);
  6.     scene->addItem(videoItem);
  7.     scene->addItem(srtTextItem);
  8.     srtTextItem->setPlainText("SRT TEXT");
  9.     setCentralWidget(view);
  10.     QMediaPlayer *player = new QMediaPlayer(this, QMediaPlayer::VideoSurface);
  11.     player->setMedia(QUrl::fromLocalFile("/Users/pikachu/Movies/《千与千寻》片段.mp4"));
  12.     player->setVideoOutput(videoItem);
  13.     player->play();
  14.     view->show();
  15.     videoItem->setSize(size());

这样就能显示文字了，最后就是把文字显示在视频的底部中间部分
调一下字的位置
在这里插入图片描述

  1. auto textRectSize = srtTextItem->boundingRect().size();
  2.     auto target_y = videoItem->size().height() - textRectSize.height();
  3.     auto target_x = (videoItem->size().width() - textRectSize.width()) / 2;
  4.     srtTextItem->setPos(target_x, target_y);

字幕一般是白色，且比目前我的这个稍微大一点

在这里插入图片描述

  1. srtTextItem->setDefaultTextColor(QColorConstants::White);
  2.     auto font = srtTextItem->font();
  3.     font.setPixelSize(26);
  4.     srtTextItem->setFont(font);
  • 1
  • 2
  • 3
  • 4
  • 5

这样就达到我的预期了。
后面就是如何读取SRT字幕文件，并根据时间显示不同的字幕文字。
这里就不写了，剩下的部分，在我写的一个稍微大的项目里整合了在一起。

附

所有代码

  1. // 头文件
  2. #ifndef MAINWINDOW_H
  3. #define MAINWINDOW_H
  5. #include <QMainWindow>
  7. class MainWindow : public QMainWindow
  8. {
  9.     Q_OBJECT
  11. public:
  12.     MainWindow(QWidget *parent = nullptr);
  13.     ~MainWindow();
  14. };
  15. #endif // MAINWINDOW_H
  17. // 源文件
  18. #include "mainwindow.h"
  19. #include <QtWidgets>
  20. #include <QVideoWidget>
  21. #include <QtMultimedia>
  22. #include <QGraphicsVideoItem>
  23. #include <QGraphicsTextItem>
  24. #include <QGraphicsScene>
  25. #include <QGraphicsView>
  26. #include <QDebug>
  27. MainWindow::MainWindow(QWidget *parent)
  28.     : QMainWindow(parent)
  29. {
  30.     resize(1440, 720);
  31.     auto videoItem = new QGraphicsVideoItem();
  32.     auto srtTextItem = new QGraphicsTextItem();
  33.     auto scene = new QGraphicsScene();
  34.     auto view = new QGraphicsView(scene);
  35.     scene->addItem(videoItem);
  36.     scene->addItem(srtTextItem);
  37.     srtTextItem->setPlainText("SRT TEXT");
  38.     setCentralWidget(view);
  39.     QMediaPlayer *player = new QMediaPlayer(this, QMediaPlayer::VideoSurface);
  40.     player->setMedia(QUrl::fromLocalFile("/Users/pikachu/Movies/《千与千寻》片段.mp4"));
  41.     player->setVideoOutput(videoItem);
  42.     player->play();
  43.     view->show();
  44.     videoItem->setSize(size());
  45.     srtTextItem->setDefaultTextColor(QColorConstants::White);
  46.     auto font = srtTextItem->font();
  47.     font.setPixelSize(26);
  49.     srtTextItem->setFont(font);
  50.     auto textRectSize = srtTextItem->boundingRect().size();
  51.     auto target_y = videoItem->size().height() - textRectSize.height();
  52.     auto target_x = (videoItem->size().width() - textRectSize.width()) / 2;
  53.     srtTextItem->setPos(target_x, target_y);
  54. }
  56. MainWindow::~MainWindow()
  57. {
  58. }

补充：
如果只用纯白色的文字，在白色的背景下就看不见，所以要加一个阴影。
代码如下

  1. QGraphicsDropShadowEffect *e2 = new QGraphicsDropShadowEffect(this);
  2.     e2->setOffset(1,1);
  3.     srtTextItem->setGraphicsEffect(e2);

发表评论

表情：
评论列表 （有 0 条评论，387人围观）

还没有评论，来说两句吧...

相关阅读

    相关 html页面显示播放视频

    首先 先引入 播放器的js包。点击下载： [下载地址][Link 1] 然后把下载到的东西解压后放到webcontent里面。 首先想要播放视频的页面要引入这个js  <s

    小灰灰小灰灰/ 0 赞/ 420 阅读