How to show a buffer (progress bar) in video QML - qt

Question

I would like to show a buffer in a video, similar to youtube videos. I read the documentation on Video Qml Type
and there is bufferProgress property that "holds how much of the data buffer is currently filled, from 0.0 (empty) to 1.0 (full)", but this property can't be assigned with a value, so I don't know how should I use it.
I googled, but I couldn't find a similar problem that has been solved.
Here is my code:
Video{
id:video
//width:500
//height:300
anchors.top:rect3.bottom
autoLoad: true
autoPlay: true
width:isFullScreen? window.width : 500
height:isFullScreen?window.height : 300
Layout.fillHeight: isFullScreen
Layout.fillWidth: isFullScreen
Image{
id:play_from_start_image
width:parent.width/5
height:parent.height/5
anchors.right:play_image.left
anchors.verticalCenter: parent.verticalCenter
source:'qrc:play-from-start.png'
opacity:timer3.running?1.0:0.0
Behavior on opacity {
PropertyAnimation { duration: 5000 }
}
Timer{
id:timer3
interval:5000
running: true
}
MouseArea{
anchors.fill:parent
onClicked:{
timer3.start()
video.seek(0)
video.play()
}
}
}
Image{
id:stop_image
width:parent.width/5-20
height:parent.height/5-20
anchors.left:play_image.right
anchors.verticalCenter: parent.verticalCenter
source:'qrc:stop-button.png'
opacity:timer4.running?1.0:0.0
Behavior on opacity {
PropertyAnimation { duration: 5000 }
}
Timer{
id:timer4
interval:5000
running:true
}
MouseArea{
anchors.fill:parent
onClicked:{
timer4.start()
video.pause()
}
}
}
Image{
id:play_image
width:parent.width/5
height:parent.height/5
anchors.centerIn: parent
source:'qrc:play.svg'
opacity:timer1.running?1.0:0.0
Behavior on opacity {
PropertyAnimation { duration: 5000 }
}
Timer{
id:timer1
interval:5000
running:true
}
MouseArea{
anchors.fill:parent
onClicked:{
if(video.playbackState===1){
timer1.start()
video.pause()
play_image.source='qrc:play.svg'
}else if(video.playbackState===2){
video.play()
play_image.source='qrc:pause.svg'
timer1.stop()
}
}
}
}
Image{
id:enter_exit_image
width:parent.width/5
height:parent.height/5
anchors.top:video.top
anchors.right:video.right
source: isFullScreen? 'qrc:enter-outline.svg':'qrc:exit-outline.svg'
opacity:timer2.running?1.0:0.0
Behavior on opacity {
PropertyAnimation { duration: 5000 }
}
Timer{
id:timer2
interval:5000
running:true
}
MouseArea{
anchors.fill:parent
onClicked:{
timer2.start()
isFullScreen=!isFullScreen
//timer2.stop()
}
}
}
}
This is a part of my code where the video component is, the rest is on Github and I can provide a link to my Github repository if needed.
Any help or hint would be appreciated.
Edit:
I found progress bar control in QML, I was googling it wrong for days. I included it in my code:
Video{
id:video
//width:500
//height:300
anchors.top:rect3.bottom
autoLoad: true
autoPlay: true
width:isFullScreen? window.width : 500
height:isFullScreen?window.height : 300
Layout.fillHeight: isFullScreen
Layout.fillWidth: isFullScreen
ProgressBar{
id:buffer
from:start
to:end
value:new Date().toLocaleTimeString()
//indeterminate: true
anchors.bottom:video.bottom
}
}
....
start is a start time defined in my xml file and end is the end time. value should be current time. This code only shows progress bar to half of the width of the video and it doesn't have any progress. What am I doing here wrong?

Answer 1

I guess that is what you trying to achieve:
Video {
id: video
// Gray buffer bar
ProgressBar {
id: bufferBar
anchors.bottom: video.bottom
anchors.left: video.left
width: video.width
from: 0
to: 1
value: video.bufferProgress
contentItem: Rectangle {
anchors.left: bufferBar.left
anchors.bottom: bufferBar.bottom
height: bufferBar.height
width: bufferBar.width * bufferBar.visualPosition
color: "lightgray"
opacity: 0.75
}
}
// Red position bar
ProgressBar {
id: positionBar
anchors.bottom: video.bottom
anchors.left: video.left
width: video.width
from: 0
to: video.duration
value: video.position
background: Item {
visible: false
}
contentItem: Rectangle {
anchors.left: positionBar.left
anchors.bottom: positionBar.bottom
height: positionBar.height
width: positionBar.width * positionBar.visualPosition
color: "red"
}
}
}
I just wrote it top of my head, so there might be some mistakes.