×
Namespaces

Variants
Actions
Revision as of 04:17, 11 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

HTML5 video player app using a QWebView

From Nokia Developer 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
Compatibility
Platform(s): MeeGo
Symbian
Article
Keywords: HTML5, Video Player
Created: somnathbanik (25 Jul 2011)
Last edited: hamishwillee (11 Oct 2012)

Contents

Introduction

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.cpp

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent), ui(new Ui::MainWindow)
{
//ui->setupUi(this);
QRect rect(0, 0, 854, 480);
web = new QWebView(this);
web->setGeometry(rect);
QWebSettings::globalSettings()->setAttribute(QWebSettings::PluginsEnabled, true);
web->settings()->setAttribute(QWebSettings::PluginsEnabled, true);
web->load(QUrl("qrc:/html5/html5_video.html?init=true"));
web->show();
}

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

html5_video.html

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

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: File:VideoPlayerN950.zip

This page was last modified on 11 October 2012, at 04:17.
239 page views in the last 30 days.
×