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
 import QtQuick
 import QtMultimedia

 App {

   NavigationStack {

     AppPage {
       title: "Audio"

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

       MediaPlayer {
         id: audio
         audioOutput: AudioOutput {}
         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
 import QtQuick
 import QtMultimedia

 App {

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

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

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

       VideoOutput {
         id: output
         anchors.fill: parent
       }
     }
   }

   Component.onCompleted: mediaplayer.play()
 }

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

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

       YouTubeWebPlayer {
         videoId: "BiO5BVJklxQ"
         autoplay: true
       }

     }
   }
 }