Mother’s Finger Cookie

by Thai on June 26, 2010

My wife pointed this out at Zion’s market and I thought that it might be…tasty.

JW HTML5 Player Plugin for WordPress

by Thai on June 13, 2010

This is a plugin for WordPress and it will allow you to post your video with JW’s HTML5 player.  It’s just an early release to utilize HTML5′s video capability. The script has been tested with Firefox 3.6.3, Safari 5, and Chrome 5.03.  I also tested the plugin under WordPress 3.0 RC3 so it’s ready for the next version.  Browsers that don’t support HTML5 video’s tag will fallback to the Flash player.

08-23-10
If you have the jQuery lightbox plugin, this plugin will have issues with it because the lightbox script conflicts with JW’s player. Due to the nature of lightbox, it’s loaded with all of WP’s pages. I will look into this and work around it.

08-16-10
Re-wrote the way the player’s code is initialized. It will auto detect the plugin’s directory for the skin and swf file.

08-08-10
I re-wrote the plugin so that it’s cleaner and meaner. Namepace collision shouldn’t be an issue since I used prefixes for the functions and it’s wrapped in a class wrapper. I didn’t know loading JS files was going to be a huge hurdle with WP. There was barely any resources online and it seems like most devs had the same issue. Now I’m a little wiser about the process, I think I’m going to help out others on Stackoverflow. Please be warned that this is an early build so let me know of any bugs. The plugin is now 0.0.4!

08-02-10
Fixed so that it shouldn’t load actions in the Admin area and jQuery’s library is loaded directly from WordPress’s directory. It’s not a major update but a little something something.

08-01-10
Reverted the skin’s xml to the original file because the minify one was causing issues with IE.  One feature that I like about the player is displaying a playlist and I’m thinking about ways to get it going. I’m going to play around with the possibility of an admin panel.

07-27-10
Fixed an issue with how it was loading the skin.  PHP generates a JavaScript file and detects the path to the xml skin and swf files under the plugin’s folder.  It sorta auto detects your WP installation directories.  The script assumes that the “wp-content” folder lives under the root of the domain.  I’ll figure out a better way to detect it but for now it’s a fix.

07-25-10
I had to rework the loading of jQuery to accommodate WP’s final launch.  I must admit that it’s getting sweeter. I fixed the loading issues which Marc pointed out and it’ll load jQuery before the other dependent files.  This plugin is just to demonstrate Longtail’s new player and the neat things you can do with HTML5.  I’m excited by all the things that people are doing with it so being able to get positive feedback is one reason why the web community is an outstanding group of people.

Updates
NEW Bug Fix for WP: Only loads with shortcode
NEW Bug Fix for WP: Shouldn’t load in Admin
NEW Bug Fix for IE:  Works in IE again
NEW Bug Fix for WP 3: jQuery library loads from WP directory
NEW Bug Fix: Fixed issue when loading the player’s skin

Working On
-Autoplay
-Volume control on autoplay
-Wordpress backwards compatibility
-Update automatically via WordPress’s SVN
-Display poster
-Display playlist for videos

Plugin Features
-Only load dependencies when used by shortcode
-WordPress backwards compatible(compatible with 3.0)
-IE Friendly

Installation
1. Unzip the goodies and upload the folder to your ‘plugins’ folder under the ‘wp-content’ directory.
2. Activate it via the Plugin Admin’s area or upload directly within WP’s admin’s CP.
3. Use the shortcode in your entry to post the video.

Source File
To insert your video in the post just have to upload a video with the Media Manager and copy the source from the Link URL field.  If you can’t increase the upload size for WP, then upload your video with an FTP program and link it that way.  The next version will support other formats but for now you can upload MP4.

The Shortcode
To embed the player, add this with your desired dimension in your post.  By default the plugin will set it to 480 x 320.

  1. [jw_html5 src="url/to/your/video.mp4" width="720" height="480"]

It’s as simple as adding the video URL to the shortcode and setting the dimensions.  If you have any issues with the plugin please email me or comment your issue and I will walk you through it.  Check back for more updates!

Google vs Apple vs Adobe

by Thai on May 20, 2010

One of the many reasons why technology doesn’t get to where it should be is because of lawsuits. Nobody really benefits from it. I don’t think they really know why they’re against each other at this point. One key aspect of any smart business is relationships with other businesses. It is the bridge that will allow you to expand your product effectively through portals you never thought possible. Pretty much like the buddy who comes by to help you move for a case of beer. He does it for the beer and he knows it’ll make you happy. I live in a fantasy world but I’m allowed to dream.

Teddy’s Daily Ritual in a Pie Chart

by Thai on May 12, 2010

I don’t have to wonder what my dog does all day because he leaves a trail everywhere he goes. Sort of like footprint impressions on sand. He’s quite an artist and he seems to always come up with something breathtaking.

Digital Painting of Calla Lillies

by Thai on May 9, 2010


Made this for my wife because she’s the best doggie mommy ever.

Generate a Playlist for HTML5 Video

by Thai on May 4, 2010

