Modern MIME-TYPE’s we should all add to our websites

Posted on February 11, 2011 by Bela Korcsog

Been updating the mime types of my servers recently as I develop more html content and came across a number that I hadn’t needed to worry about before.

With the advent of font embedding becoming more available outside of IE (been available in IE since version 6) there’s a need to encode and font-face the fonts for the various browsers to render on the client side. Flash has been embedding fonts silently for years and nothing makes your site look more professional than a good short choice of fonts to embed.

Here’s what you need to add to your htaccess file (on apache servers) to allow the client side to download the files from restricted servers (including other media types commonly referenced in HTML5):

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf
AddType application/x-font-ttf .ttf
AddType application/x-woff .woff

(WOFF is the new version of EOT. Chrome and IE 9 RC support WOFF. EOT is supported by IE 6-9 Beta).
(OTF/TTF is supported by many other browsers but definitely not IE).
I’ve come across conflicting definitions for TTF — some indicate the octet-stream and other’s indicate x-font-ttf — I’d gone with the latter on my sites but the former is here in case you don’t get the right results with your system.

//For html audio types, you’ll need to add:

AddType audio/mp4 .mp4 .m4a
AddType audio/mpeg .mp3
AddType audio/ogg .ogg .oga
AddType audio/wav .wav

//For video types:

AddType video/ogg .ogm .ogv .ogg
AddType video/mp4 .mp4 .m4v .f4v
AddType video/webm .webm
AddType video/x-flv .flv

// for SWF (Flash) files
AddType application/x-shockwave-flash .swf
AddType application/pdf .pdf

// archive files
application/zip .zip .7z

Mime types are becoming much more important as the browser wars of 2010 continue into 2011/2012 based on some being more adamant that the mime be properly defined on the server.

Some browsers on micro platforms like the embedded systems may become more dependent on the mime as a way of constricting bandwidth or filtering content on low bandwidth or conservative networks.

Also, more advanced client side applications may behave incorrectly if the mime of an asset is not correctly defined (as3 applications which load .swf content into themselves may not issue the correct eventHandler if the asset is considered an image rather than an application).

Just as REST requires browsers to correctly handle server side status codes, so will mime types properly restrict and filter content based on type.

It doesn’t hurt to define the mime types correctly, but it certainly will become an issue if you don’t configure them for the content that you deliver on your sites.

Posted in Uncategorized | Comments Off

Getting Omniture s_code.js to play nice with HTML 5 video

Posted on January 26, 2011 by Bela Korcsog

Omniture produces some great tracking reports and generally their code is really well produced, but the documentation is sorely lacking on implementation of the Media tracking for video.

Here’s a sample html page that works with tracking of Media and SiteCatalyst:

