Video gallery in Business Catalyst

[SummumBonum000]

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/

[thetrickster888]

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.

[thetrickster888]

I might have led you astray with popcorn.js as i've been testing it out and it's good for issuing javascript events in time with videos but it's not that great for a gallery player.  I'll look some more and find a better solution.   But since the hardest thing would be to get the Thumbnail URL for Vimeo based on the VideoID (you'd have to hit the api for it) you can easily get your thumbnail URL at http://vidthumb.com

[thetrickster888]

So, yea. I think you're best bet would be to use http://videojs.com which is an HTML5 Video player that supports Youtube videos out of the box and you can use Vimeo videos with this plugin: https://github.com/eXon/videojs-vimeo  You'll need to workup some javascript to replace the SOURCE child element in your main VIDEO element and play the video when a user clicks the link/thumbnail in your video list below the player but it's totally doable with javascript.

[SummumBonum000]

Thank you for the info. I am not experienced with javascript, but I will

use this project to start to learn.

On Thu, Jul 18, 2013 at 11:20 PM, thetrickster888