Dev Harbor: flash

We're converting some old RM (RealMedia) files to use Flash instead; most are video but a small number are audio-only. To get these to work with the JW Flash Player, I used MediaCoder to convert the files. The container to use is M4A, as discussed in this thread. Here are the settings in MediaCoder:

Start by setting the video to off. Then change the audio settings; note that we set the audio container to MP4. MediaCoder automatically resolves this to M4A for audio-only files:

And finally set the main container type to Default.

02 February 2011

Dynamically replace HTML5 video with Flash in Fancybox

For my current project, I needed to dynamically (based on whether the device supported HTML5 or not) replace HTML5 video tags with a Flash player. What made this more challenging was that the video player needed to be in a Fancybox.

A day's worth of coding resulted in the following JavaScript function. It's heavily commented so it should be self-explanatory. Drop me a comment if something doesn't make sense. You need to include the latest jQuery library for this to work.

function flashPopup(){
   // Declare some variables.
   var el = "";
   var vidFileName = "";
   var posterPath = "";
   var placeHolderPosterPath = "";
   var replacement = "";
   var imgTitle = "";
   var videoTag = "";
   var boxId = "";
   var flashId = "";
   var dotPosition = "";
   var swf = ""
  
   // Loop over each video tag.
   $("video").each(function(){
     // Reset the variables to empty.
     el = "";
     vidFileName = "";
     posterPath = "";
     imgTitle = "";
     placeHolderPosterPath = "";
     replacement = "";
     videoTag = "";
     flashId = "";
     swf = "";
    
     // Get a reference to the current object.
     el = $(this);
    
     // Set some values we'll use shortly.
     boxId = this.id + "_flashBox";
     flashId = this.id + "_flashPlayer";
    
     /*
       Set the ID attribute of the first DIV in this element's parent's
       parent. This "box" will have the Fancybox attached to it.
     */
     el.parent().parent().find("div:first").attr("id",boxId);

    
     /*
       Fetch the MP4/M4V video from the <source> tags. Need to go to the
       parent of the current tag to find them.
     */
     el.parent().find("source").each(function(){
       if ($(this).attr("src").indexOf("m4v") != -1 ||
         $(this).attr("src").indexOf("mp4") != -1){
         vidFileName = $(this).attr("src").substring($(this).attr("src").lastIndexOf("/")+1);
       }
     });
    
     /*
       IE (< 9) and older browsers use the Flash player, which overlays a 'Play' button
       on the poster image by default; so we use a poster image that doesn't have
       a play button. Otherwise we'd end up with a play button on top of a play
       button.
      
       We have an img tag inside the <video> tag which we'll use (by adding "-ie" to the
       filename) for the Flash player's image attribute. The next two lines find the file
       and its path.
     */
     dotPosition = el.parent().find("img").attr("src").lastIndexOf(".");
     posterPath = el.parent().find("img").attr("src").substring(0,dotPosition) + "-ie" + el.parent().find("img").attr("src").substring(dotPosition);
    
     /*
       Use the same image but this time don't add "-ie" to its name. This will be for the
       main placeholder linked image; when the user clicks it, the Fancybox pops up with
       the Flash player.
     */
     placeHolderPosterPath = el.parent().find("img").attr("src");
    
     /*
       Fetch the image's title attribute, which we'll use for the linked image's title.
       This will appear as the title on the Fancybox.
     */
     imgTitle = el.parent().find("img").attr("title");
    
     /*
       Concatenate the linked image that will take the place of the <video> tag.
     */
     replacement = "<a title='" + imgTitle + "' id='" + boxId + "' href='javascript:;'><img src='" +
       placeHolderPosterPath + "' style='float:left; padding-left:5px; '/></a>"
  
     // Replace the parent of the current element with the linked image HTML.
     el.parent().replaceWith(replacement);

     /*
       The swfobject library can't be used with Fancybox (as far as I know). but
       we can pass a Flash player of our own design into the Fancybox as its content.
       Here, we concatenate the Flash player and point to the swfobject player.swf
       file. We'll still use that player, but build our own OBJECT and EMBED tags.
     */
     swf = "<object id='" + flashId + "' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='372' height='209'>" +
       "<param name='movie' value='global/vid/player.swf' />" +
       "<param name='quality' value='high' />" +
       "<param name='wmode' value='opaque' />" +
       "<param name='swfversion' value='6.0.65.0' />" +
       "<param name='expressinstall' value='global/vid/expressInstall.swf' />" +
       "<!--[if !IE]>--> " +
       "<object type='application/x-shockwave-flash' data='global/vid/player.swf' width='372' height='209'> " +
         "<!--<![endif]--> " +
         "<param name='quality' value='high' /> " +
         "<param name='wmode' value='opaque' /> " +
         "<param name='swfversion' value='6.0.65.0' /> " +
         "<param name=flashvars value='file=" + vidFileName + "&autostart=false&image=" + posterPath + "'>" +
         "<param name='expressinstall' value='global/vid/expressInstall.swf' />" +
         "<div>" +
           "<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>" +
           "<p><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' width='112' height='33' /></a></p>" +
         "</div>" +
         " <!--[if !IE]>--> " +
       " </object> " +
       " <!--<![endif]--> " +
     " </object> ";

   /*
     Now attach a Fancybox to this item and set its attributes. Note that
     we need to disable the autoDimensions for SWF files or you'll get a
     long, narrow box showing. We then set the width and height (which
     usually requires some trial-and-error).
    
     The two functions for onComplete and onClosed are custom code that
     stop/start the AnythingSlider when the user opens the Fancybox and
     closes it, respectively.
    
     This entire function acts as an onClick handler for the object to
     which it's attached (hence the "end click function" comment).
   */
   $("[id="+boxId+"]").fancybox(
         {
           'content'   : swf,
           'autoDimensions' :false,
           'height' :236,
           'width' :375,
           'padding'   : 5,
           'showCloseButton' : true,
           'enableEscapeButton': true ,
           'titlePosition'  : 'outside',
           'onComplete'  : function() {stopSlider()},
           'onClosed'   : function() {startSlider()}
         }
     ); // end click function
   });
}

