PDA

View Full Version : How do I incorporate video that EVERYONE can see? Quicktime redirect to Flash page???


Ian Dillon
09-04-2010, 12:47 AM
I created a website for my video production company using Dreamweaver 8 (http://www.playroomcreative.com/production.html). I have average web design knowledge.

The sample videos of my work are all MP4 (H.264/AAC) which is compatible with Quicktime and Flash, however I am using JW Flash Player on my website because most people have Flash installed on their computers. I even have a message that prompts people to download the newest version of Flash when the video doesnít appear.
My question is; what do I do about people that use iphones and ipads that canít run Flash?

I would assume that I should change the way I have it now and put a Quicktime video embedded page FIRST, then use the ďCheck PluginĒ Dreamweaver behavior to detect if they donít have Quicktime and redirect them to the Flash video page. Then, if they donít have the proper version of Flash they will be prompted to upgrade.
If I did it the opposite way (Flash page first that redirects to a Quicktime page when no Flash plugin is found) than the Flash page would never have a chance to offer itís upgrade prompt if the user doesnít have the proper version Flash.

Am I approaching this the right way?

Is there a better way (besides the use of YouTube or Vimeo type video hosting sites)?

Thanks in advance!

Bill Pitts
10-21-2010, 08:27 PM
I, too, would like an answer to this question. What is the best way to share videos with my website visitors regardless of their platform?

I use a Macintosh and don't have Flash.

Thanks,
Bill

Ian Dillon
10-21-2010, 08:42 PM
Here is a great solution I have found for providing video on my Orange County video production (http://www.playroomcreative.com/) website that most people can play without using a paid hosting plan like Vimeo. I use a local swf player (JW Player) instead of a player hosted on the Flash site. I also used a fallback to a basic Quicktime embed (instead of a fallback to html5 with mpeg4 and OGV files). I'll explain why I think that's better in a minute.

Here is the process I used:
_______________

Video Compression:

I used MPEG Streamclip to encode. Main settings are as follows:

- File Format = H.264 Video w/ AAC audio in an MPEG-4 Container!!!
- Audio = MPEG-4 AAC, Stereo, Khz (Auto), 128 kbps
- Use ďFast StartĒ (Itís greyed out in MPEG Streamclip, however itís still enabled)
- Multipass
- No B-Frames
- Limit data rate to 700 Kbps.
- Better Downscaling
- Lower Field First (only if video is interlaced and DV format. If banding occurs choose upper field.)
- Deinterlace Video (only if video is interlaced)
- Size = 320x240 (SD) or 320x180 (HD)
_______________

Code:

1. Download the Flash player from JW player at http://www.longtailvideo.com/players/jw-flv-player/

2. It doesn't include the expressinstall.swf for some reason so make sure you download it. Instructions and a download link are located here:
http://blog.deconcept.com/swfobject/
Make sure you use the expressinstall.swf from SWFObject version 1.5 because that is the version JW Player uses (and recommends) in it's code wizard. All you need from all the files that download is just the expressinstall.swf.

3. Upload the swfobject.js and the player.swf from JW Player download to the top level of your root directory on your server. Then do the same with the expressinstall.swf from deconcept download.

4. Create an ID DIV for the fallback video. If the Flash expressinstall fails (such as on an iphone or ipad that doesn't use Flash) then it will FALLBACK to the video in the ID DIV.

5. Use the code wizard from JW player to point to your video and player files (you must use the complete paths ie. http://...) and make the other settings you want. MAKE SURE YOU SELECT THE EMBED USING "SWFOBJECT 1.5 CODE" NOT "EMBED CODE" (located above the generated code) that way we can use the fallback and expressinstall features, then copy the code and paste it right after the ID DIV in your body. Full instructions are located on the JW player site and on the deconcept page above. The code wizard is located on the JW Player site here:
http://www.longtailvideo.com/support/jw-player-setup-wizard

6. Now you have to manually add the expressinstall.swf code into your code. I will show a full example below but instructions are on the deconcept site I gave the link to. Express install will automatically prompt the user to install a newer version of Flash if the designated version is not found. The first version of Flash to play H.264 was 9.0.115 so you can see where I inputted that below. I also used autoplay parameters because I wanted my videos to auto play.

7. Now see the code inside the DIV ID below? That is where you put the fallback video or videos. Many people suggest putting the html5 "video" tag here with an MP4 first and an OGV of the same video second. Instead I used a simple Quicktime embed of the same MP4 file I used for the Flash player. That way I didn't have to re-encode all my files for OGV and iphones and ipads can still play it!

8. Use the following video player sizes in your code.

JW Flash Player (Controller is 24 pixels tall):
SD = 320x264
HD = 320x204

Quicktime Player (Controller is 16 pixels tall):
SD = 320x256
HD = 320x196
________________

Conclusion:

If someone comes to my page and they have an older version of Flash than 9.0.115 then expressinstall.swf will prompt them to download a newer version. If they don't have Flash installed or have an iphone or ipad then the Quicktime player will play the same file.

Here is my code. Notice the difference in size between the Quicktime player and JW Flash Player in the respective parts of the code:

<div id='media-320x264'>
<embed src="../media/doubletree.mp4" width="320" height="256" autoplay="true" pluginspage="http://www.apple.com/quicktime/download/"></embed>
</div>
<script type='text/javascript'>
var so = new SWFObject('http://www.playroomcreative.com/player.swf','mpl','320','264','9.0.115');
so.useExpressInstall('http://www.playroomcreative.com/expressinstall.swf');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','http://www.playroomcreative.com/production/media/doubletree.mp4');
so.addVariable('autostart','true');
so.write('media-320x264');
</script>


To see it in action, click on one of the video thumbnails on my page:
http://www.playroomcreative.com/production.html
_________________

Other great resources:

http://camendesign.com/code/video_for_everybody
http://adobe.edgeboss.net/download/adobe/adobetv/gotoandlearn/html5fallback.mp4
_________________

Playroom Creative
Orange County Media Production and Visual Marketing | TV, Web, Print
http://www.playroomcreative.com/

Bill Pitts
10-22-2010, 12:55 AM
Thazzalot to read! But read it I shall!

Understanding it? . . . there's another question altogether but I will press on.

Thank you, Ian. We'll see what happens.

Bill

domedia
11-01-2010, 01:13 PM
I think most will use a free service like youTube or Vimeo.
Then you get the player made for free for your website, and you also get the added benefit of sharing it on a social network.

Ian Dillon
11-01-2010, 06:57 PM
You Tube has low quality. Vimeo has better quality. Neither lets you pick the exact thumbnail you want to describe your video. Both are free but have their logo branded on the player and advertisements. Vimeo does have a paid version that is unbranded and unadverted though. If you want to do it the free, professional way, having total control over how it plays (autoplay, custom player skins, etc., etc., etc.) do it the way I described above.

domedia
11-03-2010, 05:15 PM
I watch HD content on vimeo and youtube all the time. Also I remember picking up thumnails for a video, so at least that functionality has been there.

Robyn here can be viewed in 720, and even 1080(!).
http://www.youtube.com/watch?v=CcNo07Xp8aQ&feature=fvsr

What you're saying was maybe true a couple of years ago, but I can't see that it's 'unprofessional' to use them. In all practical means they're the quickest way of getting video on your website and to the millions of youtube users.

There's plenty of reasons to get a custom player, or to not use an online video website. You probably know what these reasons are more than most, because of your company. But if the question is "What is the best way to share videos with my website visitors regardless of their platform?" then it's really hard to beat youtube :)

As to your original question, there is something called Packager that might work. AFAIK, the idea of the app is to convert flash content to iPhone. I'm not an iPhone developer, so I have no experience or help but the link: http://labs.adobe.com/technologies/packagerforiphone/

opet
12-17-2010, 12:16 PM
for converting flash usually I use Flash To Video Encoder ( www.geovid.com )

Ricky55
12-18-2010, 12:52 PM
I have just done this on a site. I used flash with their new hosted media player component with a html5 fall back you can do it the other way round if you want. Plays on most devices.

Great resources are

http://camendesign.com/code/video_for_everybody
http://www.gotoandlearn.com/play.php?id=128

Using these methods you can choose the quality yourself.

The html5 fall back uses mp4 video for safari and other webkit browsers and apples iPad and phone. It uses the ogg format for firefox.

My page is here I've tested this on a few devices and it works well

http://www.judithharrop-interiordesign.co.uk/publicity.php

Ricky55
12-18-2010, 12:57 PM
Sorry Ian repeated one your links. I prefer how my video opens though rather opening a new browser window.