Tag Archives: Javascript

YouTube announces Upload API, Chromeless Player with JavaScript API and H.264 videos

YouTube has announced a lot of new features:-

This is really amazing, we can build kick-ass applications that would use YouTube’s platform for media upload, conversion (trans coding) and delivery, seamlessly.

I am yet to confirm, how easy it is to load and control YouTube’s player in our Flash/Flex apps? Controlling loaded SWFs is hard, unless it allows cross-site scripting through Security.allowDomain (“loaderdomain.com”). I hope, some day Flash Player would have more Security APIs, which would let us expose a set of interfaces to loaders (SWF loads another swf from different domain).

In any case, we can overlay iframe/div to show the video. That’s what I am doing for Yahoo! Live Mashup.

Update (March 12, 2008): YouTube’s chromeless player can be loaded in Flash/Flex applications and can be controlled. That’s what I heard Geoff Stearns, Flash Engineer in YouTube and SWFObject developer, saying in this video.

Technorati Tags: , , , , , , ,

Loading JavaScript file(s) using HTTPService/URLLoader

In my last post, I talked about JavaScript Flex 2 component that can inject Javascript code in HTML wrapper’s context. I experimented to see, if we can load Javascript files (.js) using HTTPService (or flash.net.URLLoader) in Flex2/AS3 projects and inject it.

Example Flex 2.0 code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="com.abdulqabiz.utils.*"  width="100%" height="100%" creationComplete="onAppInit ()">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import mx.events.*;
import mx.rpc.events.*;
import mx.rpc.http.HTTPService;
import com.abdulqabiz.utils.JavaScript;
private var javascript:JavaScript;
private var service:HTTPService;
private function onAppInit ():void
{
service = new HTTPService ();
service.url = "test.js";
service.useProxy = false;
service.resultFormat = "text";
service.addEventListener ("result", injectJavaScript);
service.send ();
}
private function injectJavaScript (event:ResultEvent):void
{
javascript = new JavaScript ();
javascript.source = String(event.result);
trace ("javascript injected: " + event.result);
}
private function invokeSayHelloWorld ():void
{
ExternalInterface.call ("sayHelloWorld");
}
private function invokeSaySomething (str:String):void
{
ExternalInterface.call ("saySomething", str);
}
]]>
</mx:Script>
<mx:Button label="invoke javascript saySomething () function" click="invokeSaySomething ('Hey, how are you?')"/>
<mx:Button label="invoke javascript sayHelloWorld () function" click="invokeSayHelloWorld ()"/>
</mx:Application>

Test.js used in example:

//test.js
var myName = "Abdul Qabiz";
function saySomething (str)
{
alert (str);
}
function sayHelloWorld ()
{
alert ("Hello World!");
}

You would need JavaScript.as (with proper package directory structure) and test.js (code posted above) in place to make above example to work.
I am thinking to load FABridge using this approach. I know, it’s practically of no use except keeping code and logic at one place.

JavaScript injection through ActionScript

In last post, I showed, how can we inject JavaScript using ActionScript or MXML into host HTML container/page.

One more use-cases, I can think of:

  • Request server-side script to send a JavaScript (for specific browser) as string.  Using JavaScript class, I can inject the javascript in HTML

A MXML component that embeds JavaScript in html

I know subject line is confusing but I am not able to think a better one. I have written a Adobe Flex 2.0 component(JavaScript.as), which can be used as MXML tag in Flex 2.0 applications. You can write JavaScript code as text of this MXML tag. When your application loads, all that JavaScript code would be exported to HTML container’s context.

Confused? Let code speak rather than me :)

Sample MXML application using this component (test.mxml):-


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="com.abdulqabiz.utils.*"  width="100%" height="100%">
<JavaScript>
<![CDATA[
var myName = "Abdul Qabiz";
function saySomething (str)
{
alert (str);
}
function sayHelloWorld ()
{
alert ("Hello World!");
}
]]>
</JavaScript>
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
private function invokeSayHelloWorld ()
{
ExternalInterface.call ("sayHelloWorld");
}
]]>
</mx:Script>
<mx:Button label="invoke javascript sayHelloWorld () function" click="invokeSayHelloWorld ()"/>
</mx:Application>

HTML code that embeds test.swf(output of above code):-


<html>
<head>
<!-- swfobject -->
<script type="text/javascript" src="http://blog.deconcept.com/swfobject/swfobject_source.js"></script>
</head>
<body>
<div id="flashcontent" class="playerContent" >You don't have Flash Player 9.</div>
<script type="text/javascript">
var swfObj = new SWFObject ("JavaScriptComponentTest.swf","JavaScriptComponentTest", "300", "300", "9", "#C0D4DD", true);
swfObj.write("flashcontent");
</script>
<a href="javascript:void(0)" onclick="saySomething ('hey')" >invoke saySomething ()</a><br />
<a href="javascript:void(0)" onclick="sayHelloWorld ()" >invoke sayHelloWorld ()</a><br />
<a href="javascript:void(0)" onclick="alert (myName);">show myName </a><br />
</body>
</html>

See an example Or Download (zip 133kb includes the SWF).

The code is available under the MIT license.

Disclaimer: I have only tested this in FireFox on Windows. So please drop a comment, if doesn’t work in your system.

Update:
March 6, 2007 – Fixed a bug, which popped-up after I implemented comment removal feature. Thanks to Joan for point it out.
March 5, 2007 – Library has been updated, it can now handle comments in JavaScript code. It would basically remove all comments before injecting it in HTML container.