Perfect solution for HTML Flash Insertion-SWFObject, full compatibility-swfobject

Source: Internet
Author: User

Perfect solution for HTML Flash Insertion-SWFObject, full compatibility-swfobject

Some friends may think that lash embedding is very simple, but it is not that simple to solve some specific problems. For example, how can I remove the web browser's Virtual Frame blocking FLASH? Are other browsers such as FF, OP, and NS compatible? Does the Code comply with W3C standards ?? And so on.

Next I will post a document from someone else and learn it together.

I. Traditional Methods

<Object classid = "clsid: d27cdb6e-ae6d-11cf-96b8-444553540000" codebase = "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width = "550" height = "400" id = "Untitled-1" align = "middle">
<Param name = "allowScriptAccess" value = "sameDomain"/>
<Param name = "movie" value = "mymovie.swf"/>
<Param name = "quality" value = "high"/>
<Param name = "bgcolor" value = "# ffffff"/>
<Embed src = "mymovie.swf" quality = "high" bgcolor = "# ffffff" width = "550" height = "400" name = "mymovie" align = "middle" allowScriptAccess = "sameDomain" type = "application/x-shockwave-flash" pluginspage = "http://www.macromedia.com/go/getflashplayer"/>
</Object>

This method uses the object and embed labels for embedding. We will find that many parameters of the object and many attributes in the embed are duplicated. Why? For the sake of browser compatibility, Some browsers support objects and some support embed, which is why we need to modify Flash parameters in both places.

 

This method is always the Official Method of Macromedia, ensuring the Flash function to the maximum extent without compatibility issues. However, it is not so useful now: verification fails, because the embedded embed label for compatibility does not comply with W3C specifications. Of course, if you don't care about any non-standard rules, let alone.

For various reasons, Microsoft restricts the use mode of IE ActiveX after sp2, that is, there is a virtual box in ActiveX on the page, and you need to click it once to interact normally. Flash is embedded into web pages as an ActiveX, so it is also affected. This problem can be solved only when Flash is embedded through JS.

No Flash version check. If the flash plug-in version of the browser is not available, or your swf file cannot be properly displayed, or an ActiveX confirmation installation box will pop up. This box is terrible for many users.

Ii. JS Embedding Method

JS embedding has different embedding methods, and well-embedded and poorly-embedded. Some people use document. write to write directly. This method is not very good to tell the truth. It feels that there are too many components of hack. It is a bit of a verification purpose and does not reflect any JS advantages. I think a good JS embedded script should have Version Detection to take advantage of the JS advantages on the basis of ensuring that Flash should have functions, it is easy to reuse to solve the problem of accessibility (that is, how users can solve the problem when they cannot browse Flash content or disable JS.

Here we will talk about the SWFObject solution:

"SWFObject" uses Javascript to insert flash. It has many advantages and simple code. It does not prompt "Click here to activate the control" under IE6 and can pass W3C verification. Different from the traditional flash Insertion Method of "object.

SWFObject in the new 2. in Version x, the simplest call requires only one sentence and does not need to wait for the page to load. This means that you can write this sentence anywhere on the page. It is much easier than the previous version. The following describes several simple and commonly used call methods:

1. the simplest and most basic sentence, which can be used as long as you want to insert flash.

<Div id = "swfid"> </div>
<Script type = "text/javascript" src = "swfobject. js"> </script>
<Script type = "text/javascript">
Swfobject. embedSWF ("test.swf", "swfid", "300", "120", "9.0.0", "expressInstall.swf ");
</Script>

Annotation: Call method embedSWF -- Insert the SWF file. The parameters are followed by the address of the @ swf file; @ the id of the container used to load the swf file (such as div); @ flash width; @ height of flash (of course, the width and height can be expressed by a percentage such as 100%); @ the lowest version required for normal playback of the flash; @ when the version is below the requirement, run the swf file. Here, use this flash to go to the official website to download the latest flash plug-in. (This parameter can be omitted) when multiple flash files are inserted to different locations on the same page, you only need to repeat the preceding statement and use different container IDs.


2. Call methods for passing parameters, variables, and attributes to the swf File

<Script type = "text/javascript" src = "swfobject. js"> </script>
<Script type = "text/javascript">
// 1. Use Json to initialize variables, parameters, and attributes
Var flashvars = {
Name1: "hello ",
Name2: "world ",
Name3: "foobar"
};
Var params = {
Menu: "false"
};
Var attributes = {
Id: "dynamicContent2 ",
Name: "dynamicContent2"
};
Swfobject. embedSWF ("test6_flashvars.swf", "content2", "300", "120", "6.0.0", "expressInstall.swf", flashvars, params, attributes );

// 2. Traditional initialization settings have the same effect
Var flashvars = {};
Flashvars. name1 = "hello ";
Flashvars. name2 = "world ";
Flashvars. name3 = "foobar ";
Var params = {};
Params. menu = "false ";
Var attributes = {};
Attributes. id = "dynamicContent3 ";
Attributes. name = "dynamicContent3 ";
Swfobject. embedSWF ("test6_flashvars.swf", "content3", "300", "120", "6.0.0", "expressInstall.swf", flashvars, params, attributes );
// 3. Write it directly at the back end, just a word, concise and tough, without dragging the water
Swfobject. embedSWF ("test6_flashvars.swf", "content5", "300", "120", "6.0.0", "expressInstall.swf", {name1: "hello", name2: "world ", name3: "foobar" },{ menu: "false" },{ id: "dynamicContent5", name: "dynamicContent5 "});
</Script>
 

SWFObject google open-source project http://code.google.com/p/swfobject/
SWFObject (2.2): http://swfobject.googlecode.com/files/swfobject_2_2.zip
SWFObject (2.0): http://swfobject.googlecode.com/files/swfobject_2_0.zip
SWFObject official Blog: http://blog.deconcept.com/swfobject/
SWFObject 2.0 official documentation (Chinese) http://www.admin10000.com/resource/1.html

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.