summaryrefslogtreecommitdiff
path: root/examples/webkitqml/youtubeview/doc/src/youtubeview.qdoc
blob: a8e433e6460facad57f8293f5505d8e5ab492d2e (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/****************************************************************************
**
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see http://www.qt.io/terms-conditions. For further
** information use the contact form at http://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: http://www.gnu.org/copyleft/fdl.html.
** $QT_END_LICENSE$
**
****************************************************************************/

/*!
    \example webkitqml/youtubeview
    \title YouTube View Example
    \brief Demonstrates how to embed a web view in a Qt Quick application
    \ingroup webkit-qmlexamples

    The YouTube View \l{Qt QML}{QML} example uses a \l{WebView} to play
    \l{http://www.youtube.com/html5}{HTML5 video clips from YouTube}.

    \image youtubeview-example.png

    The application makes use of an \l{XmlListModel} to query the \l{https://developers.google.com/youtube}{YouTube API}
    for HTML5 video clips and lists thumbnails of the clips in a \l{ListView} at the top. The \l{WebView} loads a local \c player.html file that
    embeds a YouTube HTML5 video player using the \l{https://developers.google.com/youtube/iframe_api_reference}{IFrame player API},
    which allows to control the YouTube player using JavaScript.

    When clicking on a thumbnail, the corresponding clip is loaded in the WebView by passing the video ID as a query string to \c player.html.
    When the video is started, the thumbnail list is hidden with an animated fade-out, when the video is stopped the list is showed again.
    The specific states of the player change the title of the WebView using \e{document.title} in JavaScript. The application
    is acting on these title changes in the \c{onTitleChanged} slot of the WebView item and thus switches between specific states.
    By default the application loads a list of movie trailers.

    When clicking on the button below the thumbnail list, the application switches to search mode, which allows to search for videos
    using keywords. Additionally it is also possible to choose from a number of preset movie trailer streams.

    \image youtubeview-example-preset.png

    This example uses the QtWebKit QML API that utilizes the WebKit2 split-process architecture.
*/