My video player for work has evolved! I was initially asked to create a video player that only needed to support a few videos and have it completed in a couple of days. So, I handcoded a video library using jQuery, PHP, JavaScript, CSS and HTML.

I recently had time to work on it again, so I turned a WordPress media library into a smart video library.

How can a video player be smart?

First of all, to add a video to this page, you simply add a video to the media library. Give your video a title, description, and upload a Featured Image to use as the image still for the player.

Once it’s uploaded, my PHP loops through the attachments and gets the necessary variables, such as video title, description, ID, and poster image, as string values and puts them into two arrays, one for the regular videos and one for the leader videos. At the same time, my PHP uses the values to construct the page.

Next, my PHP converts the arrays to JavaScript so that my jQuery can handle button clicks, such as viewing the next and previous rows of videos, done by incrementing/decrementing a current-row variable and multiplying and then adding it to the max-row variable. Thus after the initial page load, there are no more calls to the server.

In other words, as soon as you upload the video (and only videos), my PHP and then jQuery will pull values from the arrays to generate the first video in the slideshow, which will always be the most current video.

Self-Assigning Thumbnail Galleries

Say goodbye to tags! I used regular expressions to look for “Leader Video:” in the video title to determine which thumbnail gallery it should be a part of. I also omitted the search parameter from the title before entering the values into the array so that the matching and replacing were done only once per video title.

Self-Updating Video Counter

By counting the lengths of each array and updating a current-row variable, my PHP and then jQuery will tell you which numbers you’re looking at currently and how many total videos there are. (Thanks Jane Koltracht, my extremely brilliant coworker, for coming up with a super clear way to label the counter and for recommending its placement! Her title is Instructional Designer, but it should be Jill of All Trades.)

Self-Disappearing Navigation Arrows

Thanks again to Jane for suggesting that I put the navigation arrows close together because initially, I really liked the symmetry but knew functionally it could be missed especially after deciding on the disappearing (instead of disabled) navigation arrows run by my jQuery.

Next will be in what ways does the user want to browse and filter the videos, what’s the best way to visually organize a long list of words to be a better archive, and more.

Also, I included which part of my code was doing what because obviously there’s a better way and I appreciate any help in finding it. Thanks!