Can you use the flash wmode attribute in a web page?

In web development, you may encounter the situation where flash occludes elements in the page. No matter how you set the depth of the flash container and layer (z-index) will not help. The existing solution is to add the "wmode" attribute to the embed or object tag that inserts flash and set it to wmode="transparent" or "opaque", but what exactly does the wmode attribute mean and why can it be solved

In flash tag

<param name=wmode value=xxxx>

Window plays applications on the web page with the movie's own rectangular window and is always at the top level.

Opaque displays the content on the page that is behind it.

Transparent enables the background of HTML pages to be displayed through all transparent parts of the application and may degrade animation performance.

Note: Both Opaque and Transparent can interact with the HTML layer, allowing the layers above the SWF file to mask the application. The difference between the two options is that Transparent allows transparency, so if a part of the SWF file is transparent, the HTML layer below the SWF file can be displayed through that part, and opaque will not be displayed.

That is, if FLASH covers the DIV layer, the wmode property must be changed to Transparent

In web development, you may encounter the situation where flash occludes elements in the page. No matter how you set the depth of the flash container and layer (z-index) is useless. The existing solution is to add the wmode attribute to the embed or object tag that inserts flash and set it to wmode=transparent or opaque, but what exactly does the wmode attribute mean and why can this problem be solved?

There are three types of wmode, that is, window modes. Let's take a look at the official statement from Macromedia back then: Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance. Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don 't need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through. Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.

The display mode by default, in this mode, flash player has its own window handle, which means that flash movies exist in Windows and are on the core display window of the browser, so flash only seems to be displayed in the browser, but this is also the fastest and most efficient rendering mode for flash. Since it is an HTML rendering surface independent of the browser, this causes flash to always obscure all DHTML layers whose location coincides with it under the default display mode.

However, most Apple browsers allow the DHTML layer to be displayed on flash, but when flash videos are played, there will be a more strange phenomenon, such as the DHTML layer displays abnormally like a piece of flash scraped off.

This is a windowless mode. In this case, the flash player does not have its own window handle, which requires the browser to tell the flash player when and where to draw on the browser's rendering surface. At this time, the flash video will not be on the same page as other elements, but will be on the same page as other elements. Therefore, you can use the z-index value to control whether the DHTML element is covered by flash or is blocked.

Transparent mode, in this mode, flash player will set the background color alpha value of the stage to 0 and will only draw real and visible objects on the stage. You can also use z-index to control the depth value of the flash movie, but unlike Opaque mode, doing so will reduce the playback effect of the flash movie, and setting wmode=opaque or transparent in the flash player version before 9.0.115 will cause the full screen mode to be invalid.

After understanding the implementation methods and significance of various modes, you can choose to set the value of the wmode attribute according to the specific situation in future development.