Видео в QtQuick 2.0

Как проиграть видео в приложении 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.

Зачем? Дело в том, что когда Вы запускаете программу из 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. Подключите модуль мультимедиа (у Вас может быть другой номер версии пакета):
import QtMultimedia 5.0

1	import QtMultimedia 5.0

2. Вставьте в программу код видеофайла. Например, так:
Video { id: video width : 800 height : 600 source: "file://video.mp4" MouseArea { anchors.fill: parent onClicked: { video.play() } } focus: true }

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 файл получиться:

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 } }

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      } }

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



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



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