Display a transparent mov file on a webpage - html

I bought this flying birds MOV file from istockphotos and now I'm stuck trying to implement it into my webpage, I want it to run like a flash file, every few seconds but I can't seem to be able to import it into Adobe Flash, I tried using the code below but it does not allow me to do much and is not transparent:
<OBJECT classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="320"
height="255" codebase='http://www.apple.com/qtactivex/qtplugin.cab'>
<param name='src' value="ad.mov">
<param name='autoplay' value="true">
<param name='controller' value="false">
<param name='loop' value="false">
<EMBED src="iStock_000011342270Small We.mov" width="320" height="255" autoplay="true"
controller="false" loop="false" pluginspage='http://www.apple.com/quicktime/download/'>
</EMBED>
</OBJECT>
The person who created the stock wrote this on his site:
Alpha Mattes and Luma Mattes
Some of the clips contain alpha or luma mattes. If you don't know how
to use these, search online and discover their uses as masks. I've
heard from people who have converted my footage to use in Flash and
have successfully used the luma mattes there too. The black and white
clips of the birds can used as luma mattes, so the birds can be placed
on any background of your choice. As mentioned above, if you're using
After Effects, any of the clips can be used with the free Knoll
"UnMult" plugin which removes the black from the clips by creating an
alpha channel - it works really well with the rain and smoke clips.
I don't understand what a luma matte is, maybe someone can point me in the right direction?

There didn't seem to be a way to fix this issue, I ended up making the video transparent myself using Adobe After Effects and a great tutorial using Keying, it wasn't the best but it did the trick

Related

Embedding audio files in html with album artwork

So I am embedding the music like so (testing in firefox),
<object width="300" height="20">
<param name="src" value="music/Furrow.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#FFFFFF">
<embed src="music/Furrow.mp3" autostart="false" loop="false" width="300" height="42" controller="true" bgcolor="#FFFFFF">
When I load my html pages, there is a little VLC type player, which is perfect. However I have an issue, the player looks like this when i take my mouse off the player,
http://imgur.com/3aCGfx0
How can I change the orange cone + black background to have lets say, album artwork or a picture?
Thanks
PS this might not be the best way to add music, but I am just trying to work out the album artwork for now
The way your doing it is using a default plugin provided by your browser. In your case, this is VLC, but this depends on the client media plugin.
What you have to do is using a custom media player (you know have choice between flash, html5, or so ...), and manage the artwork by your own.
Look at existing solution such as subsonic, ampache ...
Example screenshot form subsonic : there is a little embed flash player, and playlist + artwork is handled with javascript.
To begin with, should know your source code, perhaps a picture to absolute position for the cone icon in CSS.
ps : JW player offers solutions with playlist and album art, always with flash player.
http://www.longtailvideo.com/jw-player/download/

How to embed a flash object on my website?

Well, I must say this is embarrassing to ask, but to my defense I'll say that throughout my years of web development I've never encountered a case where embedding flash was absolutely necessary.
The Question
Simple, how do I embed a flash object of any kind (*.swf or if there any other options, them too) to my website?
Some Points
I don't need the code, I already have that, I just don't really understand it.
I'm looking for a good explanation on how to use the <embed> or <object> elements.
I've been searching around but couldn't find a clear explanation, even in the specs.
I'd award any good answer with an upvote, a cookie, and an accepted answer to the best :)
Definitions:
http://www.w3.org/wiki/HTML/Elements/embed
http://www.w3.org/wiki/HTML/Elements/object
Explanation on how to embed a flash object from Adobe:
http://kb2.adobe.com/cps/415/tn_4150.html
"The HTML OBJECT tag directs the browser to load Adobe Flash Player and then use it to play your SWF file."
Change "YOURFILENAMEHERE.swf" with your .swf file name.
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="320" HEIGHT="240" id="Yourfilename" ALIGN="">
<PARAM NAME=movie VALUE="YOURFILENAMEHERE.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#333399>
<EMBED src="Yourfilename.swf" quality=high bgcolor=#333399 WIDTH="320" HEIGHT="240" NAME="Yourfilename" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>

embeding a video on a website without controls