Update: A few requests have come in for a version of the code to allow HTML5 videos on a page to be placed into a Fancybox. Here's the demo, with a very special thanks to Pipsqueak.

Here's the HTML code, with the JavaScript followed a little further down:

<!doctype html>
<html lang="en"> 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Fancybox HTML5 Video</title>
    <meta name="description" content="">
    <meta name="author" content="alex cougarman">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" />
    <!-- 
        In addition to the stylesheet for the Fancybox
        component, the following styles control the 
        look of the page and the linked image.
    -->
    <style type="text/css">
        body {
         margin:50px 0px; padding:0px;
         text-align:center;
         font:11px verdana, arial, helvetica, sans-serif;
     }
 
        #main {
         width:500px;
         margin:0px auto;
         text-align:left;
         padding:15px;
         border:1px dashed #333;
         background-color:#eee;
     }
     .img-link 
     {
         border:1px solid #999; 
         padding:5px
     }
    </style>
    <!-- 
        Include the jQuery library, followed by the 
        Fancybox and the Easing libraries. 
    -->
    <script type="text/javascript" src="js/jquery.fancybox-1.3.4/jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.easing-1.3.pack.js"></script>
    
    <!-- Add inline script code here. -->
    
</head>
<body>
    <div id="main">
        <h3>HTML5 Video in a Fancybox</h3>
        <div>
            <video id="vid-1" width="480" height="360" poster="btf.jpg" controls preload>
                <source src="btf.mp4" type="video/mp4">
                <source src="btf.ogv" type='video/ogg; codecs="theora, vorbis"'>
            </video>
        </div>
    </div>
</body>
</html>

Replace the line above in the HTML that says "Add inline script code here." with this JavaScript:

<script type="text/javascript">
    $(document).ready(function(){
        fancyPopup();   // Replace the video tags.
    });

    /*
        Function finds the video tags on the page. For each,
        it fetches the video tag's HTML and replaces it with
        a linked image that, when clicked, pops up a Fancybox
        containing the HTML5 video. 
    */
    function fancyPopup() {
        // Declare some variables.
        var el = "";
        var posterPath = "";
        var replacement = "";
        var videoTag = "";
        var fancyBoxId = "";
        var posterPath = "";
        var videoTitle = "";

        // Loop over each video tag.
        $("video").each(function () {
            // Reset the variables to empty.
            el = "";
            posterPath = "";
            replacement = "";
            videoTag = "";
            fancyBoxId = "";
            posterPath = "";
            videoTitle = "";

            // Get a reference to the current object.
            el = $(this);

            // Set some values we'll use shortly.
            fancyBoxId = this.id + "_fancyBox";
            videoTag = el.parent().html();      // This gets the current video tag and stores it.
            posterPath = el.attr("poster");
            videoTitle = "Play Video " + this.id;
            
            // Concatenate the linked image that will take the place of the <video> tag.
            replacement = "<a title='" + videoTitle + "' id='" + fancyBoxId + "' href='javascript:;'><img src='" +
                posterPath + "' class='img-link'/></a>"

            // Replace the parent of the current element with the linked image HTML.
            el.parent().replaceWith(replacement);

            /*
            Now attach a Fancybox to this item and set its attributes. 
               
            This entire function acts as an onClick handler for the object to
            which it's attached (hence the "end click function" comment).
            */
            $("[id=" + fancyBoxId + "]").fancybox(
            {
                'content': videoTag,
                'title': videoTitle,
                'autoDimensions': true,
                'padding': 5,
                'showCloseButton': true,
                'enableEscapeButton': true,
                'titlePosition': 'outside',
            }); // end click function
        });
    }
</script>

Replace the two videos (btf.mp4 and btf.ogv) with your own HTML5-compatible videos and try it. Demo, with a very special thanks to Pipsqueak.

Update: The good folks at Long Tail Video provide a great HTML5 video tag reference.

21 July 2010

15 Gorgeous Flash Websites Created using Wix

