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

Hi All,

My next challenge is going to be converting a pile of existing flash mastheads, page topic headings and footers so that they'll play on an Ipod/iPad.

On one of my sites I've inherited a large number of what I think are 1 frame flash mastheads, page topic headings and footers.

They've been playing fine using code like:

<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/masthead' ); //end AC code
</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/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>

My client would like to keep them for the iPhone/iPad, and I'm looking for a way to convert these so that I don't have to rebuild them all. (They can't afford to do that anyway)

I've attached one of each in case someone has the time to take a peek.

Thanks,

Jerry Kornbluth

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.