1.27.2018 How to make a Simple Video Player in Lazarus

We like to watch videos. How about playing videos on our own player? In this article, we are going to create a fun, simple video player.

Video players always fascinate me. I used to code with my brother to create many kinds of video players. We had fun creating them. We used Visual Basic 6 back then, because it was popular back then and easy to learn. We got to design our video players how we want them and used to implement creative features that we thought was cool. Such as, video players that change color, had custom themes, ID3 tagging, audio visualizers etc. Fun times!

There has been many years since I have worked on a video player. Writing this tutorial sure brings back a bit of those memories for me.

There are many libraries for video playback in Lazarus. They are listed here:
http://wiki.freepascal.org/Video_Playback_Libraries

Some of them are cross platform, some are not. From them, I found PasLibVlc to be easier and more relatable. Although it requires VLC Media Player to be installed in the system but the plus point is that you can also run your video player on any system you can install VLC on, such as, windows, mac or linux/bsd. I am writing this for Windows, but you can adopt it easily for your platform.

Many of you guys requested for this tutorial with our Contact page and Facebook page. So wrote this one for you. Hope it helps!

Step 1: Install VLC Media Player

As we are using VLC's library, we would need to have VLC player installed.
Get it from here: https://www.videolan.org/vlc/
Make sure you have the latest version installed.

Step 2: Prepare

Note: It is better to try it on Lazarus 32 bit, even if you are using 64 bit Windows. Things install easily on 32 bit Lazarus. I have tried with Lazarus 32 bit and it works. 64 bit might not work as expected.

Go to here: https://prog.olsztyn.pl/paslibvlc/
Scroll down to "Change Log" on that. You will find a link to a file something like: PasLibVlc_x.y.z.zip. Download the file and extract it to a folder named PasLibVlc. Copy the folder to C:\lazarus\components so that the contents are in the folder: C:\lazarus\components\PasLibVlc

If you go inside the folder, you will see many folders. Go to FreePascal folder, then double click PasLibVlcPlayer.lpk. It will launch Lazarus with a window titled Package PasLibVlcPlayer Vx.y.z.

Click Compile. Once finished, click Use - Install, click Yes. This will rebuild and restart Lazarus.

After restart, you should see a new tab in the top toolbar named PasLibVlc.

Step 3: Check Sample projects (optional)

You can find very useful examples on "C:\lazarus\components\PasLibVlc\FreePascal". To try something basic, I would recommend "DemoPasLibVlc" for checking out basic playback. Just double click "DemoPasLibVlc.lpi" and Run - Run (or F9).


Open a file and it should play. You will notice that it is slow and not responsive. To solve this, you can run the "DemoPasLibVlc.exe" outside Lazarus, from the project directory and it should run fine.

For more detailed example of what it can do, you can try "DemoPasLibVlcPlayer". Just click on the Editbox there, open a file and click play.

Step 4: Tutorial project

Now's the fun part, creating our own!

Start Lazarus.
Create a new Application Project (Project->New Project->Application->OK).

Resize the form a bit to make some room. Click on PasLibVlc tab on toolbar and draw a TPasLibVlcPlayer on the form. It will be named PasLibVlcPlayer1 by default. What a mouthfull! Change its Name property to vlcPlayer.



Set its akBottom, akRight Anchors to True.


Switch to General tab. Draw a TPanel. Position it at the bottom. This will have our buttons and controls.


Set all the Anchors to True except akTop.


Empty its Caption and set BevelOuter to bvNone.
Go to Additional tab on toolbar. Draw a TBitBtn. You can also use TButton, but TBitBtn gives us the ability to set an icon for the button. I have collected some icons to be used in this project from aiconica.net. They should be in the project download ZIP file.

Create TBitBtns for btnPlay, btnPause, btnOpen, btnOpenURL. Give them appropriate Caption and set their icons with Glyph property.


Go to Common Controls tab, and Draw 2 TTrackBars on the form, big one for position and smaller one for volume.


Name the bigger one trkPosition and smaller one trkVolume. Set Max for trkVolume to 200, Min to 1 and Position to 100. Set TickStyle for both of them to tsNone.