<!DOCTYPE HTML>
<html>
<head>
<title>html5videoplayerwithomnituresupport</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<meta name=”language” content=”en”>
<meta name=”Description” content=”">
<meta name=”Keywords” content=”">
<script type=”text/javascript”>
mediaparams = {Media:{trackWhilePlaying:true,autoTrack:false,playerName:”testplayer”,trackMilestones:”0,25,50,75″}};
videoplaying = false;
function myHandler(e) {
var currentTime;
var vid = document.getElementById(‘videoasset’);
if (vid.currentTime > 0) {
currentTime = vid.currentTime;
} else {
currentTime = 0;
}
var stringvalues = “event["+e.type+"] src:”+vid.src+” currentTime:”+currentTime+” duration:”+vid.duration+” \n”;
var tarea = document.getElementById(‘texttrace’);
var textareavalue = tarea.value;
tarea.value = textareavalue+stringvalues;
if (e.type == “loadedmetadata”) {
// don’t do anything at this time.
}
if (e.type == “seeking” && videoplaying) {
s.Media.stop(“testhtml5video”,currentTime);
}
if (e.type == “play” && videoplaying) {
s.Media.play(“testhtml5video”,currentTime);
}
if (e.type == “play” && !videoplaying) {
videoplaying = true;
s.Media.open(“testhtml5video”,vid.duration,mediaparams.Media.playerName);
s.Media.play(“testhtml5video”,currentTime);
}
if (e.type == “seeked” && videoplaying) {
s.Media.play(“testhtml5video”,currentTime);
}
if (e.type == “pause” && videoplaying) {
s.Media.stop(“testhtml5video”,currentTime);
}
if (e.type == “ended”) {
videoplaying = false;
s.Media.stop(“testhtml5video”,currentTime);
s.Media.close(“testhtml5video”);
}
}
</script>
<style>
html, body { height:100%; }
body { margin:0; }
div {width:100%}
</style>
</head>
<body>
<script src=”js/s_code.js” type=”text/javascript” ></script>
<video id=”videoasset” controls=”controls” autoplay=”autoplay” >
<source src=”testhtml5video.m4v” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘ >
<source src=”testhtml5video.ogg” type=’video/ogg; codecs=”theora, vorbis”‘>
Either the tag isn’t correct for this browser or there might be an issue with the version of browser that you are using.
</video>
<form name=”textform”><textarea id=”texttrace” style=”width:90%;height:300px;”></textarea></form>
<script>
s.loadModule(“Media”);
var tarea1 = document.getElementById(‘texttrace’);
for (var prop in mediaparams ) {
//tarea1.value += “["+prop+"]“+typeof(mediaparams [prop]);
if (typeof(mediaparams [prop]) == “object”) {
for (var prop1 in mediaparams [prop]) {
tarea1.value += “["+prop+"]["+prop1+"]“+mediaparams [prop][prop1]+”\n”;
s[prop][prop1] = mediaparams [prop][prop1];
}
} else {
s[prop] = mediaparams [prop];
}
}
myvid = document.getElementById(‘videoasset’);
myvid.addEventListener(‘loadedmetadata’,myHandler,false);
myvid.addEventListener(‘seeked’,myHandler,false);
myvid.addEventListener(‘seeking’,myHandler,false);
myvid.addEventListener(‘play’,myHandler,false);
myvid.addEventListener(‘pause’,myHandler,false);
myvid.addEventListener(‘ended’,myHandler,false);
if (myvid.error) {
switch (myvid.error.code) {
case MEDIA_ERR_ABORTED:
alert(“Video stopped before load.”);
break;
case MEDIA_ERR_NETWORK:
alert(“Network error”);
break;
case MEDIA_ERR_DECODE:
alert(“Video is broken”);
break;
case MEDIA_ERR_SRC_NOT_SUPPORTED:
alert(“Codec is unsupported by this browser”);
break;
}
}
</script>
</body>
</html>

You need to provide your own s_code.js from the admin for the site. ‘s_code.js’ is preconfigured from SiteCatalyst with the parameters for your account and tracking servers and shouldn’t generally be edited manually (just an FYI, you do what you like of course).

This should get you started on setting up an HTML 5 video player and hooking it up to track usage with Omniture SiteCatalyst.

Posted in Uncategorized | Comments Off

Javascript / HTML 5 based Flash Player in Development

Posted on August 11, 2010 by Bela Korcsog

Interesting site showcasing a javascript based Flash Player — http://smokescreen.us.

The limitations are many but this will be great for getting ad banners out there onto iPhone type devices like the iPad, iPod and iPhones.

Limitations are:
No script execution – strictly a timeline animation tool
No support of any advance api’s — like camera and custom communication protocols.
No support of filters as yet.
No subpixel rendering

But I’m very impressed in any case.

Posted in Uncategorized | Comments Off

Embedding Fonts part 3

Posted on July 12, 2010 by Bela Korcsog

I ran through this one more time today to get this ironed out once and for all. Seems folks are still having issues identifying fonts and targeting them for use in sub movies from externally loaded libraries.

I’ve attached a .zip with two FlashDevelop projects which uses the FlexSDK to compile. You should really be using FlashDevelop if you’re on a PC — it’s bar none the best IDE for Flash out there. If you’re on a Mac, you can use FlashBuilder which does much of the same thing but is missing a few key features that I really love about FlashDevelop. It’s the only reason I still use a PC over a Mac.

Okay, here’s the run down on how I built out the pieces:

First there’s a project called ‘FontTester.as3proj’ that compiles a simple font library swf. There are two embeds in that file and in the constructor it registers those fonts for use by the static Font class. They should already be registered but what I’m doing is forcing it to redo the action in the parent swf when it loads this swf file.

Compiling this project generates the file ‘FONTLOADER.swf’ in the bin.

The second project (‘FontEmbeddingAS3′) is the shell app that will load the library swf and take all the fonts from that swf and make them available in the shell:

First thing I do is make sure everything is loaded and ready.

Then I load the library swf and wait for it to load.

Next is the great part; in the function fontsloaded I enumerate the fonts that are now registered in the system and reregister the fonts in the current application domain so that they’re available for the current domain to use.

This happens in the very terse line:

Font.registerFont(e.currentTarget.loader.content.loaderInfo.applicationDomain.getDefinition(f.fontName) as Class);

You’ll need to do this in a level that is accessible by the current application domain. If you find that the fonts are not showing up in a specific domain level you’ll need to repeat this process there.

