[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Dreamweaver/Flash CS3/Web Video

Posted on 2010-01-04
16
Medium Priority
?
828 Views
Last Modified: 2013-11-13
Hi Experts,

I've been working with web video, getting to best practices, and so forth.

I'm now working with Dreamweaver and Flash CS3. From what I've researched, inserting the flv is preferred over the SWF file.

I've imported mp4 files into Flash. I've set my preferences for the document dimensions to include room for the playback bar, one of the default skins in the Flash interface and quality setting in both the Flash and HTML to medium. Then I save and publish.

I go into Dreamweaver to Insert Media, Flash Movie (FLV vs. Flash) - I select the FLV file and the prompts for skin and dimension have a default that have nothing to do with the FLV file, or skin, I saved.

Also the path to that player gets put in the main directory, whereas in the Media folder (directory), where my FLV file is, the player skin I saved is in there with the FLV.

So, when I have to use the Dreamweaver insert media option, I get the attached default code, which does not have any of my settings.

What do I need to do to get to the path of the FLV - which again has the skin dimensions and quality settings I want - and the skin in that same directory?  

My concern is that if I edit the generated default code directly the dimensions and quality would have a redundancy that makes things worse. So changing the quality to medium in the default code would further degrade the clip, etc. Or the dimensions in the default code are for the actual media file dimensions vs. the dimensions I set out in the skin player.


Thanks


<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','320','height','240','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=media/MyMoviet&autoPlay=false&autoRewind=false','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //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=8,0,0,0" width="320" height="240" id="FLVPlayer">
        <param name="movie" value="FLVPlayer_Progressive.swf" />
        <param name="salign" value="lt" />
        <param name="quality" value="high" />
        <param name="scale" value="noscale" />
        <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=media/MyMovie&autoPlay=false&autoRewind=false" />
        <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=media/MyMovie&autoPlay=false&autoRewind=false" quality="high" scale="noscale" width="320" height="240" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />      
</object></noscript>

Open in new window

0
Comment
Question by:rcbprov
  • 8
  • 8
16 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26173812
Hi rcbprov,

DW is trying to out-think you here.  It doesn't expect you to have to enough skill to create your own skin :)

There are two ways you can go from this point.  One is to simply edit the above code and change the references from "Clear_Skin_3" to "media/Your_Skin.swf".  The other is to not use the DW autocode and instead use something like SWFObject to embed your player and video.  
0
 

Author Comment

by:rcbprov
ID: 26174243
Thanks-what took you so long:)

I'll give your first recommendation a try first and follow up later, or tomorrow.

I poked around with some of the other JS solutions, and player options like Flow Player, and could not figure it out.

The SWFobject embed would be for the SWF media file, or the SWF file of the player?

I'm planning on the option I'm working with being happy as it can be cross browser.

Thanks again.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26174281
>> Thanks-what took you so long:)

Typing with only one hand today. ;)

>> I poked around with some of the other JS solutions, and player options like Flow Player, and could not figure it out.

Really?  Those are not that hard to use...especially FlowPlayer and JW Media Player.  Some jerk even wrote an Article about it:

http://www.experts-exchange.com/articles/Web_Development/Miscellaneous/Affordable-Web-Design-Adding-Video-to-Your-Site.html

>> The SWFobject embed would be for the SWF media file, or the SWF file of the player?

Both, technically.  You embed the player and use a flashvar to tell it which media file to play.   FlowPlayer uses its own javascript embedding method while JW Media Player use SWF Object.  See the article above for a simple FlowPlayer sample.
0
Get your Disaster Recovery as a Service basics

Disaster Recovery as a Service is one go-to solution that revolutionizes DR planning. Implementing DRaaS could be an efficient process, easily accessible to non-DR experts. Learn about monitoring, testing, executing failovers and failbacks to ensure a "healthy" DR environment.

 

Author Comment

by:rcbprov
ID: 26191317
Hi

I had checked out your article a few weeks ago - nice work. And I think we can figure at this point if it is easier to solve where I am now - or walk through the Flow Player, or the SWFObject.

I've tried to describe the current status and question briefly. Basically, no dice. yet. EXCEPT another DWeaver template option works - but is a glaring white box. (Halo Skin). Depending, I may settle for this.

