Video gallery in Business Catalyst

Question

Hello everyone. I really like how this video gallery looks on this site. What should I study or look for in order to implement something like this that would work for vimeo or youtube videos? I appreciate the help.
http://crooksncastles.com/videos/

Answer 1

Your best bet might be to use an HTML5 player framework that lets you use vimeo and youtube videos like http://popcornjs.org/
Using popcornjs you might be able to take a lot of the headache out of building all this stuff manually since it's HTML5 ready and works with youtube videos and vimeo videos.
Getting the thumbnails on the fly might be harder than it's worth if you don't have a lot of videos or need a client to simply add a video web app item by URL or ID of the video.  Youtube thumbnails are easier to get as it's just a URL you can plugin to your code but for Vimeo you have to go out to the Vimeo API via javascript and parse the JSON it returns to get the video URL to use in your "img" preview.
Check out this URL: http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/7100569
If you're comfortable with javacript and parsing JSON to get at data you can build this with a little effort.  It's too much to give you an example but it can be done with javascript and the popcornjs player pretty easily. Check out the popcornjs docs-- popcorn also makes it easy to sync events with a video. For instance, you could show some accompanying text like a closed caption based at different times during the video, 2 seconds in, 30 seconds in, whatever.