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…

MediaElement.js – a magic unicorn HTML5 video library

September 22, 2010 | JavaScript, Video | 29 Comments

I”ve posted before about HTML5 video and based on what I found I released an HTML5 <video> framework and player called MediaElement.js. But I never got around to explaining the logic behind the new library so here it goes:

The Problems with HTML5 <video>

(1) Codecs

It has been well documented that browsers supporting HTML5 <video> don’t support the same codecs. Here’s the current breakdown of proposed(*) codec support including mobile browsers and plugins.

<IE9 IE9 Firefox Safari Chrome Opera Andriod iOS WP7 Flash Silverlight
H.264 X X X X X X X X
OGG X X X
WebM X* X X X X*

Continue Reading…

Simple Cross-Browser HTML5 video with a single H.264 file and fallback options

June 6, 2010 | JavaScript, Video | 10 Comments

At first glance, the promise of HTML5 <video> seems awesome. Just a simple

<video src="myvideo.mp4" controls></video>

and you’re done right? Not quite. In reality there are all kinds of browser inconsistence that make this impossible. Here’s a run down of the problems:

1. Older browsers don’t support <video>

Only the most recent versions of the big five (Firefox, Chrome, Safari, IE, Opera) support <video>, so you have to have a fallback solution of some kind if you want to use <video> and still support your audience. Continue Reading…

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.