examples/QtQuick/qtvideoplayer/qml/videoplayer/main.qml

import QtQuick 1.0
import QtMultimediaKit 1.1
import SampleFileBrowser 1.0

Rectangle{
    id:main

    // Variables to find the current status and volume of the audio.
    property int statusPos
    property int volumePos
    width: 360
    height: 640
    statusPos: (playMusic.duration - playMusic.position)/1000
    volumePos: (playMusic.volume)*100

    Text{

        // Display the remaining duration of the audio loaded in seconds.
        id:statusVideo
        text: "Duration:"+ parent.statusPos + "sec"
        width: 150
        height: 50
        elide: Text.ElideRight
        wrapMode: Text.WrapAnywhere
    }

    Text{

        // Display the volume level of the music.
        id:volumeVideo
        text: "Volume:" + parent.volumePos + "%"
        width: 150
        height: 50
        anchors.left: statusVideo.right
    }

    // File browser component to load the supported audio files.
    MyFileBrowser{id:browseFile}

    Image{

        // Browse icon, which open the file dialog when clicked.
        id: videoWindow
        source: "browse.png"
        anchors.top: statusVideo.bottom
        width: 300
        height:300
        MouseArea {
            anchors.fill: parent
            onClicked:  {
                //browseFile.openDialog();
            }
        }
    }

    Rectangle{
        id: browseButton
        color: "steelblue"
        anchors.top: videoWindow.bottom
        anchors.left: parent.left
        height: 50
        width: 60
        Text{
            text: "Browse"
            anchors.centerIn: parent
        }
        MouseArea{
            anchors.fill: parent
            onClicked: browseFile.openDialog();
        }
    }

    Slider{

        // Position of the playing audio is shown by the position of moving slider.
        id:statusSlider
        anchors { top: browseButton.bottom; left: videoWindow.left
            right: videoWindow.right;
            //leftMargin: 20; rightMargin: 20
            //bottomMargin: 10
        }
    }


    Rectangle{

        // A volume icon, and a slider to control the audio volume.
        id:volumeContainer
        anchors.top: parent.width < parent.height ? statusSlider.bottom : statusMusic.bottom
        anchors.left: parent.width < parent.height ? parent.left : videoWindow.right
        height: 50
        width: 230


        Image{
            id:volumeIcon
            source: "mute.png"
            width: 80
            height:parent
        }

        Slider{

            // Volume slider to control the audio volume.
            anchors.left: volumeIcon.right
            y:28
            id:volumeSlider
            width:150
        }
    }

    // Audio player component.
    /*
    Audio { id: playMusic
            volume: volumeSlider.position/(volumeSlider.width - 32)
    }*/

    // Exit button, to exit the application.
    Image{
        id:exitButton
        anchors.right: parent.right
        anchors.top: parent.top
        source: "exit.png"
        MouseArea {
            anchors.fill: parent
            onPressed:  { Qt.quit() }
        }
    }

    // Options to play, pause and stop music.
    Row{
        id:musicOptions
        anchors.left: parent.width < parent.height ? parent.left : videoWindow.right
        anchors.bottom: parent.bottom
        Image{
            id: playOption
            property bool playing
            source: "play.png"
            playing:false
            MouseArea {
                anchors.fill: parent
                onClicked:  {
                    if(!parent.playing){
                        myvideo.play();
                        parent.source = "pause.png";
                        parent.playing = true;
                        return;
                    }
                    else{
                        myvideo.pause();
                        parent.source = "play.png";
                        parent.playing = false;
                        return;
                    }

                }
            }

        }

        Image{
            id:stopOption
            source: "stop.png"
            MouseArea {
                anchors.fill: parent
                onPressed:  {
                    myvideo.stop();
                    playOption.source = "play.png";
                }
            }

        }
    }

    // Connections to change the position of status slider according to the position of the audio.
    Connections {
        target: myvideo
        onPositionChanged: {
            //statusSlider.position = myvideo.position;
        }
    }

    // Connections to update position of the audio according to the position of the status slider.
    Connections {
        target: statusSlider
        onSliderMoved: {
            myvideo.setPosition(statusSlider.position*(playMusic.duration)/(statusSlider.width - 32));
        }
    }

    // Connections to change the volume icon according to the audio volume.
    Connections {
        target: volumeSlider
        onSliderMoved: {
                myvideo.setVolume(volumeSlider.position/(volumeSlider.width - 32)*100);
        }
    }

    // Connections to load a new audio source file, which is selected using file browser component.
    Connections {
        target: browseFile
        onFileSelected: {
            myvideo.setMedia(newSourceFile);
        }
    }
}

---