For example, you’ve created a movieclip at some point and are attaching text fields to the movieclip. If your creation happens before your loading and attaching the fonts (always possible in an asyncronyous environment) fonts will fail to be available. Timing is everything so to ensure that the fonts are ready you really should put your font library loading as a first step before your application launches.

Here’s the source:

Find unicode ranges here. I’ve got part of the line commented out for the setting of unicode ranges for example.

For non latin fonts you’ll need to use a non latin font for embedding (arialuni.ttf for example). Luckily in Flash 10 this isn’t an issue any longer but it does come up occationally.

Here’s the FontEmbeddingAS3 source.

Posted in Uncategorized | Comments Off

Super easy external font loading in AS3 Flash

Posted on April 22, 2010 by Bela Korcsog

Here’s a super easy way to build out a project with external fonts in separate swfs for flash.

I use FlashDevelop and the FlexSDK so most of this is related to that usage, but you can just as easily do it with Flash using Library Symbols in lieu of the embed tag for embedding the font.

First, built a font swf:

package
{
 import flash.display.Sprite;
 import flash.text.Font;
 
 /**
  * …
  * @author Bela Korcsog
  */
 public class MainFont extends Sprite
 {
  
  [Embed(source = "../lib/metaboo.ttf",fontName="MetaRoman",mimeType="application/x-font-truetype")]
  public const FontClass:Class;
  
  public function MainFont():void {
   Font.registerFont(this.FontClass);
  }
 }
}

There’s lots of functions related to the TTF font embedding ability and you can restrict the Unicode ranges for non-roman characters using this embed:

[Embed(source="../lib/arialuni.ttf", fontFamily="ArialUni", fontStyle = "normal",advancedAntiAliasing="true", mimeType="application/x-font-truetype", unicodeRange = "U+0000-U+2019,U+0002-U+201d,U+0004-U+303f,U+0068-U+312c,U+0108-U+31bf,U+0140-U+9faf,U+21052-U+faff,U+ff01-U+ff60")]

You need to use TTF fonts for this as that’s the only format that the compiler will recognize. You can use an online tool for converting fonts to the correct format (there’s a lot of them out there but search for online font conversion tool).

In the parent swf, you’ll need to reregister the fonts for use in the main application. Although the Font Class is static, the Font symbols are not available outside of the registered ApplicationDomain for the swf requesting the Font, so this process is important to complete for the fonts to be recognized and rendered:

Here’s a snippet that will register the fonts correctly:

package
{
 import flash.display.Loader;
 import flash.display.MovieClip;
 import flash.text.Font;
 /**
  * …
  * @author Bela Korcsog
  */
 public class Main extends MovieClip
 {
  public var fontloader:Loader;
   
  public function Main():void
  {
   if (stage) init();
   else addEventListener(Event.ADDED_TO_STAGE, init);
  }
  
  private function init(e:Event = null):void {

   removeEventListener(Event.ADDED_TO_STAGE, init);
   fontloader = new Loader();
   fontloader.contentLoaderInfo.addEventListener(Event.COMPLETE, this.fontsloaded);
   fontloader.load(new URLRequest(“FONTLOADER.swf”));
  }
  
  private function fontsloaded(e:Event):void {
   e.currentTarget.loader.removeEventListener(Event.COMPLETE, this.fontsloaded);
   for each (var f:Font in Font.enumerateFonts()) {
    if (e.currentTarget.loader.content.loaderInfo.applicationDomain.hasDefinition(f.fontName))
     Font.registerFont(e.currentTarget.loader.content.loaderInfo.applicationDomain.getDefinition(f.fontName) as Class);
   }
  }
 }
}

Next you need to create some text fields to present the font values and use ‘embedFonts = true’ on the text field.

et voila.

Posted in Flash, Flex | Comments Off

More Apple investigations

Posted on February 3, 2010 by Bela Korcsog

HTML Canvas is Apples proposed replacement to Flash / Silverlight. Interesting.

http://www.8bitrocket.com/newsdisplay.aspx?newspage=36134

More Flash hater points of interest:

http://www.flashmagazine.com/community/detail/everyone_to_their_bases_-_flash_is_under_attack/

Why Microsoft will NEVER support the HTML 5 video and audio tag as they are currently defined (one word — PATENTS):

http://www.internetnews.com/dev-news/article.php/3828901

Some more details about HTML 5

http://www.webmonkey.com/blog/W3C_Drops_Audio_and_Video_Codec_Requirements_From_HTML_5

A quote that concerns me the most:

“Now that the web has been elevated to a more powerful computing platform by HTML5, Berners-Lee says it has also given rise to complicated security issues.