JS paths:

in the media directory there is a JS file that got created. So it seems like I need to include that path in the Header.

Header
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></scrip>

This script is in the 'media ' folder along with the skin and FLV files.
??<script src="media/AC_ActiveX.js" type="text/javascript"></script>??

Flash Code:

src and value = FLVPlayer_Progressive.swf
Is that a Flash convention that is saying 'whatever the skin is/player is, load the file progressively.'

The FLVPlayer_Progressive.swf is in the main directory.

Replaced default skin name which had no SWF extension, with my path to 'media/SkinUnderAll', so did not add SWF extension, either.

'SkinUnderAll' does not have the lower case dashes - is that a Flash convention?

I've pasted the current code and attached a screen capture, which regardless, does not show the controls.



 <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','324','height','270','id','FLVPlayer','src','FLVPlayer_Progressive','flashvars','&MM_ComponentVersion=1&skinName=media/SkinUnderAll&streamName=media/TheTempest&autoPlay=false&autoRewind=true','quality','high','scale','noscale','name','FLVPlayer','salign','lt','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLVPlayer_Progressive' ); //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=8,0,0,0" width="324" height="270" id="FLVPlayer">
        <param name="movie" value="FLVPlayer_Progressive.swf" />
        <param name="salign" value="lt" />
        <param name="quality" value="high" />
        <param name="scale" value="noscale" />
        <param name="FlashVars" value="&MM_ComponentVersion=1&skinName=media/SkinUnderAll&streamName=media/TheTempest&autoPlay=false&autoRewind=true" />
        <embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=media/SkinUnderAll&streamName=media/TheTempest&autoPlay=false&autoRewind=true" quality="high" scale="noscale" width="324" height="2270" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" />      
</object></noscript>

Open in new window

Screen-shot-2010-01-06-at-10.25..png
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26193439
>> EXCEPT another DWeaver template option works

If the internal DW stuff is working but your own player isn't, the problem may be in the player itself or in the use of your player with the FLV_Player_Progressive file (your skin may not be hooking into it properly, or at all).  I would tend to get away from the DW stuff now and focus on using SWFObject or FlowPlayer or JW Media Player to accomplish the task.


>> ??<script src="media/AC_ActiveX.js" type="text/javascript"></script>??

Not sure why that it is in there.  Did you have wmp or some ActiveX object in this page at some point?

>> src and value = FLVPlayer_Progressive.swf
>> Is that a Flash convention that is saying 'whatever the skin is/player is, load the file progressively.'

It's not a Flash convention, but rather how the internal skins in DW work.  You can choose to play the FLV progressively or otherwise and if you choose "Progressive" then DW uses that Flash file to pass the video in chunks to the player.  It's kind of a closed look system and if you are using your own skin then re-embed the file with DW but uncheck "Progressive" from the wizard and it will rewrite the code to not reference FLV_Player_Progressive.  Then replace references to the DW skin with references to your skin.

It's a little odd for the progressive stuff to be split to a secondary file that has to be explicitly called.  None of the other players do that.

>> 'SkinUnderAll' does not have the lower case dashes - is that a Flash convention?

No, the underscores are just used for readability.  





0
 

Author Comment

by:rcbprov
ID: 26213222
Hi

I had tried Flow Player a few weeks back with no success. I looked at your post and the FP code. I think the issue is still paths and directories....I hope, anyway.

Flow Player downloads as a complete folder, as you know. So, I'm not sure if that's the path it wants to be and keep in my files; a 'flow player' folder, where the JS is in the same folder as the swf.

Here what is happening:

HEADER
<script type="text/javascript" src="Scripts/flowplayer-3.1.1.min.js"></script>

HTML
<h5><a href="media/MyMovie.flv" style="display:block;width:324px;height:270px;" id="player"> </a>
<script language="JavaScript">
      flowplayer("player", "media/flowplayer-3.1.1.swf");
</script>
 </h5>

What I'm currently getting online is the clip area with an active state, (re:the little white hand shows up), when clicked it wants to download the FLV to my local machine.

No player shows up.

On the near horizon will be inserting a still/poster image. And a page that has three clips on it.

