• Home
• Felgo
• YouTubeWebPlayer

YouTubeWebPlayer

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

• List of all members, including inherited members

Properties

• autoplay : bool
• customHTML : string
• loading : bool
• playerApiChangeScript : string
• playerErrorScript : string
• playerIsReady : bool
• playerPlaybackQualityChangeScript : string
• playerPlaybackRateChangeScript : string
• playerReadyScript : string
• playerStateChangeScript : string
• playerVars : var
• videoId : string

Signals

• loadingFinished()
• playerReady()

Methods

• void loadVideo(string videoId, bool autoplay, var options)
• void pause()
• void play()
• void runJavaScript(string code, function callback)
• void runPlayerScript(string targetFunction, var arguments, function callback)
• void seekTo(int seconds, bool allowSeekAhead)
• void stop()

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.

For detailed information about the player capabilities, see the YouTube Iframe-Player API. On different target platforms or devices, autoplay may not be properly supported for embedded YouTube videos. This is due to browser restrictions with Qt WebView. In addition, a manual call to the play method only works after playback was previously started by a user action.

Integration Steps

YouTube Player Demo App

The YouTube Player Demo App, which is part of the Felgo SDK, is a YouTube channel browser to list and watch YouTube videos. It allows to watch videos and browse the playlists of the Felgo 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[])
 {
   // ...

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

   // ...

   // initialize WebView
   QtWebView::initialize();

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

   return app.exec();
 }

Example Usage

Simple YouTube Player

It is sufficient to configure the videoId property of the player.

 import Felgo

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

       YouTubeWebPlayer {
         videoId: "KQgqTYCfJjM"
       }

     }
   }
 }

Customized YouTube Player

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

 import Felgo
 import QtQuick

 App {
   NavigationStack {
     AppPage {
       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 Felgo

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

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

         // 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

Signal Documentation

Method Documentation

 runJavaScript("player.pauseVideo()")

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

 runPlayerScript("setVolume", 20)