http://creativefan.com/15-gorgeous-flash-websites-created-using-wix/

Wix is one of these companies that has developed an intuitive and user-friendly free website builder that allows even novice web users to create their own website with ease. Not only does Wix allow users to build a free website, they are also fantastic supporters of the design community, sponsoring many design blogs and companies around the globe.

10 July 2010

Create your own online AR 3D storybooks

http://www.webkitchen.be/2010/07/07/create-your-own-online-ar-3d-storybooks/

01 July 2010

YouTube backs Adobe Flash over HTML5

http://www.infoworld.com/d/developer-world/youtube-backs-adobe-flash-over-html5-849

"While HTML5's video support enables us to bring most of the content and features of YouTube to computers and other devices that don't support Flash Player, it does not yet meet all of our needs," said YouTube software engineer John Harding in the post. "Today, Adobe Flash provides the best platform for YouTube's video distribution requirements."

20 June 2010

Flowplayer and Captions (Subtitles)

http://www.stoimen.com/blog/2010/06/09/flowplayer-and-captions-subtitles/

11 June 2010

5 Flash applications that will blow your mind

http://www.webkitchen.be/2010/06/08/5-flash-applications-that-will-blow-your-mind/

04 June 2010

The Flash Platform is fueling innovation

http://www.webkitchen.be/2010/06/02/the-flash-platform-is-fueling-innovation/

02 June 2010

Flash... without the plugin

http://smokescreen.us/

HTML5 vs. Flash: The case for Flash

http://www.infoworld.com/d/developer-world/html5-vs-flash-the-case-flash-721

25 May 2010

Open Source HTML5 Video Player – Video JS

http://www.greepit.com/2010/05/open-source-html5-video-player-video-js/

19 May 2010

Kevin Lynch, Adobe CTO & SVP, Interview @ Web 2.0 Expo

Interview with Adobe CTO & SVP.

Video Encoding Cookbook and Profile Guidelines for the Adobe Flash Platform

http://ntt.cc/2010/05/09/video-encoding-cookbook-and-profile-guidelines-for-the-adobe-flash-platform.html

29 March 2010

InfoWorld review: Flash Builder 4 lights up rich Internet app development

http://www.infoworld.com/d/developer-world/infoworld-review-flash-builder-4-lights-rich-internet-app-development-774

24 March 2010

One player to rule them all: An MP4 player solution for iPhone and any browser

For a recent project, I needed a video player that would play nice with the iPhone. Part of the solution was provided by the amazing html5media JavaScript library. However, if you'd like to encode only one video format, MP4, and get it working on Opera 10.5+, it will require some more work.

The html5media library is able to detect and replace the <video> tag with the Flowplayer Flash player for almost all browsers; for some reason, it can't do the same for Opera 10.5. And as this page explains, the HTML5 <video> tag on Opera requires an OGV video; it can't play MP4.

Here's a solution that lets you play MP4 video on the latest iPhone, Firefox 3.6, IE 6 - 8, IE Platform Preview 9, Opera 10.5, Safari 4, and Chrome 4.1. I don't know if it's the most elegant, but it gets the job done.

First, download the free Flowplayer library. Unzip the package and then start an HTML document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video Test</title>
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js">
</script>
<script type="text/javascript" src="js/flowplayer-3.1.4.min.js"></script>
<script type="text/javascript">
// Required for Opera to display the MP4 video.
// Removes take the <video> and <source> elements
// from the DOM, but keeps the other children of
// the <video> tag. In this case, it retains the
// <a> tag which will be used for the Flowplayer.
function fallback(video) {
 while (video.firstChild) {
   if (video.firstChild instanceof HTMLSourceElement) {
     video.removeChild(video.firstChild);
   } else {
     video.parentNode.insertBefore(video.firstChild, video);
   }
 }
 video.parentNode.removeChild(video);
 fixForOpera();
}

// Places a Flowplayer Flash player into the item with ID "player".
function fixForOpera(){
flowplayer("player","js/flowplayer-3.1.5.swf");
}
</script>
</head>
<body >
<video id="vid" width="352" height="264" poster="cat.jpg" controls preload>
<source src="cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
 onerror="fallback(this.parentNode)"></source>
<a 
  href="cat.mp4" 
  style="display:block;width:352px;height:264px" 
  id="player">
</a>
</video> 
</body>
</html>

The trick is to catch the error thrown by the <video> tag (using its onerror attribute) and remove the tag (using the fallback() function), ensuring that we keep the anchor tag that will hold the Flowplayer object. The fallback() function also calls fixForOpera(), which places the Flowplayer object into the anchor tag with ID player.

This player works for the browsers listed and the iPhone.

18 March 2010

How to put an HTML element on top of a Flash movie

http://robertnyman.com/2007/01/29/how-to-put-an-html-element-on-top-of-a-flash-movie/

Ensure you read the comments. This technique might not work in all browsers. Recommended method of placing objects atop Flash:

<param name="wmode" value="transparent">
<embed wmode="transparent" (…)></embed>