“You got a piece of code from site A, and you’re person B running a browser you got from company C, and that code wants to access data stored with company E for the purposes of printing it on a printer owned by company D — How do you build that so that it’s not susceptible to all kinds of nasty attacks?” 

http://www.webmonkey.com/blog/Tim_Berners-Lee_Sees_Promise__Challenges_in_HTML5

At least Adobe would release new versions of the Flash player when security issues were identified in record time — explain to me how the HTML 5 spec will change to adapt to issues of security if it’s taken them 6 years so far and they still can’t solidify the spec.

Posted in Flash | Comments Off

Apple hates Flash?

Posted on February 3, 2010 by Bela Korcsog

In all the hub-bub about the iPad (needlessly btw — it’s a hobbled consumer toy and nothing more) Apple has been proposing that the Flash Player is the biggest cause of crashes on the Mac.

Recently I’ve been seeing remote data requests randomly dropping when requested from Flash Player based swf content. I’m sure that Adobe could enlighten me about why these requests would fail but in general if you request an image or some other element, in Apple’s operating system you may receive the ‘response’ that an image has been received prior to the image actually being delivered as data. This would cause any flash movie coded to load data to fail if the Event request returns COMPLETE but the actual data is null until a period of time has passed (I’ve seen 206′s and 200′s returning data AFTER the request has completed). In fact if you code poorly in Flash (handling the Event.COMPLETE and ignoring the content that is returned — just adding the Loader class to the display list using addChild and when the actual data is received the loader will display the data) then you won’t see the issue — but during this weird issue you may see the beachball of death on the Mac if the swf has been coded with the reasonable expectation that the returned data will not be null. If a Flash Player can cause stability issues this is not a problem of a plug in for the browser but it indicates an inherent issue with the operating system that doesn’t do proper process blocking and multitasking. The flash player is a simple dll process and if you have such a poorly built operating system that a dll can crash it then you’ve got real problems and are masking them by blaming folks for coding to your specs and expecting that you’ll get a good experience.

In a regular browser experience this isn’t an issue since the request isn’t as intelligent as a request from a Flash Player based request. There’s no validation generally to whether the image has been received and data loaded into the img src of an html page since that doesn’t really factor into the equation.

What does this mean? Well, this has been a progressive experience issue, that Apple has modified over a period of time rather than immediately.

Is this on purpose? I have no clue, but it does appear to target experiences such as those of Flash and Silverlight as opposed to the browser img loading experience. It just seems odd that they would announce that the Flash Player is the biggest issue for stability after introducing these kinds of changes and recording these issues. I wonder if they would go back in time to an earlier version of the flash player prior to introduction of Mac OS 10.4 and show us the results of the Flash Player experience prior to introduction of the Apple experience of the iPhone where they first targeted the Flash Player as an item that would be considered an experience issue.

I’m just posting my observation since I use both Mac and PC operating systems and have switched to the PC from the mac cause at least the PC doesn’t have these issues that the Mac is experiencing.

Funny, two years ago I would have said the opposite.

I’ve got an example of a link that works great on a PC, but fails on a Mac and it appears that randomly the slate image will return a null value:

http://www.amazon.com/gp/feature.html?ie=UTF8&docId=1000410491&tag=googhydr-20&hvadid=4644437547&ref=pd_sl_76g5frn7c1_b

Check it out.

Posted in Flash | Comments Off

AS3 Netstream Video stops during seek

Posted on September 23, 2009 by Bela Korcsog

I’ve noted this in other areas but there is a serious bug in the netstream class or i’m not doing it right.

Here’s the deal — during the seek of a low keyframe video asset the netstream may end up sending a stop even if you try to seek to a point in the video after the last keyframe. It’s pretty consistent and very irritating.

During seek events this event is fired:

  • NetStream.Seek.Notify

And at some point during interaction with the video player the netstream will fire a series of Flush and possibly a Full event.
At this point, if you seek to a point past the last keyframe you’ll generate a:

  • NetStream.Play.Stop

and end your interaction arbitrarily.
Continue reading →

Posted in Flash | Comments Off

Calling a JSON service function from Flash AS3

Posted on July 24, 2009 by Bela Korcsog

Here’s a quick way to call a JSON request without loading a bunch of Classes and wrangling Adobe’s methods:

Continue reading →

Posted in Flash | Comments Off

Firefox 2 mac / pc and errant empty navigate/getURL requests

Posted on December 3, 2008 by Bela Korcsog

I had a bug that was nagging me for a while, mainly because it only shows up on Mac and XP machines (neither of which i use for development) and i thought i’d share it here since it’ll show up again for someone somewhere.

Continue reading →

Posted in Flash | Comments Off