Posted in tutorials, web | July 27th, 2010 | Comments: 0

Although Flash is reaching more and more devices every day and expects to be on 50% of all mobile devices by 2012, it is always a good idea to have alternative content for older devices that can not support Flash, or users that choose to disable it.

Here are a few quick ways for web designers/developers to display alternative content for devices without Flash.

1) Embed Code


	
	
		
	
	Alternative content
	
		
	

2) SWFObject

http://code.google.com/p/swfobject/

You can display the alternative content in the <div> that you are writting the Flash object to. If you wish to do other things (redirects or content changes) you can detect if Flash is installed with the JavaScript below.

     var flashSupported = document.getElementById('myContent');
     // if flash is not supported then go to a HTML page
     if( flashSupported.innerHTML.indexOf('embed') == -1 )
          document.location.href="noFlash.html";

3) Flash Player Detection Kit

The Flash® Player Detection Kit helps developers implement robust player detection for a variety of deployment environments by providing a set of templates and techniques to successfully detect the version of Flash Player installed on a user’s computer, and, if needed, to then install the latest version of Flash Player. The kit also includes a detailed explanation and sample files for implementing the new, player-based Flash Player Express Install experience.

http://www.adobe.com/products/flashplayer/download/detection_kit/

4) User Agent

If you have some programming knowledge you can check the User Agent sent from the browser. If you know the agents that do not have Flash support or you would like to show alternative content this is easily done.

List of User Agents

http://www.user-agents.org/

C#

Request.UserAgent

PHP

$_SERVER['HTTP_USER_AGENT']

JavaScript

http://www.quirksmode.org/js/detect.html

Posted by Beau Durrant

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Ping This!
Posted in web | April 21st, 2010 | Comments: 0

I am not going to debate in this post (you can find enough of that on the web), but just list 5 pros and cons for each technology. Each has it’s own uses and often more than one is used on the same site as an option for the viewer or fall back to reach a broader audience. There are lots of options out there for videos players, make sure you are using the one that fills your needs.

Silverlight 4

pros:
- DRM (Digital Rights Management)
- GPU acceleration for HD video rendering
- plays multiple video/audio formats
- IIS smooth video streaming
- out of browser (desktop applications)

cons:
- installed on 60% of computers
- only plays back on new MS (Microsoft) mobile devices
- design tools are Expression Blend/Design not Photoshop
- all development must be done on Windows
- proprietary technology

Flash 10

pros:
- installed on 98% of computers
- custom UI with vector art
- FMS (Flash Media Server) Streaming and Security
- development on Mac and Windows
- out of browser (Adobe Air)

cons:
- only plays on mobile devices with the 10.1 release (not yet available – May or June)
- GPU acceleration only with 10.1 release (not yet available – May or June)
- proprietary technology
- fragmented non-standard players (without the use of the Adobe OSMF)
- development toolkits (Flash & Flex) both cost to make applications

HTML5

pros:
- open standards
- works with new mobile devices
- development on Mac, Windows and Linux
- free development tools, no need to purchase software
- in the future it should work across all browsers and mobile devices (in theory)

cons:
- no full screen video
- no video standard (no h.264 playback in Firefox)
- can not be embedded
- only supported by new browsers
- won’t be finalized until 2022

Posted by Beau Durrant

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Ping This!
Posted in current events, new technology, the future, video, web | March 26th, 2010 | Comments: 3

If anyone has seen the previews for Flash 10.1 it is very exciting. One medium for playing videos, games, animations, ads, navigators, … working across all platforms, except Apple.

Using Flash can bring down the cost of developing mobile apps. There are currently 5 major app stores for mobile devices; Palm, Microsoft, Google, Apple and Blackberry. As things are right now you would have to make an app in each market (using different languages and technology) to reach the entire mobile audience, but Flash 10.1 will change this.

Flash 10.1 is set to run on everything; netbooks, tablets, computers and smartphones. So every site that works on your computer will also work on any internet connected device if it supports Flash 10.1. Flash 10.1 is also GPU (hardware) accelerated, so animations and video will run extremely fast even on lower priced hardware. This also brings me to question if Adobe CS5 will also have 3d rendering with openGL or DirectX. Flash 10.1: Full Flash for Everyone But iPhone, Actually Playable HD Vids

