<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.
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…
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.
The only problem is that when you try to use Firebug, WebKit inspector, IE Developer Tools, or Opera Dragonfly, you get tons of declarations. Ever seen something like this?