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
This article shows how to create an HTML5 Video Player hosted within a QWebView.
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.
: QMainWindow(parent), ui(new Ui::MainWindow)
QRect rect(0, 0, 854, 480);
web = new QWebView(this);
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
<meta charset="utf-8" />
<title>HTML5 Video Player</title>
<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"' />
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.
The full source code for this article is available here: File:VideoPlayerN950.zip