How to insert videos into ListModel

Svetozar

Hello!
I'm trying to insert videos to a ListModel QML in order to video thumbnails are shown in my application. I tried it out with pictures and it works well:
@ListModel
{
id: aModel
ListElement { name: "Image1"; icon: "/usr/images/11.jpg" }
ListElement { name: "Image1"; icon: "/usr/images/22.jpg" }
ListElement { name: "Image1"; icon: "/usr/images/33.jpg" }
}@
Do you have any ideas how to modify this piece of code for showing videos in list?

kenotenshi

What is important for you to know is that in the case you are showing here, what you are providing is a path to a file. In short: feel free to link anything you want!

Concretely, this means:

Change your model to give the path to a video file

Change your delegate to handle videos. For that you need to use QtMobility (check "here":http://doc.qt.nokia.com/qtmobility-1.2/qml-video.html)

Your code would look like:
Model:
@ListModel {
id: aModel
ListElement { name : "video1"; video: "path_to_the_video_file" }
}
@

Delegate:
@ Component {
id: aVideoDelegate
Video {
id: videoContainer
width : 800
height : 600
source: video // Here it's coming from the model :)

     MouseArea {
         anchors.fill: parent
         onClicked: {
             video.play()
         }
     }

     focus: true
     Keys.onSpacePressed: video.paused = !video.paused
     Keys.onLeftPressed: video.position -= 5000
     Keys.onRightPressed: video.position += 5000
 }

}
@
This is how I would do, I'm not saying it's working.

Svetozar

I tried to do the following but no videos are shown on the screen:
@
ListModel
{
id: appModel
ListElement { name: "Video1"; video: "/usr/share/video/kittens.ogv" }
ListElement { name: "Video2"; video: "/usr/share/video/kittens.ogv" }
ListElement { name: "Video3"; video: "/usr/share/video/kittens.ogv" }
}

Component
{
id: appDelegate

      Item
      {
          width: const_WIDTH
          height: const_HEIGHT

          Video
          {
              id: myVideo
              width: const_VIDEO_WIDTH
              height: const_VIDEO_HEIGHT
              anchors.horizontalCenter: parent.horizontalCenter
              source: video

              Image
              {
                  id: iconPlay
                  source: "/usr/share/images/play.png"
                  anchors.verticalCenter: parent.verticalCenter
                  anchors.horizontalCenter: parent.horizontalCenter
                  opacity: 0.5
              }

              MouseArea
              {
                  anchors.fill: parent
                  onClicked:
                  {
                      video.play()
                  }
              }

              focus: true
              Keys.onSpacePressed: video.paused = !video.paused
              Keys.onLeftPressed: video.position -= 5000
              Keys.onRightPressed: video.position += 5000
          }
      }
 }

 GridView
 {
     clip: true
     anchors.bottomMargin: const_BOTTOM_MARGIN
     anchors.topMargin: const_TOP_MARGIN
     anchors.leftMargin: const_LEFT_MARGIN
     anchors.fill: parent
     cellWidth: const_CELL_WIDTH
     cellHeight: const_CELL_HEIGHT
     focus: true
     model: appModel
     delegate: appDelegate
 }

@

No errors were mentioned during compilation. Could you please advise what did I do wrong?

kenotenshi

When you say: "no videos are shown" what exactly happens?
What I'm interested in is:

can you see a thumbnail or anything? Maybe you can post a picture of what you have
have you tried different sizes? It could be a problem. I haven't used the Video element, so I don't know if you can resize a video...
were you able to load one single video i.e. without model/delegate? Maybe the file type is not supported...

Try to describe what you obtain, this way we can see better what the problem could be :)