YouTubeWebPlayer

Embedded video player based on the YouTube Iframe-Player API. More...

Import Statement: import VPlayApps 1.0
Since: V-Play 2.18.1
Inherits:

Item

Properties

Signals

Methods

Detailed Description

This control allows to embed a YouTube player in your app. The component internally relies on a QML WebView to embed the player via HTML. The YouTubeWebPlayer component offers a QML API to configure and control the YouTube Iframe-Player.

Note: Qt does not support the QML WebView for the default minGW compiler on Windows. To use the Qt WebView module on Windows, you can build your app with the MSVC compiler.

For detailed information about the player capabilities, see the YouTube Iframe-Player API.

Integration Steps

YouTube Player Demo App

The YouTube Player Demo App, which is part of the V-Play SDK, is a YouTube channel browser to list and watch YouTube videos. It allows to watch videos and browse the playlists of the V-Play YouTube Channel.

Have a look at this demo to see how to integrate the Qt WebView module and use the YouTubeWebPlayer to play videos. The demo also shows how to load content from the YouTube Data API via http requests.

Link and Initialize the Qt WebView Module

To use a WebView in your apps, it is required to link the Qt WebView module in your *.pro configuration:

 QT += webview

You can now include and initialize the WebView in your main.cpp:

 // include WebView
 #include <QtWebView>

 // ...

 int main(int argc, char *argv[])
 {
   // ...

   vplay.setMainQmlFileName(QStringLiteral("qml/YouTubePlayerMain.qml"));

   // ...

   // initialize WebView
   QtWebView::initialize();

   engine.load(QUrl(vplay.mainQmlFileName()));

   return app.exec();
 }

Note: Qt does not support the QML WebView for the default minGW compiler on Windows. To use the Qt WebView module on Windows, you can build your app with the MSVC compiler.

Example Usage

Simple YouTube Player

It is sufficient to configure the videoId property of the player. To immediately start playpack, set autoplay to true:

 import VPlayApps 1.0

 App {
   NavigationStack {
     Page {
       title: "YouTube Player"

       YouTubeWebPlayer {
         videoId: "KQgqTYCfJjM"
         autoplay: true
       }

     }
   }
 }

Customized YouTube Player

The following example uses the YouTubeWebPlayer configuration properties to create a custom player controlled from QML:

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   NavigationStack {
     Page {
       title: "YouTube Player"

       YouTubeWebPlayer {
         id: player
         videoId: "KQgqTYCfJjM"
         playerVars: {
           "controls": 0, // hide player controls
           "showinfo": 0 // hide video title
         }
         enabled: false // no interaction with player possible
       }

       // controls
       Rectangle {
         anchors.top: player.bottom
         width: parent.width
         height: controls.height
         color: Theme.backgroundColor

         Column {
           id: controls
           anchors.horizontalCenter: parent.horizontalCenter
           AppButton {
             text: "Play"
             onClicked: player.play()
           }

           AppButton {
             text: "Pause"
             onClicked: player.pause()
           }

           AppButton {
             text: "Stop"
             onClicked: player.stop()
           }
         }
       }
     }
   }
 }

YouTube Player with Custom Error HTML

The following example uses the customHTML, playerErrorScript and playerStateChangeScript properties to show a customized HTML error message.

 import VPlayApps 1.0

 App {
   NavigationStack {
     Page {
       title: "YouTube Player"

       YouTubeWebPlayer {
         id: player
         videoId: "*invalid!"
         autoplay: true

         // hide player iframe and display message on error
         playerErrorScript: "
           player.getIframe().style.display='none';
           document.getElementById('videoIdError').style.display='block';
         "

         // show player iframe and hide message when new video has loaded
         playerStateChangeScript: "if(event.data == YT.PlayerState.PLAYING) {
           document.getElementById('videoIdError').style.display='none';
           player.getIframe().style.display='block';
         }"

         // add custom HTML for showing the error
         customHTML: '<style>
           .videoError {
             background-color: black;
             color: white;
             width: 100%;
             height: 100%;
             position: absolute;
             display: none;
           }
         </style >
         <div id="videoIdError" class="videoError">
           This video is not available.
         </div>'
       }

       AppButton {
         text: "Change Video"
         anchors.top: player.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         onClicked: {
           if(player.videoId == "KQgqTYCfJjM")
             player.videoId = "*invalid!"
           else
             player.videoId = "KQgqTYCfJjM"
         }
       }
     }
   }
 }

Property Documentation

autoplay : bool

Configures whether the video should play automatically when loaded. Defaults to false. The autoplay configuration is part of the playerVars, which are passed to the embedded YouTube player.

See also playerVars.


customHTML : string

Allows to extend the WebView with additional HTML code. The content of this property is directly inserted at the end of the player HTML's body tag. This allows to e.g. react to player errors by adding a playerErrorScript to show error messages you provided as customHTML.

See also playerReadyScript, playerStateChangeScript, playerPlaybackQualityChangeScript, playerPlaybackRateChangeScript, playerErrorScript, and customHTML.