The exception will be any of Apple’s mobile devices which are unfortunately becoming the IE6 of mobile devices. They hold just enough market share to have to support them, but don’t play nice with everything else out there. Some companies are falling back to HTML5 when encountering a devices from Apple, others are turning to apps. This is a major inconvenience to have to spend extra time and money to develop something specifically for 24% of the smartphone market.

HTML5 is nice for video, but if you support HTML5 with h.264 video then you choose to not support anyone using Firefox (50% of internet users). Also features that can be done on Flash; multi-bitrate streaming, full screen, embeddable video, video ads, overlays, hotspots and interactions are not available. So HTML5 can not be used alone, but only in combination with another technology. If you want to see more about HTML5 you can view my other post for more information.

Fortunately for everyone Adobe has an answer that will save time and money. If you created a mobile application in Flash 10.1 it will not run on Apple, or will it? With the new Adobe CS5 Suite you can now export Flash to an iPhone app. So you will be able to build an app to run on everything with one technology.

There is an example below of Flash application that was built by the New York Times for a mobile site. It can also be exported as an iPhone app, submitted to the store where it will undergo a 2-6 week approval process, hopefully be accepted then can be used as a fallback for the mobile site. The development costs will be lower and the user experience will be consistent across all platforms.

Here are a couple more examples of Flash 10.1:

Flash Player 10.1 prerelease software demos and interviews

Packager for iPhone Examples

I guess only time will tell if Apple will adopt Flash or if it will affect Adobe or Apple’s market shares.

Posted by Beau Durrant

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Ping This!
Posted in new technology, video, web | February 3rd, 2010 | Comments: 1

This is a brief description of Streaming vs Progressive Download with Flash and how it relates to web video.

Progressive Download

This is a common way people link to videos from their own websites. They encode a video, upload it to their website then embed the video.

When someone views this video it is downloaded to their computer. The web server does not care about the quality or size of the video, it will allow them to download it like any other image or document as fast as they can. Playback will begin as soon as enough video has been downloaded, but you are not able to fast-forward to the end of the video without it being downloaded.

To get a little more technical this transfer happens over HTTP (Hypertext Transport Protocol) which operates on TCP (Transport Control Protocol). These protocols make every little bit of video that is downloaded to your computer will be a little larger than it needs to be. This is to ensure that every piece of data is guaranteed to be delivered and if it isn’t the data is sent again, using a little more bandwidth. If someones internet is interment you can end up using more bandwidth for resending information than for the video itself.

TCP (progressive download) is not designed for efficient real time delivery or careful bandwidth control. But if you need a file accurate and reliable then it will deliver every time.

When the h.264 codec was released this introduced another flaw in progressive downloads. h.264 has the information to play the video at the end of the file, so the whole file must be downloaded before the video can start to play. (This was fixed with Flash player 10)

Key Points:

  • cannot be used for live events
  • is not efficient
  • is not secure
  • can not adjust for a users connection speed
  • can not jump to video without it being downloaded
  • video is downloaded

Streaming (Flash Media Server)

Streaming is more efficient and less common because you need FMS software running on a web server to use it. It works similar to embedding a video on a website using progressive download. The videos is encoded, uploaded to a FMS then embedded on a website.

When someone views the video a well made player will detect the viewers connection speed and buffer a little video, not downloading the whole file. A viewer will be able to fast-forward to any place in the file without having to download it.

To get more technical the videos are transferred over RTMP (Real Time Messaging Protocol) or RTMPS which has little overhead compared to HTTP. Every little piece of video that is sent to your computer will be just enough to view the video. If someones connection is interment then the video will pause, re-buffer and start when the connection is better. This is a more efficient use of bandwidth.

Also if RTMP (port 1935) fails it will fall back to RTMPT which will send the packets over HTTP, but will not need to resend information as with progressive download.

Using FMS and streaming videos you can also apply security by IP viewing the video or web page the video is streaming from.

Key Points:

  • can be used for live events
  • used for advanced interactive content
  • is efficient
  • adjusts for connection speeds
  • video is not downloaded
  • better analytics (how many seconds viewed)

Posted by Beau Durrant

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Ping This!