I am trying to embed a video on a website which will be used as an intro. Im interested in a way of embeding that video without a control bar (play,pause...). I can convert it to any format as I have the project file so compability isnt an issue. I have tried inserting it with tag in HTML5 and that works seamlessly but because of a bug in Chrome white color in the video becomes gray and that doesnt work for me because video background has to be white so it can be camouflaged with the rest of the website.
Interesting. I haven't seen the Chrome/white issue, but from the sounds of it... it's just in dev versions of Chrome? I'm basing this off the last comment from this post.
Looks like there was a patch, and it's waiting to be merged.
Not sure if these help in terms of using HTML5's video tag. If you don't care about the tag, you could always go with a Flash-based version using an .mp4 file. That way, whenever you're comfortable with Chrome's rendering... you could set it back up with the video tag.
Again, if you're ok with using Flash... you could pull it off like so (using Flowplayer):
<object width="600" height="338" type="application/x-shockwave-flash" data="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf">
<param name="movie" value="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "/yourDirectory/yourMovie.mp4", "autoPlay":true, "autoBuffering":true},"plugins": {"controls": null}}' />
</object>
Again, not sure if Flash is a deal-breaker here.

Show flash while buffering?

i'm developing a web where i want to show a flash on the index page. The flash got 3Mb size. But while it is downloading, i just see a white space where it should be.
I have tried putting an image in the background, but i just see white until the flash is fully downloaded...
Any tip? I would like to see the first image of the flash, or an static image while it is loading?
im just putting it in the direct way
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="899" height="138">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="899" height="138">
<param name="movie" value="FELIPE.swf" />
<param name="quality" value="high" />
<embed src="FELIPE.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="899" height="138"></embed>
</object>
Depending on your environment, flex, flex builder, flash, etc, the method will be different. But what you are looking for is a 'preloader'. You move all your resources out of the first frame and move it to the second frame, the movie will load the first frame fast, display your 'loading message', then stop, and actionscript runs checking for the load progress of the swf, when it is complete, it advances to the second frame and plays your movie.

Meaning of attributes and parameters in HTML Flash tag?

In the below code, what are all the parameters and attributes used, why are all these used and what's their meaning here?
What parameters and attributes are recommended and what are not to use with a Flash tag in a HTML page?
<object id="vf_flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="630" height="400">
<param name="movie" value="/videos/swf/3fun.swf" />
<param name="FlashVars" value="id=72" />
<param name="allowScriptAccess" value="always" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="wmode" value="window" />
<embed name="vf_flash" src="/videos/swf/3fun.swf" FlashVars="id=72" width="630" height="400" allowScriptAccess="always" loop="false" menu="false" quality="high" wmode="window" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
The Adobe website has clear and concise explanations of all of these tags, including which are optional and which are required.
http://kb2.adobe.com/cps/127/tn_12701.html
Out of order, and based on memory. Verify these all before use, but it should help you wrap your head around the concepts:
In the fight for monopoly over the web, Microsoft has committed to differ from the W3C whenever possible. Therefore, the actual tag used to embed Flash in Internet Explorer is 'object', in all real browsers it's 'embed'.
It must be noted that using '1' and '0' will give you better overall consistency than 'true' and 'false', due to this fight.
loop - tells whether or not the Flash player should attempt to restart the movie when it finishes playing it.
FlashVars - parameters can be passed into Flash, and are referred to through the flashvars unit. For example, if you create a media player that plays song1 you may pass in Flashvars="song1=song1"
movie - the URL of the Flash file. Keep it in the same folder as the HTML file calling it, or use an absolute URL or you will hit a cross-browser issue.
quality - the higher the quality the more resources Flash requires to run. While the default is good, if you are worried that the player will be used on older computers, sometimes sacrifice image quality for the sake of a less jumpy experience
wmode - the background opacity of the movie. Sometimes you want the movie to blend in with the background, and it gets set to "transparent", sometimes it should clearly be its own little box, "opaque". Note here that there are some easter eggs with this value, if you need it, there are some undocumented options for this value.
allowScriptAccess - I actually thought this was deprecated. It changed a lot in different versions. Leave this on default.
Libraries like Mootools have classes designed for working with Flash and JavaScript together.
Take a look here and here for the articles on A List Apart (ALA) on the embed vs object tags, there is a lot to be learned from it.
The one's that I can answer off the top of my head:
"movie" - the name of the flash file to load/view
"loop" - whether the animation plays once (false) or repeats (true)
"menu" - whether to show the full context menu (true) or not (false). Setting this to false shows the context menu, but it only has the "settings" and "about" options.
See Kane Wallmann's link for the full documentation.