A brief guide to a fun player
First, let’s see what I want to achieve:
The interface is quite simple. Most of the screen is taken up by video. At the top, there is space for the title, and on the right some buttons to control playback (
Stop, and the
volume). Still on the right, but further down, some buttons allow you to choose which video to play and possibly to select others via the YouTube ID.
It is a project designed as a demonstration, so I put the ability to view YouTube videos starting from two separate JSON files in the code. The first with the video IDs, the second with the URLs. Of course, you can choose your preferred method.
You can also download the code from this link: simple-youtube-player.c3p.
Running the project, the interface looks like this:
I need two functions to run when the page starts. With
LoadAPI, I import the YouTube bees into my project, as shown below:
I need another function to create the player and assign the events that I am interested in monitoring (i.e., being able to control the execution of the video through custom buttons).
Finally, I can create the actual video using the
createVideo function and passing the
iframeId as an argument. Here’s the code:
Using this code depends on the type of project and the framework. I use this function in my example project to pass some information to the main interface.
Since I have linked the YouTube player to the web page iFrame, I can create custom functions to use in my code. I can also have multiple videos on the same page, as long as they each have a different ID.
Play, pause and stop a video
Manage the volume of a video
Get the duration of a video
For example, function C3 is nothing more than the following:
Similarly, I can use JS in a “hidden” way to manage video playback.
Thanks for reading! Stay tuned for more.