Adapting existing web sites for iPhone/iPad

FREE JWPLAYER HANDLES BOTH HTML5 AND FLASH

I've begun using the free JWPlayer http://www.longtailvideo.com which can handle playing both Flash & HTML5 files to play videos on my sites.

Longtail also has a paid version of the player that you can re-brand, and offers some other interesting add-ons.


Together, they support media on both the iPod/iPad platform as well as more conventional platforms.

The implementation is pretty straight forward and you can read more on their site.

Longtail recommends that you convert your(existing) videos to an .mp4 format so that you don’t have many different media file types to deal with.

I've been outputting the video files in Premier Pro CS5 but am looking for a good, inexpensive (or free) converter to convert .flv to .mp4. There are a lot of converters to choose from and I'd appreciate a recommendation.

Back to the JWPlayer...

First I needed to download the player and other necessary files from their site.

Note: If you don’t want a “share this video” page to come up at the end of the video, don’t forget to uncheck the “include Viral, a video sharing plugin” check box.

After uploading the swfobject.js, jwplayer.js, and player.swf to your site. (If you don’t upload them to the root directory, change the path’s below.)

Insert this code in the head of your page:

<script type="text/javascript" src="jwplayer.js"></script>

Then, in the body where you want the player to appear:

<script type="text/javascript">
jwplayer("container").setup({

file: "yourfile.mp4",
height: 480,
width: 720,
image: "a_still_image_to_display_while _the_video_is_loading.jpg",
autostart: true,
modes: [
{ type: "html5" },
{ type: "flash", src: "player.swf" }
]

});
</script>

The modes: code makes sure that html5 is tried first and if it’s not compatible with the particular platform, then flash is tried.

I left out the <div id="container">loading the player...</div> because it was optional and causing problems.

Jerry Kornbluth

Flash has it's uses... but personally I can't stand it and decided two years ago I'd only use it if the client insisted and/or there simply wasn't another option to achieve the client's needs.

I've been using jQuery http://jquery.com/ since 2006 and absolutely dig what can be done with it. It takes me less time to build vs Flash and it works on iPhones, iPads and other hand-held devices. Want to see a slick animation... check out this post about an animated robot http://css-tricks.com/jquery-robot/

In addition, you can easily integrate your CMS Builder code into what you're building with jQuery. Simply paste your code into your page, mix in some css with your jQuery and you can do some cool things with little effort. You do need to have some knowledge of javascript though.

Here's a simple image rotator I posted a week ago that uses CMS Builder, CSS + jQuery. http://www.interactivetools.com/iforum/Products_C2/CMS_Builder_F35/Simple_Image_Rotator_-_CMS_Builder_%2B_jQuery_%2B_CSS_P85897/

As for getting Flash to work on an iPhone or iPad... to the best of my knowledge there's no way to make it happen, because Apple does not support Flash on these two devices. I may be wrong, or maybe some company has created a solution with some kind of file conversion... it would be interesting to find out if there is a solution to Flash on iPhones and iPads now. I spent quite a bit of time researching a solution to Flash on iPhone and iPads in Nov. 2010, but had no luck finding a solution. Post what you find out.

Hi all,

As I find interesting articles about site development and video conversion for mobile phones, I'll post them here.

Mobile Phone Detection Using PHP

Mobile Meta Tags

Video Conversion Parameters For Many Cell Phones

Jerry Kornbluth

Hi all,

As I find interesting articles about site development for mobile phones, I'll post them here.

Mobile Phone Detection using PHP

mobile meta tags

Jerry Kornbluth

Jerry,
Here's some javascript I've used recently on a few projects. It detects iPhone users and if exist, redirects the user to a different URL or site page that supports iPhones. I then created an alternative non-flash version of my clients home page that contained a bit of Flash and redirected iPhone users towards that page.

From David Walsh Blog
http://davidwalsh.name/detect-iphone

<script language=javascript>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://thiswebsite.com/index_without_flash.php";
}
</script>

REPLACING FLASH WITH IMAGES WHEN A PAGE IS DISPLAYED ON A MOBILE PHONE

Here’s what I came up with to replace the flash mastheads with .png images when displayed on a mobile phone.

So far it’s working on both an iPhone, and a T-mobile Comet (Android). I’d appreciate feedback on the results with other phones and comments about any of the code.

You can access a page using this code at http://artistsofpalmbeachcounty.org

The header and footer graphics were both replaced with .png images for mobile phones only, and the slide show was implemented using CrossSlide. http://tobia.github.com/CrossSlide/

You can read more about this approach to mobile phone detection at: http://azure.ironie.org/478-php-mobile-phone-detection

Best,

Jerry Kornbluth

Here’s the code:

1) Insert this “mobile_detection” function into the body of your viewer before your first replacement is required:

<?php
function mobile_detection ()
{
if (isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE']))
return true;
if (isset ($_SERVER['HTTP_ACCEPT']))
{
$accept = strtolower($_SERVER['HTTP_ACCEPT']);
if (strpos($accept, 'wap') !== false)
return true;
}

if (isset ($_SERVER['HTTP_USER_AGENT']))
{
if (strpos ($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false)
return true;

if (strpos ($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false)
return true;
}

return false;
}
?>


Then, use this code where you want to replace a Flash .swf with a .png or other image. You can replace the .png image with the data from any CMSB field as well. (The Flash code was the code that was originally inserted by Dreamweaver):

<?php $_SESSION['mobile'] = mobile_detection(); ?>
<?php if (!isset ($_SESSION['mobile']) OR $_SESSION['mobile'] == true) : ?>

<img src="images/your_masthead.png" width="800" height="180" />

<?PHP else: ?>

<script type='text/javascript'>
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','height','180','width','100%','pluginspage','http://www.macromedia.com/go/getflashplayer','src','images/masthead','wmode','transparent','quality','best','play','true','movie','images/your_masthead' );
</script><noscript>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="180" width="100%">
<param name="movie" value="images/your_masthead.swf" />
<param name="quality" value="best" />
<param name="play" value="true" />
<param name="wmode" value="transparent" />
<embed height="188" pluginspage="http://www.macromedia.com/go/getflashplayer" src="images/masthead.swf" type="application/x-shockwave-flash" width="100%" wmode="transparent" quality="best" play="true"></embed>
</object></noscript>

<?PHP endif ?>

I've used a similar solution. Here's what I have done in the past:

I've test this solution of an iPhone and browsers. Wrap you flash in a div. Then add the WMODE parameters below to the flash object and remove background white parameters.

1. Add the following parameter to the OBJECT tag:
<param name="wmode" value="transparent">

2. Add the following parameter to the EMBED tag:
wmode="transparent"

Then add a background image in the div to load behind the flash. If flash will not play on device the image will appear, because the flash is transparent.