Transcript
Hello friends. So, uh, YouTube has this feature of, uh, chapters in a video. Basically, often when you go to a video, you will be able to hover on the video timeline and see different titles of different parts of the video. And if you click, uh, on this action ribbon, you will see this sidebar with chapters. And this video will be able to more easily navigate to the part of the video that, uh, you are interested in. Particularly. Now, most often, these, uh, chapters are not automatic. The video creators actually type them in manually in the video description. So if you go to the video description, you see here I have the, uh, timestamps that I put manually and their titles. And in the video editor, it looks like this. Here I have the description. I reversed the video myself, and, uh, I put in the timestamps and their titles, and I actually implemented the same feature in super ails. So here I have, uh, my, uh, video that I embedded from vimo. And in the description I have these, uh, timestamps and I put them in the, in the sidebar so I can click on different, uh, timestamps and navigate to different, uh, moments in the video so that it is easier for you to find what you are looking for. Now, how can we add this kind of, uh, timestamps in the VM o player in a new Rails application? So first of all, I have, uh, created ER account and, uh, imported a video. And, uh, here in my description, I already put in the timestamps manually. Now, uh, I want to embed this video in my Rails application. So let me go and create a new post. A post can have a female ID and a description. Let's, um, copy with this description. I'll put it here. And, uh, the video ID will be actually the video embed Id, not just the id. So here is the video id and this is the embed, uh, uh, code, I guess. So if I click on the share embed, I will copy them, embed code, and put it in the posts, uh, show. So, uh, here in the video Id have the id then fashion mark H and the kind of, uh, other part of the code. So this is the like, full, uh, ID of the video. I will also put it in the video description or in the video vmo ID here create post. I've created the post. And, uh, as I've got this code here, I've got the video embedded. Now, let's, uh, make the part of the embed code dynamic so that, uh, each post, uh, can have a different video ID and different video will be embedded. I will have equals at post, uh, V id. Okay, I refresh this post and I have the same video embedded, but if I go and create another post with, uh, an invalid or an empty al id, you see the video isn't being Embedded. So let's go back to this post here. I have a video embedded. I've got the description and, uh, I want to interact with this player. So I want to add the custom buttons as I did, uh, here to go to different timestamps. Now, first of all, to be able to interact with this VO GS player, we need to use the player Gs, uh, library. We can actually see a link to it Here. We've got the script player Vimeo. Player js. Yeah, let's clean up this, uh, code around the I frame a bit. I think we don't need anything. Let's try live in just the iframe itself. Uh, yeah, okay. It looks, uh, bad because it takes up all the space in the page. Uh, yeah, but I think we don't need the script. Yeah. So without the script, everything works as before. Okay. Anyway, to interact with this player, there is this, uh, library that has all the documentation and we've got this, uh, package, uh, that we can install in our application. Now we are using input maps, not, uh, NPM. So, uh, the syntax to install, uh, the Vimeo Player Library in input map would be, uh, input map pin, and, uh, the same ID at Vimeo slash player. So let's say, uh, bin import map bin at Vimeo slash Player. You see if we go to input maps, we have pin display. Now let's create a stimulus controller, rails generate stimulus vmo. Let's go to the stimulus controller. VMO controller. And here I will say import, uh, player from VMO at player. Uh, now I'm going to, uh, wrap everything into this, uh, VM o uh, uh, controller. So div and, uh, data controller VM O. Okay. And, uh, within the VMware controller, we have the player that is the actual iframe. So on the iframe, we are going to have a data ephemeral target player, let's say data VM o target equals player. Let's define this target in our stimulus controller, static, uh, targets, uh, player and on connect, we are going to initialize this, uh, VM R player. We will say, uh, this player equals new player, this player target. Okay, let's, uh, see if, uh, we get any errors. Now I will open the console refresh, and if we don't Get any, any arrows, now let's try adding, uh, play button. So I will say play, and it'll be this player play. So, uh, we have this play defined in, uh, the player js. Here we have player play. Uh, let's try adding this button in our controller here. So I will have a button, uh, data action goes to VMO controller. Play action. The button name is play, and let's close the button. Let's see if it works. So, uh, I have this play button, and you see it actually starts playing the video. Now let's try playing the video. The moment the video loads, let's try move this play, play to the connect action, and let's see if it works. So I will refresh. You see, it tries to start playing and we get, uh, an error. You see, there's no video playing. We get this unhandled promise rejection because, uh, I think the browser doesn't allow us to autoplay videos, so that's nice. Okay, let's remove this play, play from the connect. Let's now try adding a button to go to a specific moment in time in the video. So we would have a button named, uh, let's say set current time, and it would use the set current, uh, time, uh, action from the Vimeo GS docs. So player set, current time. Uh, this player set current time to event target dataset time. And we would also want to prevent default event, prevent default. And I think we can also add this prevent default here because we have, uh, buttons. So there can be some unexpected behaviors from buttons except of, uh, this geo script action that we do expect. Um, now let's try adding buttons to go to different moments in time. So we need to have, uh, that data time in the button. Let's add the button. The action will be set current time, and we'll have data time, for example, 30 seconds and go to 0, 0 30. Another one will be go to two minutes. And, uh, 10 seconds it'll be, so two minutes and 10 seconds is, uh, 130 seconds. Uh, let's see if this works. Now I, uh, go back to the layer. I have, uh, these two buttons go to 30 seconds, go to two minutes, 10 seconds. And you see the buttons are clickable and evoke. So we managed to add some external controls to our player. Now going to the cool part of turning of pause in this text and turn these, uh, timestamps into these kind of buttons. First of all, this text doesn't look very readable. So let's, uh, go to our post partial where we have this post description rendered and it'll have simple format, post description. Okay, now it looks, uh, more readable. And now we need to pass this text and, uh, turn these, uh, uh, timestamps into buttons. So, uh, I'm not going to reinvent the wheel. I already have, uh, written a script for this. So, uh, it would, uh, look through the text, uh, find this kind of, uh, timestamps and turn them into buttons. So, uh, here is the example of the button code. I will put it into application helper timestamps to buttons. And, uh, let's, uh, add this timestamps to buttons around the simple format post description. Let's see if it works. Okay, so it does add the buttons, but it is not sanitized. So let's try adding like HTML safe. And now these are actual buttons. Uh, they're not clickable because, uh, the post partial is not within the data controller VMware. So they'll have to put it, uh, inside here. And, uh, now let's try looking around and you see, go into different moments of the video works. So, uh, wonderful. We learned, uh, the basics of using the vimo just player. And, uh, uh, we added this, uh, helper to pass a text for specific projects and turn the projects into some H TM L buttons. That's basically it. Thanks for watching.
0