I wanted to script a playlist generator for HTML5 without using jQuery and this is what I came up with. What it does is read files from a directory and outputs it in JSON array. It’ll pass the values to JavaScript and with a bit of DOM magic, set the MP4′s path to HTML5′s player. I could’ve easily built the front end with jQuery but I wanted to see the gears of HTML5. If you don’t care about performance then use PHP’s glob() method to find files in a directory. I also added two JS functions from Apple’s dev manual. Sometimes you don’t have to reinvent the wheel.

  1. <?php
  2.  //Grab the files from a directory
  3.  $dir = "vids";  
  4.  if(is_dir($dir)){  
  5.      if($dd = opendir($dir)){  
  6.          while (($f = readdir($dd)) !== false)  
  7.              if($f != "." && $f != ".."){  
  8.                  $files[] = $f;
  9.                          }
  10.      closedir($dd);  
  11.      }
  12.  }
  13. //Create JS’s header     
  14. header("Content-type: text/javascript");
  15. $file = array();
  16.  
  17. foreach($files as $key => $val){
  18.        
  19.         //inserts the val into the array
  20.          $file[$key] = $val;
  21.  
  22. }
  23.  
  24.  
  25. //creates json obj with the array
  26. echo "var obj = ".json_encode($file).";\n";
  27. ?>
  28.  
  29. function playThis(e){
  30.        
  31.     //prevent the default from happening
  32.         e.preventDefault();
  33.     var myVideo = document.getElementsByTagName(‘video’)[0];
  34.         //grabs the path to the video
  35.     var newSource = this.getAttribute(‘href’);
  36.    
  37.     //set it to video src
  38.     myVideo.src = newSource;
  39.     myVideo.load();
  40.     myVideo.play();
  41.    
  42. }
  43.  
  44. for(i in obj){
  45.         //create and pull all the elements to manipulate
  46.         var text = document.createTextNode(obj[i]);
  47.         var list = document.createElement(‘list’);
  48.         var href = document.createElement(‘a’);
  49.         var bullet = document.createElement(‘li’);
  50.         var output = document.getElementById(‘output’);
  51.         var all_links = output.getElementsByTagName(‘a’);      
  52.        
  53.         //add the link and set the path href’s attribute
  54.     href.innerHTML= "<a>" + text.nodeValue + "</a>";
  55.         href.setAttribute(‘href’, "vids/" + text.nodeValue);
  56.     //append everything together
  57.         bullet.appendChild(href);
  58.         list.appendChild(bullet);
  59.         output.appendChild(list);
  60.     //add playThis function to each link
  61.         all_links[i].addEventListener(‘click’, playThis, false);
  62.  
  63. }
  64.  
  65.  
  66. // listener function changes src
  67. function myNewSrc() {
  68.  
  69.     var myVideo = document.getElementsByTagName(‘video’)[0];
  70.     myVideo.src="link/to/your/video.mp4";
  71.    
  72.     myVideo.load();
  73.     myVideo.play();
  74.  
  75. }
  76.  
  77. // function adds listener function to ended event
  78.  
  79. function myAddListener(){
  80.  
  81.     var myVideo = document.getElementsByTagName(‘video’)[0];
  82.     myVideo.addEventListener(‘ended’,myNewSrc,false);
  83.    
  84. }

You have to place the JS source tag at the bottom of the markup otherwise it won’t parse properly. It’s just good practice to load your scripts at the bottom of the document. You can also load it by creating an init() method if you want to be really nasty. I’ve set this page up so that it fits snug with the iPad’s screen width. There are ways to have fallbacks so that it degrades to Flash but that’s outside the scope of this write up. NETTUTS goes over it a bit.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width" />
  6. <title>Generate HTML5 Playlist with JSON</title>
  7. <style type="text/css">
  8. #player {
  9.  padding-top: 6px;
  10.  }
  11. #output{
  12.         display:block;
  13.         width:480px;
  14.         height:220px;
  15.         background-color:#CCC;
  16.         color:#000;
  17.         padding:6px;
  18. }
  19.  
  20. #output {width:350px; height:200px; background-color:#CCC;}
  21. #output ul, li{list-style:none;}
  22. hgroup{list-style:none;}
  23.  
  24. </style>
  25. </head>
  26.  
  27. <body id="index" class="home" onLoad="myAddListener()">
  28.     <header id="header" class="vid">
  29.         <div id="logo"><h1>Your Sexy Logo Goes Here</h1></div>
  30.     </header><!– /#header –>
  31.    
  32.     <aside id="featured" class="body">
  33.         <article>      
  34.             <figure>
  35.                 <video src="vids/video.mp4"
  36.                    controls="controls"
  37.                    id="player"
  38.                    poster="your_logo.jpg"
  39.                    height="480" width="720"></video>
  40.             </figure>
  41.             <hgroup>
  42.                 <h2>Video loading playlist</h2>
  43.                 <div id="output"></div>
  44.             </hgroup>
  45.                 </article>
  46.     </aside><!– /#featured –>
  47. <script src="getPlaylist.php"></script>
  48. </body>
  49. </html>

