How to add a seekbar to a video played using vlcj in Java Swing?

Question

I’ve trimmed down the code to only the relevant parts and posted it below. The code works fine. The video plays when you run it but it doesn’t have a seekbar.

public class Screen {
//JFrmae
private JFrame frame;

// Panel which I add the canvas to
private JPanel pVid = new JPanel();

// Canvas
Canvas canvas = new Canvas();

// Embedded Media Player
EmbeddedMediaPlayer emp;


/**
 * Create the application.
 */
public Screen() {
    initialize();
}

/**
 * Initialize the contents of the frame.
 */
private void initialize() {
    //Frame
    frame = new JFrame();
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setVisible(true);

    //Adding the panel to the frame
    frame.getContentPane().add(pVid);

    //Adding the canvas to the panel
    pVid.add(canvas);

    //Setting canvas size
    canvas.setSize(715, 402);

    //Loading the VLC native library
    NativeLibrary.addSearchPath(RuntimeUtil.getLibVlcLibraryName(), "lib");
    Native.loadLibrary(RuntimeUtil.getLibVlcLibraryName(), LibVlc.class);

    //Initializing the media player
    MediaPlayerFactory mpf = new MediaPlayerFactory();

    //Misc
    emp = mpf.newEmbeddedMediaPlayer(new Win32FullScreenStrategy(frame));
    emp.setVideoSurface(mpf.newVideoSurface(canvas));

    //Video file name and playing
    String file = "video.mp4";
    emp.prepareMedia(file);
    emp.play();

    //pack method
    frame.pack();
}

/**
 * Launch the application.
 */
public static void main(String[] args) {
    EventQueue.invokeLater(new Runnable() {
        public void run() {
            try {
                Screen window = new Screen();
                window.frame.setVisible(true);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    });
}

}

I’ve looked for an answer online for the last 4 days. Finally I decided to ask here. The official website for vlcj has pictures of a vlcj player they’ve made. There is a seekbar in those pictures. Link to the webpage which has the pics: http://capricasoftware.co.uk/#/projects/vlcj

They have a number of useful tutorials there but they don’t have any instructions for adding the seekbar.

Then I tried downloading their vlcj-player project from their GitHub page. It showed an error because it couldn’t resolve the “com.google.common.collect.ImmutableList” which is supposed to be imported. (At the moment I’m reading about ImmutableList and stuff and see if there’s a way to fix it.) Since I couldn’t figure that out yet, I looked for a class named seekbar or the like in their project. I couldn’t find any.

I also searched elsewhere online for the answer but I just couldn’t find it. I’d really appreciate any help. Thank you.

Edit:

(This edit is in response to the suggestion given to me by @caprica. Read their comment to this question and my reply to that in the comment to understand what I'm talking about here in this edit. I think it'll be useful for others in the future.)

All right, there must have been some problem with my Eclipse or computer. (I’ll type out how I fixed it at the end of this comment.) It’s working now. I’ll type out what I did step by step so that may be it’ll be useful to others in the future to download and install the project.

1. Download the project.
2. Import it as a Maven project. (Import > Maven > Existing Maven Project)
3. Now in Eclipse right click the imported project and select Run As > Maven Install

And that’s it. Now you can just run the project normally. If you don’t know how to run the project, do it like this. Right click the project and select Run As > Java Application and then Select VlcjPlayer – uk.co.caprica.vlcplayer.

Alternatively you can open the class where the main method is and run it. VlcjPlayer class is where the main method is located. The class is in the package uk.co.caprica.vlcplayer.

The problem I faced was that somehow all the necessary files didn’t get downloaded when I ran it as Maven Install. But it worked fine in another computer. Since I knew where the files are downloaded to, I just copied the folder from that PC and put it in the same place in my PC. The folder name is ‘repository’. It’s location is C:\Users\User Name\ .m2. Perhaps Eclipse in this PC has some problem. I’ll reinstall it later to avoid problems in the future.

And this may be useful, the VLC that’s installed in this PC is 64 bit. Not sure if that makes a difference but mentioning it just in case.

Now that the app is working fine I will see the code and see how the seekbar is made. Thanks a lot @caprica for telling me that I should import it as a Maven project. :)

Answer 1

The Basic Controls tutorial shows the essential approach: Add a panel of buttons to the frame and give each button an ActionListener that invokes the relevant media player command. As an example, this notional Rewind button would "skip backwards 10 seconds (-10,000 milliseconds)."

JPanel controlsPane = new JPanel();
JButton rewindButton = new JButton("Rewind");
rewindButton.addActionListener(new ActionListener() {
    @Override
    public void actionPerformed(ActionEvent e) {
        mediaPlayerComponent.getMediaPlayer().skip(-10000);
    }
});
controlsPane.add(rewindButton);
frame.add(controlsPane, BorderLayout.SOUTH);

The software design is up to you, but you should at least be aware of

• JToolBar, seen here and here.

• Action, seen here and cited here.

• Timer, seen here as a way to repeat an Action.

Answer 2

All right, guys. I’ve figured out how to do it. I’m not sure how it was done in the official Vlcj project but I’ve figured out my own simple way by learning from the official project.

It just takes a few lines of code. It’s very simple. These are the steps you have to follow:

1. Create a JSlider.
2. To the JSlider, add a mouseMotionListener (‘mouseDragged’ to be exact).
3. Inside that put in the code which would update the video position based on the change in the JSlider.
4. Create a Timer.
5. Put the code inside it to set the value of the JSlider based on the position of the video.

And that’s it!

This is the code. It comes inside the initialize() method which you can see in the code I’ve given in the question. (And of course you'll also have to create the JSlider and add it to the panel. I haven't shown the code since it's simple.)

js.addMouseMotionListener(new MouseMotionAdapter() {
    @Override
        public void mouseDragged(MouseEvent e) {
        if (js.getValue() / 100 < 1) {
        emp.setPosition((float) js.getValue() / 100);
        }
    }
});


Timer timer = new Timer(100, new ActionListener() {

        @Override
        public void actionPerformed(ActionEvent e) {

        js.setValue(Math.round(emp.getPosition() * 100));
    }

});

timer.start();

Some explanation.

The value you get when you use emp.getPosition always seems to be in decimals. It’s something like 0.1334344 at the start of the video and it’s something like 0.998988 at the end. But the value of JSlider is in int. From 0 to 100. So in the mouseMotionListener added to the JSlider I’ve converted the int value of the JSlider to float by dividing it by 100.

And in the action listener inside the timer I’ve multiplied the value of the video position by 100 and then rounded it off to make it an int value. So that value can be set in the JSlider to make it move in sync with the video.

I’m sure the code is rudimentary and there could be some best practices which I may not have followed. Sorry about that but I’m just getting into java by learning the stuff which I find interesting. Those who are good at java and have used such code in an actual project can comment below with how it can be improved.