• Curious Minds Media Labs
  • Posts tagged "Iphone"

    Building an iPhone/iPad/Android compatible HTML5 video player – Part 2: Support for Multiple Videos

    8-25-11

    In part one, I showed you how to build a simple HTML5 video player. In part two, I will show you a way to create a simple video player that can display multiple videos.

    Step 1: Processing the video covers and thumbnails
    First things first, let’s process everything we will need for our player. Go ahead and export your videos in MP4 and OGG format and produce the poster images you will need (see part 1 for the steps on how to do this). Next, produce the thumbnails for each video. The size is completely up to you, and depends on how many videos you are displaying and the layout of your player.
    Once you have your videos, poster images and thumbnails ready, place them all into your folder (mine is named “vids”) and continue on to step two.

    Step 2: Linking to jQuery
    I use jQuery on virtually every project, it is a great framework for adding functionality to your site. You can link to jQuery in two ways: 1) download it and host it on your server or 2) use the hosted version. For this project, I used the hosted version, here is the code for that (just add it to the head of your file):

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    Step 3: Adding the videos to your page
    At this point, we what to put all of the code on the page that we need to show all of the videos plus the Flash version for IE. For my example, I will be using three videos, here is what my HTML code looks like:

    <div id="vids">
          <div id="vid1">
            <video controls poster="vids/vid1.jpg" width="640" height="480">
             <source src="vids/vid1.mp4" type="video/mp4">
             <source src="vids/vid1.theora.ogv" type="video/ogg">
              <object type="application/x-shockwave-flash" data="swf/videos.swf" width="640" height="480">
                <param name="allowfullscreen" value="true">
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="wmode" value="transparent" />
                <param name="flashvars" value="file=vids/vid1.mp4">
                <!--[if IE]><!-->
                <param name="movie" value="swf/videos.swf">
                <!--<![endif]-->
                <img src="vids/vid1.jpg" width="640" height="480" alt="Video">
              </object>
            </video>
            </div>
            <div id="vid2">
             <video controls poster="vids/vid2.jpg" width="640" height="480">
              <source src="vids/vid2.mp4" type="video/mp4">
              <source src="vids/vid2.theora.ogv" type="video/ogg">
             </video>
            </div>
            <div id="vid3">
             <video controls poster="vids/vid3.jpg" width="640" height="480">
              <source src="vids/vid3.mp4" type="video/mp4">
              <source src="vids/vid3.theora.ogv" type="video/ogg">
             </video>
            </div>
    </div>

    Here is how the structure breaks down: we first want a containing div with an ID of “vids”. Within this, we want containing divs for each video (three in my case). I named mine “vid1″, “vid2″ and “vid3″. Each of these divs will hold the HTML5 video tags with the MP4 file followed by the OGG one for Firefox. Within the first div (#vid1), we also want to put the Flash embed fallback code for IE. This should go within the first video tag, directly after our OGG video is listed, before the first closing video tag. If you were to preview your page at this point, you would see the three videos one after another (Chrome, FF, Safari) or the single Flash player (IE).

    Step 4: Setting up the thumbs
    Here is how my code looks for the thumbnails (this code immediately follows my closing div tag above):

    <div id="vidThumbs">
    <a href="vids.html"><div id="vidThumb1"><img src="vidThumb1.jpg"></div></a>
    <a href="vids.html?vid=2"><div id="vidThumb2"><img src="vidThumb2.jpg"></div></a>
    <a href="vids.html?vid=3"><div id="vidThumb3"><img src="vidThumb3.jpg"></div></a>
    </div>

    My containing div has an ID of “vidThumbs”, within this are my three thumbnails. Notice they are all linked to my “vids.html” page, but for #2 and #3, I have added “?vid=number” to the end. This will come into play soon.

    Step 5: adding the CSS
    First, we need to set the CSS for the “vids” div:

    #vids{
    	width:640px;
    	height:480px;
    	background-color:#000;
    	margin:15px 0 10px 0;
    }

    The next step is to add the CSS to style our thumbnails and give us the option of hiding the videos we do not what to be visible.
    I decided to use a yellow border when my thumbnails were moused over and in their active state.
    Here is my CSS for them:

    #vidThumb1,#vidThumb2,#vidThumb3{
    	display:block;
    	width:118px;
    	height:100px;
    	border: #000 5px solid;
    	float:left;
    }
    #vidThumbs a:hover #vidThumb1,#vidThumbs a:hover #vidThumb2,#vidThumbs a:hover #vidThumb3{
    	border:#FC0 5px solid;
    }
    #vidThumb1.active,#vidThumb2.active,#vidThumb3.active{
    	border:#FC0 5px solid;
    }

    So the thick yellow border will only show when I want it to. One note: be sure and set the initial border color to the background of your page if you are going to use this approach.
    One last simple piece of CSS that will hide the 2 videos we don’t what visible when another one is active:

    .hide {
    	display:none;
    }

    Make sure to use display:none; rather than visibility:hidden: as they behave differently. We what to completely take the non-active videos out of the DOM.

    Step 6: adding the Javascript
    We want to make it so that the following conditions are met:
    -if we are on vids.html page, we want to show vid1, make vidThumb1 active and hide the other two videos
    -if we are on vids.html?vid=2, we want to show vid2, make vidThumb2 active and hide the other two videos
    -if we are on vids.html?vid=3, we want to show vid3, make vidThumb3 active and hide the other two videos
    The easiest way to do this is with a bit of javascript, here’s how it looks:

    $(document).ready(function(){
        var query_string=document.location.search;
        query_string=query_string.split('=');
        var query_string_value=query_string[1];
    	if (!query_string_value){
    			$('#vid2').addClass("hide");
                            $('#vid3').addClass("hide");
    			$('#vidThumb1').addClass('active');
    		}
    	if (query_string_value=="2"){
    			$('#vid1').addClass("hide");
                            $('#vid3').addClass("hide");
    			$('#vidThumb2').addClass('active');
     
    	}
    	if (query_string_value=="3"){
                            $('#vid1').addClass("hide");
    			$('#vid2').addClass("hide");
    			$('#vidThumb3').addClass('active');
     
    	}
    });

    First we check that our page is ready, then we check for the presence of a query string in our url. Depending on the value, we show and hide the appropriate videos and make the selected thumbnail active. Note: it’s basically the same three “if” statements in a row, if I was making a player with more than three videos I would create a loop to make it easier to add videos later without having to touch the javascript.

    So now that everything is set, we can click on our three thumbnails and show the appropriate video to play. I hope you enjoyed the tutorial on how to make a simple HTML5 video player, if you have any suggestions on how to make it better, feel free to let me know in the comments. Thanks for reading!

    Building an iPhone/iPad/Android compatible HTML5 video player tutorial – Part 1

    7-1-11

    One of the great things about modern smartphones and tablets is their ability to render webpages very closely to the way they are rendered on desktops. The only caveat here is Flash. Flash is of course blocked completely on iOS devices, and it’s compatibility and performance on Android devices varies widely. One of the most common uses for Flash has been to play video, so this is one area that you are most likely to need an alternative approach for those devices that don’t support it. Luckily, iOS and Android both feature modern browsers with full HTML5 support, including support for the video tag. Today, I will walk you through the steps of creating a simple HTML5 video player.

    HTML5 video example

    HTML5 video example (Safari web browser)

    Step 1: Prepping your video file
    The first thing you will want to do is encode your video at the proper format for HTML5 playback. I am using Quicktime Pro for this, feel free to use your favorite video editor or exporter*. With the video open, I select File>Export from the top menu. Under the Export drop down, select Movie to MPEG-4. Then click the Options… button next to it. Under the Video tab, set the Video Format. For this, use H.264, the data rate is up to you (with a higher setting the video will look better but be a larger file). I usually go with a setting around 800 in most cases. Here you can also set the size for your video if it needs changed (Letterbox will preserve the video’s aspect ratio and is most likely the setting you will want). Under the Audio tab, I usually go with a data rate of 128kbps and a Sample rate of 44.100 kHz. Finally, under the Streaming tab, click on Enable streaming. For Maximum pocket size I use 1500 bytes, for Maximum packet duration, 500 ms. Be sure to leave the Optimize for Server box unchecked (I have had iOS playback issues when this is checked). Once your settings are how you want them, click OK, then save the file (it should be exported with a .mp4 extension).

    *Note: If you do not have Quicktime Pro or comparable software, there is a nice free video exporter that you can use called Miro Video Convertor. It doesn’t allow the fine tuning that QT does, but will definitely get the job done. It is very simple to use, just install it, drag your video file to the window, then select the proper file type from the drop down (you can choose MP4).

    Step 2: Prepping your poster image
    Ok, your video is all set, now we need a still image (preferably jpeg) to use as the poster image for the video (the poster image is the image that the viewer will see on your page before the video is triggered). First, scrub your video to the frame you would like to use. From there, you can either do a screen grab of the video window and edit it in Photoshop, or go to File>Export from the top menu, then select Movie to Picture from the Export drop down menu. If you use this method, you should probably re-save the file in Photoshop since Quicktime exports the file as a pct instead of a jpeg. Another good thing to do at this point is to create a simple Play Button for the file (a Play button automatically shows up in iOS devices but not in Android, which is why it’s a good idea to have it as part of the poster image). In Photoshop, open the still image and create a Play Button graphic on a separate layer. In it’s simplest form, this button is really just a sideways triangle, you can use one of Photoshop’s built-in shapes or just create it yourself. Place this graphic in the center of the image so that it will appear behind the automatic button that iOS creates. Ok, now your files are prepped and it’s time to embed the video on your page.

    Step3: Embedding the video
    The HTML5 video tag makes it very easy to embed the video on your page. Here is an example of what the embed code looks like:

    <video id="vid1" width="560" height="320" poster="vids/myVidPoster.jpg" durationHint="60" controls>
    	<source src="vids/myVid.mp4" type="video/mp4" />
    </video>

    The id attribute is useful if you need to access this element in CSS or Javascript. For the poster attribute, set the path to where your still image is stored. For durationHint, set this to the approximate length of your video in seconds. The controls attribute tells the player to use the default video controls. Set the width and height, then set the src attribute to the path to your .mp4 video file and you are all set.

    Step 4: Serving an OGG Theora video file to Firefox
    As of this writing, Firefox does not support the H.264 codec used by MP4 videos, but it does support OGG Theora. So we will need to export and include an OGG Theora file as well in order for the file to play in Firefox. To export our video into this format, you can use the free video convertor I mentioned above-Miro Video Convertor. Just choose “Theora” from the drop down and click “Convert”. With your video exported, you will need to modify the video embed code to include it. So our code will now look like this:

    <video id="vid1" width="560" height="320" poster="vids/myVidPoster.jpg" durationHint="60" controls>
    	<source src="vids/myVid.mp4" type="video/mp4" />
            <source src="vids/myVid.theora.ogv" type="video/ogg">
    </video>

    Basically, if the browser can read the video tag, it will attempt to load the videos in the order they are listed. So Safari/Chrome/Android/iOS etc will load the MP4, while Firefox will skip it and load the OGG Theora one instead. One word of caution- be sure to put the MP4 video before the OGG one, I have had issues with playback on iOS devices when they are switched.

    Step 5: Serving Flash to browsers that don’t support the HTML5 video tag (I’m looking at you, IE)
    To account for older and incompatible browsers that don’t recognize the video tag, we will provide Flash fallback. To do this, first prep your Flash video player SWF. If you don’t have Adobe Flash, you can download and use one of the free Flash players available to generate your SWF. JW Player and Flow Player are good alternatives.

    With your SWF file ready, change your embed tag to the following:

    <video id="vid1" width="560" height="320" poster="vids/myVidPoster.jpg" durationHint="60" controls>
    	<source src="vids/myVid.mp4" type="video/mp4" />
            <source src="vids/myVid.theora.ogv" type="video/ogg">
            <object type="application/x-shockwave-flash" data="vids/vid.swf" width="560" height="320">
                <param name="allowfullscreen" value="true">
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="wmode" value="transparent" />
                <param name="flashvars" value="file=vids/myVid.mp4">
                <param name="movie" value="vids/vid.swf">
                <!--[if IE]><!-->
                <param name="movie" value="vids/vid.swf">
                <!--<![endif]-->
                <img src="vids/myVidPoster.jpg" width="560" height="320" alt="Video">
             </object>
    </video>

    Now the browser will attempt to load the videos in this order: MP4, OGG, then the SWF. You are all set with a video that will play in virtually any browser.

    That’s it for this time, a simple introduction to creating an HTML5 video and embedding it in your page. In part two, I will show you how to create a video player that supports the playback of multiple videos.
    Thanks for reading!

    Tags: , , , , , ,

    AS3 Components for IOS, IPad and IPhone. Or what to do while waiting for Adobe to update FlashBuilder

    6-2-11

    We’ve been playing with FlashBuilder 4.5 over here for the past few weeks, and we are pretty impressed. However one major setback remains: There are no mobile components for available for iOS devices. In the current 4.5 build, with AIR 2.6 an iOs project can only be a pure AS3 project no mxml or spark classes are allowed. This presents some real problems for developer who are used to having the prebuilt interactivity available. Luckily, there are some libraries out there that may help. Unfortunately none of them are idea. Read on to see what we have come up with.

    (more…)

    Flash on the IPad & IPhone or the awful thought of HTML5 – A Flash Developer’s Perspective

    2-26-10

    We’ve been looking at the Adobe vs. Apple war over here with a bit of a jaded perspective. We’ve read a bunch of nonsense from both companies, and some reporters on the sides of both camps writing some positively absurd things (some Flash is no good for touch interfaces meme…wha?). I thought it might be a time for somebody from the trenches of everyday flash development to weigh in. (more…)