Check out the working sample to see how it’s set up. You can only view this in Safari and Chrome but maybe by 2049 HTML5 will be fully implemented. I don’t think HTML5′s video will mature anytime soon, but it doesn’t hurt to see what the future holds. It has a lot of catching up to do if it wants to out do Flash.


Flash Video on Mobile Devices Thanks to Skyfire

by Thai on April 29, 2010

Flash Video is now on Android OS

I guess Flash made it to the Andriod and it’s in the beta state. A huge chunk of the web experience is now possible. It’s not perfect but it’s a great start. The best part is when Skyfire detects a viewable Flash video, it’ll notify you or you can click on menu to see if it’ll play. What I notice is that it’ll pull the video if your video’s source is rendered in the html. Small step for Android, giant leap for Flash.

Hot Sex Now Card

by Thai on April 7, 2010

I saw this card and thought it was a little too straight forward ,but the inside gave it a twist.

Detect iPad’s Safari Browser and Redirect to HTML5 Page

by Thai on April 4, 2010

I’m upset that Apple decided not to support Flash for the iPad and instead embraced html5 as their weapon of choice to implement video content. I wasn’t impressed with html5 until I saw the guys at Google ported Quake 2 over from Java. The potential dawned on me. I guess using the native language to handle the DOM isn’t so bad. You just have to roll up your sleave and tango JS into some bedroom boom boom. After all, parsing the native language is faster.

The server side script has to detect the user agent sent by the browser and this is what it’ll send in the http request.

  1. Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

A simple redirect with php’s header() method will send the client to the page according to the device’s browser or OS. I recommend that the script should look for stuff where it’s specific to the device. You don’t want to serve them your iPhone site if you’re checking for “mobile” in the request.

  1. <?php
  2.  
  3. $useragent = strtolower($_SERVER[‘HTTP_USER_AGENT’]);
  4. preg_match(‘/ipad/’, $useragent, $browser);
  5. $device = $browser[0];
  6.  
  7. function get_agent($string){
  8.         if($string == ‘ipad’){
  9.         //redirect browser to the html5 page
  10.         header(‘Location: http://www.yoursite.com/link/to/page.html’);
  11.         exit();
  12.         } else {
  13.         $foo = ‘Unidentified device’;
  14.         }
  15.         return $foo;
  16. }
  17.  
  18. get_agent($device);
  19.  
  20. ?>

This skeleton of html5 markup has the device’s viewport value set to a constant so that it fits the viewport of the current device such as the iPad. The controls can be skinned with Javascript and CSS to give it some DOM visual effects.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width" />
  6. <title>HTML5 Video!</title>
  7. <style type="text/css">
  8.  
  9. #player {
  10.         padding-top: 6px;
  11.  }
  12.  
  13. aside, header, footer, body{display: block;}
  14.  
  15. </style>
  16. </head>
  17.  
  18. <body id="index" class="home">
  19.     <header id="header" class="vid">
  20.         <div id="logo"><h1>Logo</h1></div>
  21.     </header><!– #header –>
  22.    
  23.     <aside id="featured" class="body">
  24.         <article>
  25.             <figure>
  26.                 <video src="http://www.site.com/your/video.mp4" controls="controls" id="player"></video>
  27.             </figure>
  28.             <hgroup>
  29.                 <h2>Featured Video</h2>
  30.                 <h3><a href="#">A vid</a></h3>
  31.             </hgroup>
  32.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris massa, tempus in eleifend id, sagittis ac urna.</p>
  33.         </article>
  34.     </aside><!– #featured –>
  35. <footer></footer><!– #footer–>
  36. </body>
  37. </html>

So that’s the basics on how to get your site to figure out the user agent and then take them to a page that’s html5 formatted. You can view the source on the working sample in Safari or Chrome to see the structure. It’s missing other elements but the W3C Editor’s Draft outlines all the new tags. Some of the features I look forward seeing developers take advantage of will certainly give Flash reasons to fine tune their song and dance.

Rotate Header Based on Time of Day

by Thai on March 16, 2010

I made this because I’ve seen a php tutorial on NETTUTS that’s pretty cool and thought of a client side version just for the hell of it. It basically changes the header based on the time of day it is. You can use it to change your site’s logo too. The script is insanely simple and didn’t really need commenting. There’s a default class so that if the user decides to turn off Javascript, it’ll fall back to your default image.

  1. $(document).ready(function(){
  2.         //create date object and get the time
  3.         var date = new Date();
  4.         var time = date.getHours();
  5.        
  6.         var noon = 12;
  7.         var midnight = 24;
  8.         var dinner = 18;
  9.  
  10.         //cache the header div
  11.         var header = $("#header");
  12.        
  13.         if(time < noon ){
  14.                 header.removeClass("default").addClass("morning");
  15.         }else if(time <= midnight && time >= dinner){
  16.                 header.removeClass("default").addClass("night");
  17.         }else{
  18.                 header.removeClass("default").addClass("noon");
  19.        
  20.         }
  21. });//closing tag for jQuery contructor