Use Multimedia Assets: Audio and Video

With the QML Multimedia components, Felgo offer a rich set to use multimedia in your apps.

Play Audio in Your App

 import Felgo 3.0
 import QtQuick 2.0
 import QtMultimedia 5.9

 App {

   NavigationStack {

     Page {
       title: "Audio"

       Column {
         anchors.centerIn: parent
         AppButton {
           anchors.horizontalCenter: parent.horizontalCenter
           text: "Play Audio"
           onClicked: {
             audio.play()
           }
         }
       }

       Audio {
         id: audio
         source: "https://felgo.com/web-assets/beep.mp3"
       }
     }
   }
 }

Display a Video in Your App

Displaying a video in your app is just as easy as playing audio. As you can see in both the audio and video example, we use a web url for the media asset. The multimedia components are capable of playing multimedia assets bundled with the app, online or even streaming media.

 import Felgo 3.0
 import QtQuick 2.0
 import QtMultimedia 5.9

 App {

   // Displays a title bar and is used for navigation between pages
   NavigationStack {

     Page {
       title: "Video" // Is displayed in the title bar

       MediaPlayer {
         id: mediaplayer
         autoPlay: true
         loops: MediaPlayer.Infinite
         source: "https://felgo.com/web-assets/video.mp4"
       }

       VideoOutput {
         anchors.fill: parent
         source: mediaplayer
       }
     }
   }
 }

Embed a YouTube Player in Your App

The YouTubeWebPlayer component offers a QML API to configure and control an embedded YouTube Iframe-Player. It is sufficient to configure the videoId property of the player. To immediately start playpack, set autoplay to true:

 import Felgo 3.0

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

       YouTubeWebPlayer {
         videoId: "KQgqTYCfJjM"
         autoplay: true
       }

     }
   }
 }