Up next in 10
One of the great advantages of Streamlit is the simplicity of its functions for displaying different types of media, such as images, videos and audios. Let's learn how to use them in a practical way and with examples.
Streamlit with Python: How to Display Images, Videos and Audios in Streamlit
Article:
💖 Donate and help us create more amazing content!
🙌 Every contribution makes a difference!
☕ Buy me a coffee: https://buymeacoffee.com/usandopy_
💖Support this channel
https://www.youtube.com/channel/UCpL2Gru508Z39oPqu1FIg4Q/join
⚡️ Connect with me on:
Instagram: https://www.instagram.com/pybeginners/
Twitter: https://x.com/joaofuti_
LinkedIn Newsletter: https://www.linkedin.com/newsletters/pybeginners-7267881715929415681/
Website: https://www.usandopy.com/en
Thread: https://www.threads.net/@pybeginners
Show More Show Less View Video Transcript
0:00
hello guys welcome back to the channel
0:02
John here So today we are going to learn
0:03
how we can display the image videos and
0:06
audio in our streaml application Okay so
0:09
this is a very
0:11
useful option that okay that streamly
0:13
give us uh how to display those things
0:17
Okay so we are going to learn how we can
0:19
display uh image audio and video in
0:22
streaml application Okay so one of the
0:24
greatest advantage of streamllet is the
0:27
simplicity of it function Okay for
0:28
displaying different types of media such
0:30
as for example image videos and audio
0:33
Okay so let's learn how we can use them
0:34
in price Okay by uh writing some
0:38
examples on of it So the first option
0:40
that we are going to use will be the
0:42
image option So in order to show some
0:46
image in streaml okay we need to do
0:49
something like this So let's say here
0:51
let let me change this title for example
0:53
like a displaying image displaying okay
0:55
now displaying media displaying media
0:58
displaying media okay I'm going to save
0:59
this thing and I'm come here so in order
1:03
to display some media in stream later
1:05
okay we need to do something like this
1:06
okay the first one that we are going to
1:08
use will be the image okay so this
1:11
function image function okay which is
1:13
this one okay st do image open and close
1:17
okay this function is used to display
1:19
image in the application Okay So you can
1:21
just you can adjust okay the size and
1:23
the cap the caption to the image So the
1:26
first thing that we need to do is okay
1:27
we need to find an image so that we can
1:30
display it Okay So I have some kind of
1:32
image here in my laptop So let me grab
1:34
one image and to show it Okay So perfect
1:39
I have one image here So which is this
1:40
image that is called shu Okay Is a GPG
1:44
format image Okay So in order to show
1:46
this image in my app I need to do
1:48
something like this Okay I need to come
1:50
here Okay So I need to show the
1:53
directory Okay Where the image is Okay
1:55
So let everything must be inside of
1:57
strings Okay So the image is in the same
2:00
directory Okay With my script which is
2:02
this
2:03
guyw.ph uh jpg Okay So let's do
2:07
something this Okay Let me
2:10
call
2:12
JPG I'm just I just need to save this
2:15
guy and come here If I refresh and uh
2:20
where is my media Oh okay good So this
2:23
is the image Okay this is the image that
2:25
is displaying Perfect So and apart of
2:28
this we can give also some option like
2:30
changing the width the width of the
2:32
image And apart of the w we can also add
2:35
some caption Okay for example say here
2:37
okay something like this Okay let me add
2:40
some caption In order to add caption I
2:42
just need to come here give some comma
2:44
and write something like this caption
2:46
Caption will be equal Okay Caption must
2:48
be a string Okay Let's
2:53
say
2:55
photo Okay Oh sorry I speak Portuguese
2:57
That's why I write most of the time I
2:58
write photo like this Okay Photo Save
3:01
this guy Come here And refresh And if we
3:05
come here as you can see down photo Okay
3:08
Apart of caption we can also change the
3:11
width of the image So in order to do
3:13
that I just need to come here give some
3:15
comma and let's say this width okay
3:19
width width will be equal for if I give
3:24
300 where is it oh it jumped outside
3:27
okay let me give 300 something like this
3:29
save and come here if I refresh boom as
3:34
you can see it changed the width okay
3:35
now it's showing more small like a
3:38
little picture okay so this is how you
3:40
can work with
3:42
uh image in streamllet Okay This is how
3:44
you can show the image Okay Now let's
3:47
say that you have one image which is
3:49
like coming from outside Okay Outside
3:52
source for like maybe from one website
3:54
or from some any source Okay So in order
3:57
to do that is very easy Okay So let me
3:58
come here Okay I'm just going to copy
4:00
this guy again I'll copy this and come
4:02
here down and boom paste here So in
4:04
order to show that uh picture that is
4:07
coming from outside Okay I just need to
4:09
remove this guy here And for if I come
4:12
here let me copy There is a lot of image
4:14
of Uzop Okay Of go Okay Let me copy this
4:18
guy I just go right click And if I copy
4:21
the copy link address no copy image
4:24
address I'm going to copy the image
4:26
address And oh go back here If I come
4:29
here if I paste I know that this is very
4:33
long Okay But no problem Okay Because
4:36
this we can always format Okay if I save
4:39
this now let me go there to our app and
4:42
let's refresh it Boom As you can see
4:45
it's showing the usop Okay this is how
4:47
you can show the image that is coming
4:49
from outside source Okay it's the same
4:51
thing You just copy the link here of uh
4:54
the image or if the image is in your
4:57
local machine you can just do something
4:58
like this Okay it's very easy
5:01
Perfect Now okay let me delete this Z
5:04
one Save and come back
5:06
here
5:08
Refresh Perfect Okay Stay on this one
5:10
That guy is wrong I didn't like this 300
5:13
Let's put 400 Save And if I come back
5:16
where is it Come here Refresh Boom
5:19
Perfect Okay Now the next thing that we
5:22
can try okay is how to display audio
5:26
Okay So in order to display audio to
5:28
integrate audio in our app is very easy
5:30
So we can come here just do that
5:32
something like this St audio open and
5:36
close and boom here is where we are
5:38
going to give where the audio is for the
5:40
audio is here okay I have this audio
5:43
called Maya is a kind of Nepalese music
5:46
uh song not music it's a nepalist song I
5:48
love this song too much so that's why
5:50
let's try it so Maya I just need to give
5:52
the name of the song
5:54
Maya MP oh no Maya is a video okay no I
5:58
have this song here chalain okay is like
6:01
this is a no this is a Indian song Okay
6:04
So let me say challenge something like
6:07
this Dot and never for forget the
6:09
extension of the m the song Okay This is
6:11
MP3 So let's put MP3 If I save this guy
6:16
now let's come back here If I refresh
6:18
boom As you can see the song is here
6:20
Okay for if I click
6:24
[Music]
6:29
here this is how the you can add a song
6:32
in your app
6:34
Okay I didn't want to play long because
6:37
of uh the license Okay I don't have
6:39
license for that song So that's why I
6:41
don't want to So okay but apart of that
6:43
okay you can also choose where do you
6:45
want the song to start Okay when you
6:47
play it's for do that is something like
6:49
that you can do something like this
6:51
start time and equal for if I want it to
6:55
start when it will be like 30 seconds
6:57
okay 30 seconds save then if I come
7:00
here and if I
7:03
refresh okay as you can see now it jump
7:05
directly into 30 seconds if I just click
7:11
here very this is how you can add song
7:13
okay are so kind of no formatting the
7:17
audio I don't know You cannot format the
7:19
audio but this is how you can work with
7:21
audio in streamllet Okay So the next
7:25
option that we can learn is how to
7:27
display a video in streamllet So in
7:29
order to display video in streamllet is
7:32
like audio So you just need to call
7:35
st.ide open and close kamir and here
7:39
inside okay the this st.v video okay it
7:41
allows you to display video directly
7:44
into the application Okay supporting
7:46
diverse formats Okay but the format that
7:48
I every time recommend okay to avoid the
7:51
errors in your app is MP4 which is the
7:54
easiest one and the better one So for
7:57
that let's do a m SD Uh underscore So I
8:01
have my video here This is one called
8:04
Maya.mpp4 So I just need to call it
8:07
Maya MP4 Okay And save In order to see
8:12
this guide let's come here and
8:15
refresh As you can see it's showing my
8:18
video here Okay So if I play
8:21
this this is a video okay of song like
8:27
that So you can also like jump into
8:32
any you can also
8:36
[Applause]
8:39
jump So guys this is how you can work
8:42
with media in streamllet Okay so these
8:44
options are so very useful You can make
8:47
use of them Okay so we'll stay here Okay
8:51
in the next video we'll learn more
8:52
stuffs about streaml Okay my name is J
8:56
Please subscribe to the channel If you
8:58
didn't subscribe give a like and see you
9:00
in the next video Bye-bye