Saturday, December 3, 2011

Preventing HTML5 autobuffer with Javascript

I was looking at creating an HTML5 video website the other day but was frustrated by the fact the browsers seem to automatically download the video when the page was opened. This seemed like a waste of bandwidth especially if you have to pay for it and your site goes viral. My solution so far was to created the following script to help prevent excess bandwidth charges.

Copy the code below into a script tag in the head of your HTML document and copy the second section into a script tag at the end of the BODY. Make sure to set the style width and height of your div tags with videobox class.

function setVideo() {
        obj = this.firstElementChild;
        //Remove the extension from the filename.
        vbase = obj.src.substr(0, obj.src.lastIndexOf('.') );
        
        var vbox=document.getElementById(this.id);
        vbox.style.visibility='visible';
        var vid = document.createElement("video");
        //Transfer the size information from the image to the video.
        vid.style.width = this.style.width;
        vid.style.height = this.style.height;
        vid.controls="controls";
        vid.autoplay="autoplay";

        //Remove the onlcick action and image.
        vbox.onclick = null;
        vbox.innerHTML='';

        var vidsource;
        //Duplicate the following 4 lines for each available video source/format.
        vidsource = document.createElement("source");
        vidsource.src=vbase+'.mp4';
        vidsource.type="video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"";
        vid.appendChild(vidsource);

        vidsource = document.createElement("source");
        vidsource.src=vbase+'.ogv';
        vidsource.type='video/ogg; codecs="theora, vorbis"';
        vid.appendChild(vidsource);

        //Add the video to the document.
        vbox.appendChild(vid);
}
function html5Videos() {
        //Find all div tags with a class name of videobox.
        var x=document.getElementsByTagName("div");
        for( i=0; i < x.length; i++ ) {
                if( x[i].className == 'videobox' ) {
                        x[i].onclick = setVideo;
                }       
        }
}



html5Videos()


This is just a rough draft that I am sharing in hopes that others will find it useful and make improvements. I've tested in on the Android 2.3 browser, iPod Touch OS 4.3.3, Google Chrome 15.0.874.121 for Linux, Firefox 3.6.24.

Sunday, April 24, 2011

Mouse like Numberpad

The other day my number pad stopped working. Then I notice it was acting like a mouse and I remembered that I'd used this once before a long time ago. It can be handy if you are setting up a computer or trouble shooting things and don't have a mouse. Usually I prefer the number pad to act like a number pad and not a mouse. Here is how to toggle it back and forth press ctl-alt-numlock.

Monday, October 11, 2010

Link Shrink Adfly Service?

Has anyone else used the Adf.ly URL shrinking service before? Looks like an interesting service though it does cause you an extra click for users to get to you link. I found it as a referral in my Google Analytics data.

Thursday, October 7, 2010

Panoramic Eklutna Lake Mug

Just went on a bike ride along the Eklutna Lake near Chugiak and captured this wonderful panoramic view looking down the lake.

Monday, October 4, 2010

Rambling Code

I've been experimenting with Amazon S3 service for one of my latest projects and didn't see many examples out there so I thought I would share some code snippets. Being cheap I wanted trying to keep my storage costs down so I opted to use the reduced redundancy feature of S3. I was having trouble getting the change storage type function to work correctly when I discovered that the following code will work to reduce the storage space when you upload it. Here are two sample lines that will work to save you some money on S3.
To upload new objects with reduced redundancy set use the following line of code.

$result = $s3->batch()->create_object($bucket, $filename, array( 'fileUpload' =>$file, 'storage'=>'REDUCED_REDUNDANCY' ) );

To change existing objects redundancy setting .

$result = $s3->change_storage_redundancy( $bucket, $filename, 'REDUCED_REDUNDANCY' );

Here is how to list all of the objects in a bucket. Not recommended if you have lots objects.

$result = $s3->list_objects($bucket);
foreach( $result->body->Contents as $r ) {

   echo $r->Key;
}

I'm using the Simple PHP S3 Class. I hope you have found this useful.