loading : bool

Holds true if the WebView is currently in the process of loading new content, false otherwise. Reloads happen whenever the HTML for the WebView changes, e.g. when setting customHTML or player event scripts.

When the initial HTML load or a reload is finished, the loadingFinished signal fires.

See also loadingFinished.


playerApiChangeScript : string

Allows to extend the WebView with custom JavaScript to handle the onApiChange web player event. This can be useful when customizing the player with additional HTML elements and features. To add custom HTML items to the view, use the customHTML property.

See also playerReadyScript, playerStateChangeScript, playerPlaybackQualityChangeScript, playerPlaybackRateChangeScript, playerErrorScript, and customHTML.


playerErrorScript : string

Allows to extend the WebView with custom JavaScript to handle the onError web player event. This can be useful when customizing the player with additional HTML elements and features. To add custom HTML items to the view, use the customHTML property.

See also playerReadyScript, playerStateChangeScript, playerPlaybackQualityChangeScript, playerPlaybackRateChangeScript, playerApiChangeScript, and customHTML.


playerPlaybackQualityChangeScript : string

Allows to extend the WebView with custom JavaScript to handle the onPlaybackQualityChange web player event. This can be useful when customizing the player with additional HTML elements and features. To add custom HTML items to the view, use the customHTML property.

See also playerReadyScript, playerStateChangeScript, playerPlaybackRateChangeScript, playerErrorScript, playerApiChangeScript, and customHTML.


playerPlaybackRateChangeScript : string

Allows to extend the WebView with custom JavaScript to handle the onPlaybackRateChange web player event. This can be useful when customizing the player with additional HTML elements and features. To add custom HTML items to the view, use the customHTML property.

See also playerReadyScript, playerStateChangeScript, playerPlaybackQualityChangeScript, playerErrorScript, playerApiChangeScript, and customHTML.


playerReadyScript : string

Allows to extend the WebView with custom JavaScript to handle the onReady web player event. This can be useful when customizing the player with additional HTML elements and features. To add custom HTML items to the view, use the customHTML property.

See also playerStateChangeScript, playerPlaybackQualityChangeScript, playerPlaybackRateChangeScript, playerErrorScript, playerApiChangeScript, and customHTML.


playerStateChangeScript : string

Allows to extend the WebView with custom JavaScript to handle the onStateChange web player event. This can be useful when customizing the player with additional HTML elements and features. To add custom HTML items to the view, use the customHTML property.

See also playerReadyScript, playerPlaybackQualityChangeScript, playerPlaybackRateChangeScript, playerErrorScript, playerApiChangeScript, and customHTML.


playerVars : var

A JSON object to describe player parameters, which you can use to configure the player. See the YouTube Player-Parameter docs for a list of all available settings.

For convenience, the autoplay setting is available as an own property autoplay. Any configuration of autoplay within the playerVars will be overwritten.

See also autoplay.


videoId : string

The ID that identifies the YouTube video, which the player will load.


Signal Documentation

loadingFinished()

Fires when the initial HTML load or a reload is finished.

See also loading.


Method Documentation

void loadVideo(string videoId, bool autoplay, var options)

Executes the loadVideoById function for the internal YouTube Iframe-Player.

The first parameter specifies the videoId of the video to load. Setting the autoplay parameter to true will also start the video after loading it. The options parameter can be used to pass a JSON object of configuration options, as supported by the Iframe-Player's loadVideoById function.


void pause()

Executes the pauseVideo function for the internal YouTube Iframe-Player.


void play()

Executes the playVideo function for the internal YouTube Iframe-Player.


void runJavaScript(string code, function callback)

Executes custom JavaScript code for the QML WebView which holds the YouTube Iframe-Player. This function is a wrapper for WebView::runJavaScript().

Your own scripts also have access to the YouTube Iframe-Player object using the player variable. For example, you could pause the video using:

 runJavaScript("player.pauseVideo()")

However, it is more convenient to directly use ready-made functions like pause for such features.

See also runPlayerScript.


void runPlayerScript(string targetFunction, var arguments, function callback)

Allows to run functions of YouTube Iframe-Player API from QML.

The first parameter specifies the targetFunction to run for the player. As second parameter, additional arguments can be passed as single value or array. You can then retrieve the return value of the call by providing an optional callback function.

For example, you can get the duration of the video using:

 runPlayerScript("getDuration", function(duration){
   console.log("Video Duration: "+duration)
 })

Or control the volume of the player with:

 runPlayerScript("setVolume", 20)

See also runJavaScript.


void seekTo(int seconds, bool allowSeekAhead)

Executes the seekTo function for the internal YouTube Iframe-Player.

The seconds parameter specifies the target time the player should jump to. The allowSeekAhead parameter defines, whether the player sends a new request to the server, in case the seconds parameter specifies a time that is not within the currently buffered video data.


void stop()

Executes the stopVideo function for the internal YouTube Iframe-Player.


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support