Pinbox.js – Photos Then and Now (jQuery plugin)

November 2, 2011 | JavaScript | 6 Comments

With the help of a colleague, I’m gathering images of an area of Dallas, TX just east of downtown around the campus of Dallas Theological Seminary where I work. I wanted to make the photos interactive like the animated GIF you see here.

Live Demo Download Code

Code Explanation

Continue Reading…

Native Fullscreen JavaScript API (plus jQuery plugin)

October 20, 2011 | JavaScript | 91 Comments

HTML5 <video> is great, but when it was first released, one of the big complaints was that it couldn’t do true FullScreen like Flash. Thankfully, this is changing and native FullScreen support is coming to most browsers in the next few months (no word from the Internet Explorer team Update on IE below #5))

The API is still heavily in flux especially since the W3C joined in this week. I spent some time working through the differences to implement FullScreen in MediaElement.js HTML5 video player, and it’s working great in Safari 5.1+, Chrome Canary Chrome 15+, or Firefox Nightly (go to about:config and set full-screen-api.enabled= true) and scheduled for Firefox 10. Below I’m going to try to explain how things evolved, where we are today, and then some code that you can play with.

Simple Demo Video Demo Continue Reading…

Getting Counts for Twitter Links, Facebook Likes/Shares, and Google (+1) PlusOnes in C# or PHP

June 7, 2011 | .NET, JavaScript, PHP | 81 Comments

I am working on a project where I need to know the number of social shares on Facebook, Twitter, and Google +1 (plusone). Facebook and Twitter make this easy with a simple URL that returns clear JSON data, but Google has not offered an official way to do it yet. However, I found someone who tracked down how to do it using Google’s JSON-RPC API, and I’ve repackaged them together in ASP.NET and PHP for anyone who wants to give it a try. Continue Reading…

bib.ly – ASP.NET MVC Url Shortener for Bible References

April 1, 2011 | .NET, Bible Tools, JavaScript | 60 Comments

Last week, I turned a URL shortening website called bib.ly which is a play on the word “Bible” and the popular URL shortener bit.ly. It has two main functions: A Bible URL shortener and a Bible version popup detector for any website. Continue Reading…

ffmpeg Settings for HTML5 codecs (h264/mp4, theora/ogg, vp8/webm)

January 5, 2011 | Video | 21 Comments

This is just a quick tip for people encoding video for HTML5 (and using sweet HTML5 players like MediaElement.js). Go download a copy of ffmpeg, and if you’re on Windows, use this guide to set it up. Then use the following commands to create H.264, WebM, and Ogg videos, along with an image you can use as a poster.

REM mp4  (H.264 / ACC)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libx264 -vpre slow -vpre baseline  											-g 30 -s 640x360 %1.mp4
REM webm (VP8 / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libvpx  							-acodec libvorbis -ab 160000 -f webm 	-g 30 -s 640x360 %1.webm
REM ogv  (Theora / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libtheora							-acodec libvorbis -ab 160000 			-g 30 -s 640x360 %1.ogv
REM jpeg (screenshot at 10 seconds)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -ss 00:10 -vframes 1 -r 1 -s 640x360 -f image2 %1.jpg

I save this as a batch file and then just drag and drop videos on it to get everything ready for HTML5.

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.