For trkPosition, set all the Anchors to True except akBottom. For trkVolume, set akBottom and akLeft to False and others to True.

Draw a TLabel somewhere on the form and Name it lblTime. This is to show the playing time.

Oh! I almost forgot. Go to Dialogs tab and place a TOpenDialog on the form somewhere. (Don't worry, it will not show on the form when run.) This will help us to show the Open dialog.

Now your form should look something like this:


Now, there is a draw issue when the form is maximized and restored again. So right click the vlcPlayer component and Choose Z-Order - Move to Front.

Now to fun part, the coding...
Double click the Play button and write something like:

procedure TForm1.btnPlayClick(Sender: TObject);
begin
  vlcPlayer.Resume();
end;

See? writing a video player is not hard after all. Play button code is just one line!

Switch to Form view (F12) and double click the Pause button and enter:

procedure TForm1.btnPauseClick(Sender: TObject);
begin
  vlcPlayer.Pause();
end;

Double click on Open button and enter:

procedure TForm1.btnOpenClick(Sender: TObject);
begin
  if OpenDialog1.Execute then begin
    vlcPlayer.Play(WideString(OpenDialog1.FileName));
    Caption := OpenDialog1.FileName;
  end;
end;

Double click on Open URL button and enter:

procedure TForm1.btnOpenURLClick(Sender: TObject);
var
  url: string;
begin
  url := InputBox('Media URL', 'Please enter media URL/MRL', '');
  if url <> '' then begin
    vlcPlayer.Play(WideString(url));
    Caption := url;
  end;
end;

We create an inputbox to get the media url from the user. We just see if the Input is empty. If not, we send it to vlcPlayer component to be played. That's it. That's all there's to it. You would be able to enjoy online streams, YouTube, online radio streams right on your video player! How cool is that!

Now select the vlcPlayer, go to Events tab from Object Inspector (on the left). We would create an event procedure for OnMediaPlayerLengthChanged. This would set the Maximum value for the seekbar (trkPosition) and would let us seek properly. So click OnMediaPlayerLengthChanged (you can resize Object Inspector or the column border if you can't see the whole name). Click the [...] button beside it and enter:

procedure TForm1.vlcPlayerMediaPlayerLengthChanged(Sender: TObject; time: Int64
  );
begin
  trkPosition.Max := vlcPlayer.GetVideoLenInMs();
end;

Now create a similar event for OnMediaPlayerTimeChanged and enter:

procedure TForm1.vlcPlayerMediaPlayerTimeChanged(Sender: TObject; time: Int64);
begin
  if trkPosition.Tag = 0 then // not dragging with mouse
    trkPosition.Position := vlcPlayer.GetVideoPosInMs();
  lblTime.Caption:=vlcPlayer.GetVideoPosStr('hh:mm:ss');
end;

This will change the position to show how much the media has played on the seekbar when it plays. We are checking "trkPosition.Tag" with "if trkPosition.Tag = 0 then". We would make trkPosition.Tag to 1 when the user is dragging trkPosition. Because we don't want the position to change while the user is seeking the position bar.

We could've used a variable for this, but trkPosition.Tag is convenient, so we can use it here. trkPosition.Tag can only have integer values, so we would set it to either 0 or 1.

To make it work let's set the Tag correctly. Select trkPosition and create an OnMouseDown event and enter:

procedure TForm1.trkPositionMouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  trkPosition.Tag := 1;
end;

Then create an OnMouseUp event and enter:

procedure TForm1.trkPositionMouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  vlcPlayer.SetVideoPosInMs(trkPosition.Position);
  trkPosition.Tag := 0;
end;

This should set the Tag correctly and manage the seeking (dragging the position).

Select trkVolume and create an OnChange event, then enter:

procedure TForm1.trkVolumeChange(Sender: TObject);
begin
  vlcPlayer.SetAudioVolume(trkVolume.Position);
end;

And... you are done! Now hit Run - Run (or press F9).

Video Player made in Lazarus with PasLibVLC (preview)

You can hit Open to open a media from your hard disk, or click Open URL button to open any stream URL to play in the player. For example, click Open URL and enter https://www.youtube.com/watch?v=YE7VzlLtp-4 and it should play it for you! Awesome!


You can do all sorts of stuff with it. You can also research on the player component. This is just a basic for this component. There are lots of other useful features. Maybe it can simplify your daily tasks somehow, who knows!

Download Sample Code ZIP

You can download the above example tutorial project's source code from here.
Or here.
Size: 630KB
The package contains compiled executable EXE file.

17 comments:

Unknown said...
This comment has been removed by the author.
Oby Wijaya said...

thank's before for your tutorial but.. can you give me that link to download "paslibvlc" because i tried to download from https://prog.olsztyn.pl/paslibvlc/ and http://sourceforge.net/projects/paslibvlc/ it's just show blank.

Adnan Shameem said...

Hi Oby Wijaya,
Thanks for reading. Here is the direct link to the PasLibVlc_3.0.0.zip download:
https://prog.olsztyn.pl/paslibvlc/download_src/3.0.0/PasLibVlc_3.0.0.zip
(In future there might be later versions available. Please try to download from: https://prog.olsztyn.pl/paslibvlc/ if possible. I got the link from below the "Change Log" heading.)
Good luck.
Regards.

allsoftwarehub said...

beautiful artciles thank you for sharing VLC Media Player 2018

armdass said...

hdvideoplayerdownload

Unknown said...

Does it still work? I can't get it to work, even the sample project does not play any file.

Bosse_B said...

I am trying to add buttons to advance the play position by -10 -1 +1 and +10 seconds but it will not work. Here is the code I added for the +10 button:


procedure TForm1.btnInc10MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
trkPosition.Tag := 1;
end;

procedure TForm1.btnInc10MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
trkPosition.Position := trkPosition.Position + 10;
vlcPlayer.SetVideoPosInMs(trkPosition.Position);
trkPosition.Tag := 0;
end;

What can be the reason for the failure to work, nothing really happens when I click the button...

mustak shaikh said...

best html5 video player

If you are looking for the best html5 video player for Wordpress plugins, we have collected the top options for your video site. We offer the best Wordpress plugins for your best html5 video player.

to get more - http://www.videoplayerhtml5.com/

Elstel said...

Wow, this article is good, a friend recently asked me about this, I will refer her to your post. html5 video properties

nice said...

nice

Incracked said...

I loved your article!! It has given me plenty to think about moving forward on my social media journey!
PUBG PC Crack

Editing People said...

All video downloader for social media to fast download all videos from websites online. Download all videos from social accounts like facebook, whatsapp, instagram, dailymotion and manymore with this all video downloader for social media account.
online video downloader

Unknown said...

Helpful blog.

Best Streaming Media Player

aarjav.asinfo said...

You are doing really nice work.....keep doing and sharing.Rocks Player

onlinecasinoview said...

CL 4K UHD Video Player - HD video player for android – App

CL 4K UHD Player- High Quality Video Player app allows you to watch your favorite movies, shows and other videos in Ultra HD quality. You can watch high quality videos from your device or SD card and stream from web. This app also works as whatsapp status downloader.

Install CL 4K UHD Player- High Quality Video Player on your android device and enjoy 4K ultra HD videos anytime, anywhere. HD video player for android

aarjav.asinfo said...

Are you fond of Movies?
Hurrah!! We bring you Online Subtitles functionality to enhance your movie experience. With Rocks Player, you can watch Multilingual movies with Online Subtitles functionality. Along with subtitle there are many other than this feature. It is an ultra hd video player, it can play hd videos along with subtitles. You can also search subtitles in this app. And also it can play dual audio videos. It is easily available on playstore and also free to download.
To enjoy online and offline subtitles, Install Rocks Video Player Now

Stefan said...

I really like your articles. Do you have an idea how to show a local webcam by PasLibVCL, as I can do in VCL directly via Media/openMedia ?

Thanks !

 
Copyright 2013 LazPlanet
Carbon 12 Blogger template by Blogger Bits. Supported by Bloggermint