Python Web Apps that Fly with CDNs Transcripts
Chapter: Large Content
Lecture: Demo: User-generated content in app
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We saw that the videos are coming through the CDN, which is excellent, but let's update our code here, specifically our HTML, to make it play.
0:10
So here's what we're doing currently. We just say go to this video player section and just embed, just do the standard YouTube embed.
0:20
Now if we look over at the video model, it has a self-hosted flag. Now what I've done is I've already copied those IDs and said if it's one of the IDs
0:30
that we just uploaded, we're going to consider those self-hosted. Otherwise, we don't have a copy or permission to own a copy. So what we're going to do is just play that from YouTube. So we can use that here. This is just Jinja syntax. We'll say if video.selfhosted, then we're going to do something else. We're going to do this. And at the end, we're going to say end if because, yay Jinja.
0:58
Over in this self-hosted section, what we need to do is add a video HTML tag. Now it says source, we don't want to put source here.
1:07
We could, but we can be a little bit more explicit by setting a list of sources
1:12
because maybe we want to offer MP4, WebM, MOV, all the different formats.
1:19
And then the player can pick based on the browser that's watching what the best matches.
1:25
Over here, we also want to have a couple things that are similar to this. So we had auto playing and those aspects.
1:33
So we can do that here as well without YouTube, we just say auto play and say controls because
1:38
we want pause play type of things to show up for the user. And finally, we could add a poster. Let's add preload as well. Auto.
1:48
So that might pull it down a little bit quicker and we have a poster.
1:53
And the poster is going to be the image or the thumbnail that can show before the video loads or starts playing, which would be a nice touch.
2:01
We already have that from our section over here, our shared video image. It looks like this.
2:11
That's the thumbnail out of the other CDN, the static file CDN. So we can put that in here. Now for this section, we need to have a source.
2:21
Not all caps. And the source consists of the type that we're offering up, again, like mp4, webm, or whatever,
2:28
and then the source, the actual video file. So remember, the example that we had before was this one, where we tested out for that particular video,
2:39
and that part right there that's highlighted, that's actually the ID of the database. So it's just video.id, which is super easy.
2:51
All right, well, one other thing that's nice to put here just in case is a message if for some reason the person watching the video,
3:00
their system doesn't support it. We can put a message like this, sorry, it seems your browser doesn't support any of our formats.
3:06
And then finally, one other thing I just wanna throw in here real quick is just a div that has a style text align center and background color is black.
3:18
Now, of course we should use CSS for that, But just for the moment, let me put it like this. Let's see how this works. I'm gonna restart our app.
3:26
Go back to the ngrok version. Remember, ngrok's running, our app is running, all those things. Let's go test it out.
3:35
First of all, let's test it on one that we don't control. This one we don't. The YouTube one is playing, great. Let's try again.
3:43
But now, moment of truth. Let's see, do this one with Dr. Becky. Okay, this is looking pretty good. We have our poster and it's starting to play,
3:54
although for some reason it's huge, but look at that, it's playing. Ooh, and here's our controls. Amazing.
4:02
Well, let's do one more real quick thing here. We'll just throw in a style width, 100% like that. Hopefully that'll fit it to the screen.
4:16
There we go, that's looking better. Doesn't look all sorts of wacky. So it's not playing, so this is the poster,
4:21
but if I hit play, there you go, notice, there's no sound or action for a second, but excellent. That's our video playing out of the CDN.
4:32
If we copy the video address, turn it down a little, over here you can see that's coming out of the CDN just like you'd expect.
4:40
Excellent, let's go test another one. By the way, Dr. Becky's awesome, you should check her out. She's a great YouTube channel.
4:46
A lot of cool science plus Python. All right, over here, let's see. What about this one with Brian and Cecil? Boom, just like that, amazing.
4:57
That was the first experience with the CDN too. We hadn't touched that one in any way before. All right, so looking pretty good.
5:06
What about, pick one more, but about this one. These are going great. Now let's see if I can seek around. All the way to the end here.
5:19
Because it broke that up in those five megabyte chunks, it's just like, well, you're getting this little chunk here at the end. Beautiful. Excellent.
5:29
Okay, well, it looks like our self-hosted content is working surprisingly well. Let's try one more time. Let's hit one that we've done before,
5:37
so see how quickly it loads. Instantly. Like the poster just flickered for a second. And it's like, nope, video is playing. Beautiful.
5:46
We can also go back to the control panel for bunny.net, go to our storage zone. Now here you can see, this tells you how much size,
5:59
let's go to the pull zone rather. You can see we've had 0.15 gigabytes of traffic, 69 requests, that might sound like a lot,
6:10
But remember, the videos are broken up to a bunch of small pieces. So it's not one request per video, and 81% cache hits already.
6:20
That's really excellent. So there you have it. That's how we host this large content in a storage zone link CDN in front of it, and then serve it up.
6:31
And to me, like, I'll play with this, see how it works for you. Remember, this is still over in grok.
6:38
When I go here and I click on one of these YouTube ones, it spins, spins, and then starts going.
6:44
But when I click on one that we put in here, like this one, instant. There's no spinny. There's just goey. So it's really, really good. Very quick.
6:55
I feel like if you're beating YouTube, you're doing all right. So there you have it. That's how we set this up.
7:02
And I'll, of course, put this in source control. You can take it and run with it. But it's pretty straightforward, isn't it?