My main objective is to get these clips as cross browser compatible as possible.

A test for another page is up with QT, mp4s that works cross browser. My understanding on the annoyance factor for users is that more users would get a Plug In prompt for QT then Flash.

Thanks again for your time.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26214291
Can I get a link to test? Makes it easier to spot path errors...
0
 

Author Comment

by:rcbprov
ID: 26235447
The page is up at oneineight dot net AfterSchoolD / html.

It is up as a test page.

There are other pages on the site w/functioning vid of assorted variations of file types as I work towards the best standard, site wide.

A portion of this is counseling a web client through the process that nothing looks, or works, exactly the same on every computer, on every operating system,on every connection speed, with every browser in the whole wide world.

The clips exist and are prepared in swf, flv, .mov and .mp4.  

Like I said, I do seem to have the cross browser QT code pretty happy where QT has been embedded.
oneineight dot net JaniceClips / html

Thanks
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26275997
You don't have Scripts/flowplayer-3.1.1.min.js uploaded.  When I check:

http colon slash slash oneineight dot net slash Scripts slash

I see:

flowplayer-3.1.4.min.js

So change the HTML on that page to match the correct filename and try again...

>> A portion of this is counseling a web client through the process that nothing looks, or
>> works, exactly the same on every computer

Yeah, but Flash is the best bet for total cross-browser compatibility since the plugin is so prevalent.  WMP or QuickTime makes a lot of assumptions about the end user that probably isn't correct and QuickTime's download footprint is so massive that it is fairly prohibitive at this point...
0
 

Author Comment

by:rcbprov
ID: 26289377
I'm hit with the flu. I'll check in, follow up and wrap this thread up soon.

Thanks
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26289685
Take your time, I'm not going anywhere.
0
 

Author Comment

by:rcbprov
ID: 26306386
Hi

The issue was the js file name and Flowplayer SWF name. The folder I downloaded from the site includes 'flowplayer-3.1.4min.js', and 'flowplayer-3.1.5 swf'.

Weird that they have different version numbers - but the file is loading and playing on that page. Terrific!

All that I'm left with is how to not have it play automatically....

The js file is extensive - as you know. I don't know if it is buried in there. Or if it is a snippet of js to put right in my HTML.

The player controls is an swf file - so I could not get into there to see if there was actionscript that was involved, and might help. But I don't think actionscript would be the way to go, anyway...

I've only checked w/OSX in FF so far...I'll be able to check it later on other platforms, etc.

We're almost there.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 26306460
>> Weird that they have different version numbers

Not really.  The javascript and the SWF are totally different objects with different functions and are developed asynchronously.  You can use an older or newer SWF with the JS file and vice-versa.  

>> Or if it is a snippet of js to put right in my HTML.

Yup.  You just alter the script file slightly to add all sorts of options:

http://flowplayer.org/documentation/configuration/index.html

<script>
flowplayer("player", "flowplayer.swf", {
    clip:  {
        autoPlay: false,
        autoBuffering: true
    }
});
</script>
0
 

Author Comment

by:rcbprov
ID: 26310084
All the way from trying to trump Dreamweaver to some nice, clean, page code!
Even had a page with multiple clips that I got going.

Have not tried cross browser/platform yet - but it should be ok.

Thanks for a great assist with the FPlayer tool that will be needed and used other times on other sites.

Remind me again why I started in on web design....I know it wasn't the money...

Thanks, again.
0
 

Author Closing Comment

by:rcbprov
ID: 31672560
Thanks!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26346106
>> Remind me again why I started in on web design....I know it wasn't the money

If it isn't the money, you're not charging enough :)

>> Have not tried cross browser/platform yet - but it should be ok

Yes, it should.  If the user has Flash installed, then this method works.  What's more, some of the newer Android phones should also be able to see and play the videos.  I just popped over there...it looks pretty good in Firefox.  Your video scales up to full screen very well, too.  I could read the text on the Tempest script @ 1680 x 1050
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
Geo-targeting is the practice of distributing content based on a person’s location, as best as you can determine it. Let’s look at some ways you could successfully use this tactic. The following tips and case studies could lead to meaningful results.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
Suggested Courses
Course of the Month19 days, 18 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question