Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

HTML5 video player app using a QWebView

From Wiki
Jump to: navigation, search

This article shows how to create an HTML5 Video Player hosted within a QWebView.

Article Metadata
Code ExampleTested with
Devices(s): N950/MeeGo
Platform(s): MeeGo
Keywords: HTML5, Video Player
Created: somnathbanik (25 Jul 2011)
Last edited: hamishwillee (11 Oct 2012)



HTML is the markup language used for web development. HTML5 is the newest version of HTML that includes specifications for a video tag, which allow the developers to add video to a page the same way they would add an image. Is it very simple and easy. The W3C has created directions on how video should work in browser.

The code examples creates an HTML compatible "browser" app using QWebView and loads an HTML5 page that has the video tag. The HTML5 supported browser has a built in video player which also includes video controls (play/pause/ etc), so we don’t need to create the controls manually. We can embed our video file in the container to play the video directly.

HTML5 Video Player

Note.pngNote: This image has been created manually as I could not take the screen shot of the application from N950, but the application looks the same as in the image.

Source code


MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent), ui(new Ui::MainWindow)
QRect rect(0, 0, 854, 480);
web = new QWebView(this);
QWebSettings::globalSettings()->setAttribute(QWebSettings::PluginsEnabled, true);
web->settings()->setAttribute(QWebSettings::PluginsEnabled, true);

We set the screen size to 480x854 (N950), you can change according to the respective device. The HTML file to play the video is shown below


<!DOCTYPE html>
<meta charset="utf-8" />
<title>HTML5 Video Player</title>
<div >
<video width="854" height="480" controls="controls" preload="auto" poster="">
<source src="" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="" type='video/webm; codecs="vp8, vorbis"' />
<source src="" type='video/ogg; codecs="theora, vorbis"' />

First, we encode video in .mp4, .webm and .ogv containers. We use the <video> tag to specify the dimensions of our video. The poster of <video> attribute defines the play icon of the video. Then, within the video tag, we’ve added three <source> elements which link to our video files.The type attribute of the <source> tag helps the browser to understand which file it should load. It also needs to specify the video codec and the audio codec.

Work with this example

Download and unzip the source code. Open the html5_video.html file and change the poster attribute of <video> tag to your play icon link, and change the src attribute of the <source> tag to the video links. Import to Qt Creator and then deploy on device.

Source Code

The full source code for this article is available here:

This page was last modified on 11 October 2012, at 01:17.
171 page views in the last 30 days.