Custom Video.js Bootstrap-based Player Controls With jQuery and/or Angular

Video.js is a pretty great javascript component for working with web video, supporting both HTML5 Media API standards and failover Flash video (because…. why not? I guess that is still a thing?) but it is a pretty self-contained API. The Video.js gods went to great pains to not rely on any third-party javascript libraries (like jQuery) in order to make sure Video.js is a viable option for almost any project and also to establish that they are smarter than me and probably you, too.

If you want to include Video.js in an Angular/jQuery project you certainly can. If you want to extend the Video.js UI with custom controls that rely on Angular or jQuery then there is nothing stopping you, but you’d have to get a solid handle on the Video.js UI framework to figure the where and the how. That is the problem this blog post is here to solve for you.

Let’s suppose you want to create a playlist from the Atom feed of a video blog, for some reason. And you want to create an HTML overlay on top of the video that will display the title and what-not, and provide some links to jump around the videos in the playlist. We’ll build this:

The project files can be grabbed from the github repository for this project here.

Read More

SVG Overlays for Google Maps Using Raphael.js

Remember that time you were thinking to yourself, “Google’s maps are great and all, but I can’t really add my own data in a rich, interactive way unless I use one of their underwhelming precanned visualization methods… If only someone wrote a blog post spelling out how to add my own using Rapheal.js.” Well here you go.

We’ll be building this: a styled map with a SVG map markers which consist of a circle and a text label that will reveal when the mouse hovers over the marker’s circle. It’s pretty trivial but makes an okay jumping off point for whatever your own ambitions for using SVG in this context might be. For data we’ll be grabbing a list of San Francisco bus stops from google’s Places API.

Feel free to clone the Github repo for this project here.

Read More