Tag Archives: YouTube

Date
13
DEC
10
Author

2010 Trends

, , , ,

Google, YouTube, and Twitter have all released their 2010 trend pieces. What do they have in common? Justin Bieber.

Here’s a quick breakdown of the top 10 trends on Twitter.

  1. Gulf Oil Spill
  2. FIFA World Cup
  3. Inception
  4. Haiti Earthquake
  5. Vuvuzela
  6. Apple iPad
  7. Google Android
  8. Justin Bieber
  9. Harry Potter & the Deathly Hallows
  10. Pulpo Paul

The fastest rising Google searches.

  1. Chatroulette
  2. iPad
  3. Justin Bieber
  4. Nicki Minaj
  5. Friv
  6. Myxer
  7. Katy Perry
  8. Twitter
  9. Gamezer
  10. Facebook

And if you have a minute 86 seconds you can find out what the top YouTube videos were.

There, now you know what happened in 2010.

, , , ,
Filed under Web Culture
Date
01
JUN
09
Author

BooneOakley hacks YouTube

, ,

There’s a lot of good things about working around The Nerdery (free crack/energy drinks, four-legged vacuum cleaners, rad people, etc.), but my new favorite perk is learning about the population that lives in
agency world ecosystem.

From my naive vantage point, agencies fit into one of two silos: those that take themselves way too seriously, or those that have a goofy amount of fun with their job and push the interactive agency space into cool places. Guess which one I like working with?

Enter: BooneOakley.

On the scene since 2000, these guys just launched a YouTube site. No, I’m not saying that like “they’re on The Facebook.” They literally launched a YouTube site, powered by YouTube, and getting ALL traffic
redirected from http://www.booneoakley.com.

Here’s the real fun. It’s functional. Fully. Functional. Leveraging embeddable annotations, you can fully navigate through different parts of the site. And you should, especially the bios with the pooping dog.

These guys get it, have fun with their work, are pushing it ahead, and hopefully will return my phone calls. If there’s one thing nerds like, it’s partnering with agencies that get it, have fun, and do innovative
work.

Dig it? Get up in their tweets, or leave them a YouTube message.

Matt Albiniak is a Sr. Account Nerd at Nerdery Interactive Labs. Learn more about him on the Periodic Table of Nerdery.

, ,
Filed under Advertising & Marketing, Design
Date
27
JAN
09
Author

Tech Tuesday — YouTube in AIR

, , , ,

The YouTube video player is currently written in ActionScript 2.0 and integrating it into an AIR application requires a few additional steps. There are many solutions available that reverse engineer the URL to get access to the source video FLV, however, this breaks the terms of service and is not officially supported by YouTube or the API.

By taking advantage of the HTMLLoader class we are able to load the YouTube Chromeless video player into AIR without breaking the terms of service. It essentially loads up a web page within the AIR application and uses JavaScript to control the video.

Lets start by creating the JavaScript / HTML portion of the application that the HTMLLoader will consume. Resources for this can be found here; YouTube Chromeless Player Example page.

Simplified JavaScript functions for this example (includes Play, Pause and Load):

PLAIN TEXT
JavaScript:
  1. <script src="js/swfobject.js" type="text/javascript" />
  2. <script type="text/javascript">
  3.  
  4.       function onYouTubePlayerReady(playerId) {
  5.         ytplayer = document.getElementById("myytplayer");
  6.       }
  7.    
  8.       // functions for the api calls
  9.       function loadNewVideo(id, startSeconds) {
  10.        if (ytplayer) {
  11.          ytplayer.loadVideoById(id, startSeconds);
  12.         }
  13.        }
  14.      
  15.        function play() {
  16.           if (ytplayer) {
  17.             ytplayer.playVideo();
  18.           }
  19.         }
  20.  
  21.        function pause() {
  22.          if (ytplayer) {
  23.            ytplayer.pauseVideo();
  24.          }
  25.         }
  26.  
  27.   </script>

Next we will use the SWFObject to load in the YouTube Chromeless video player. Notice the use of wmode: "opaque" in this example. Without this you will not be able to place any display objects above your videos.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2.  
  3.        // allowScriptAccess must be set to allow the Javascript from one
  4.        // domain to access the swf on the youtube domain
  5.        var params = { allowScriptAccess: "always", bgcolor: "#cccccc", wmode: "opaque" };
  6.        // this sets the id of the object or embed tag to 'myytplayer'.
  7.        // You then use this id to access the swf and make calls to the player's API
  8.        var atts = { id: "myytplayer" };
  9.        swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
  10.                            "ytapiplayer", "400", "300", "8", null, null, params, atts);
  11.  
  12. </script>

ActionScript Used to Load and Control the Video:

PLAIN TEXT
Actionscript:
  1. package com.sb.util
  2. {
  3.    import flash.display.Sprite;
  4.    import flash.events.Event;
  5.    import flash.html.HTMLLoader;
  6.    import flash.net.URLRequest;
  7.          
  8.    public class JSVideoPlayer extends Sprite
  9.    {
  10.  
  11.          private var _html:HTMLLoader;
  12.          private var _ready:Boolean = false;         
  13.        
  14.          public function JSVideoPlayer()
  15.            {
  16.              _html = new HTMLLoader();
  17.              _html.paintsDefaultBackground = false;
  18.              _html.width = 400;
  19.              _html.height = 300;
  20.              _html.addEventListener(Event.COMPLETE,
  21.                                     onComplete);
  22.                
  23.              loadHTMLcontent() 
  24.  
  25.              this.addChild( _html );
  26.          }
  27.          public function loadNewVideo(videoID:String):void
  28.          {
  29.               if(_ready){
  30.                  _html.window.loadNewVideo(videoID);
  31.               }
  32.          }
  33.          
  34.          public function playVideo():void
  35.          {
  36.                if(_ready){
  37.                   _html.window.play();
  38.                }
  39.          }
  40.    
  41.          public function pauseVideo():void
  42.         {
  43.              if(_ready){
  44.                 _html.window.pause();
  45.              }
  46.         }
  47.            
  48.         private function onComplete (e:Event):void
  49.         {
  50.              _ready = true;
  51.         }
  52.              
  53.         public function loadHTMLcontent():void
  54.         {
  55.              _html.load(new URLRequest('test.html'));
  56.         }
  57.  
  58.    }
  59. }

One of the limitations of using the HTMLLoader class is the inability to set the opacity of the video. For example you if wanted to fade the video out you would have to capture the current state of the video and replace it with a bitmap image that would then be faded out (download the zip file to see an example of this).

Source Files (ZIP)

Sources

PS: This example is only for AIR and may not work for Flex applications deployed on websites. Please visit 'YouTube in Flex applications' (On The Other Hand) for an example of how to do this in Flex.

This was originally posted on blackcj.com, Chris Black's personal blog. Chris is a Senior Developer at Sierra Bravo.

, , , ,
Filed under Technology