Harrix Блог

  • Списки статей
    • Все статьи
    • IT
    • Qt
    • C++
    • Сложение двух чисел
    • Web программированиe
    • FAQ
    • Latex
    • Установка программ
    • Мифы
    • Видео
    • Про фото
  • Проекты
  • Harrix.org
  • RSS
  • Контакты

Видео в QtQuick 2.0

Как проиграть видео в приложении QtQuick 2.0?

20.02.2013 Leave a Comment 3 333 просмотров

Как проиграть видео в приложении QtQuick 2.0? В статье описывается пример для Qt 5.0.1 for Windows 32-bit (MinGW 4.7).

Содержание

  • Подготовка
  • Редактирование QML файла

Подготовка

  1. Постройте базовое приложение: http://blog.harrix.org/?p=364 или там же скачайте.
  2. Откомпилируйте Ваше приложение.
  3. Найдите папку, в котором находится откомпилированное приложение. Обычна эта папка (точнее предпапка) находится в той же папке, что и папка проекта. Например, у меня это папка Example-build-Desktop_Qt_5_0_1_MinGW_32bit-Release. В ней находится папка release или debug, в которой и находится exe файл.
  4. Скопируйте видеофайл, например, video.mp4 в эту папку с exe файлом. И еще копию видефайла в предпапку. То есть, например, файл должен находиться и в
    Example-build-Desktop_Qt_5_0_1_MinGW_32bit-Release
    и в
    Example-build-Desktop_Qt_5_0_1_MinGW_32bit-Releaserelease.
  5. Зачем? Дело в том, что когда Вы запускаете программу из QtCreator, то exe файл будет искать видеофайл из папки Example-build-Desktop_Qt_5_0_1_MinGW_32bit-Release. А если запускать файл как сам exe файл, то видеофайл будет искаться в папке Example-build-Desktop_Qt_5_0_1_MinGW_32bit-Releaserelease.

Редактирование QML файла

  1. Подключите модуль мультимедиа (у Вас может быть другой номер версии пакета):
  2. 1
    import QtMultimedia 5.0

  3. Вставьте в программу код видеофайла. Например, так:
  4. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
        Video {
             id: video
             width : 800
             height : 600
             source: "file://video.mp4"
     
             MouseArea {
                 anchors.fill: parent
                 onClicked: {
                     video.play()
                 }
             }
     
             focus: true
         }

    И в итоге у Вас может такой qml файл получиться:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    import QtQuick 2.0
    import QtMultimedia 5.0
     
    Rectangle {
        width: 360
        height: 360
     
        Video {
             id: video
             width : 800
             height : 600
             source: "file://video.mp4"
     
             MouseArea {
                 anchors.fill: parent
                 onClicked: {
                     video.play()
                 }
             }
     
             focus: true
         }
    }

  5. Запускайте программу. И Вы увидите следующую картину:
  6. video0

  7. Нажмите по белому полю мышкой, и видео пойдет:
  8. video

    Со всеми остальными моментами: подгонка высоты и ширину, управление видео и так далее уже сами разберетесь. Здесь всё обычно.


Статьи по теме:

  1. Как сослаться на элемент в папке с программой в QtQuick 2.0
  2. Соответствие include в Qt5 и Qt4 в QtQuick приложениях
  3. Сложение двух чисел в Qt 5.5.0 на C++ (Qt Quick)
  4. Сложение двух чисел в Qt 5.5.0 на C++ (Qt Quick Controls)

IT Qt, QtQuick

© 2014 Harrix