|
|
|
|
|
|
|
| Article by Nunzio Fartalone (Nunzio390) *Note: Also see another article by Nunzio containing Nunzio's IFRAME Examples An IFrame (Inline Frame) is an HTML element which makes it possible to embed another HTML document inside the main document. In essence, it's a floating frame inserted within a web page which is not bound to the side of a browser window. This article demonstrates how you can use an IFrame to target a separate page that utilizes Windows Media Player object and embed controls (for cross-browser capability) to play a video file, and still allow the main page that contains the IFrame to conform to HTML 4.01 specs when validating the page through the W3C Markup Validator. This is the method I use to "placate" the W3C consortium geeks who claim that the embed tag is not "proper" HTML. The W3C consortium guys/gals may not like the use of "embedding", but I can assure you that IE, Opera, and Netscape/Mozilla browsers don't mind it at all and display the movie just fine. IFrame Video Example:
After you start the video above, you will see media player controls that "appear" to be embedded directly on this page, but in reality what you are seeing is an IFrame targeting a completely separate page that actually contains the object/embed code for the media player. Why did I do it that way? Well that's part of the beauty of IFrames. There is NO way in hell that this page would ever get through the W3C Markup Validator if it detected the media player coding on this page. So, in order to have this page pass as valid HTML 4.01, I use the IFrame where the "bad" code (according to the W3C consortium geeks) cannot be parsed/picked up on this page. Using an IFrame in this way allows this page to indeed validate as valid HTML 4.01. |
| In the separate page targeted in the IFrame that plays the video file, it is very important to have margins and padding set to ZERO at that targeted page. If not, placement within the IFrame gets all messed up. So, when examining the above source code of that page, you will see that it also contains CSS styling that will eliminate page borders... |
| CSS styling that I've used in the above page to eliminate page borders: |
| <style type="text/css"> body { padding-top:0; padding-bottom:0; padding-left:0; padding-right:0; margin-top:0; margin-bottom:0; margin-left:0; margin-right:0; } </style> |
| Object-n-embed coding used in the above page to play the movie: |
| <OBJECT ID="MediaPlayer1" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/ en/nsmp2inf.cab#Version=5,1,52,701" STANDBY="Loading Microsoft Windows® Media Player components..." TYPE="application/x-oleobject" width="280" height="256"> <PARAM NAME="fileName" VALUE="Dogsmoke.mpg"> <PARAM NAME="animationatStart" VALUE="true"> <PARAM NAME="transparentatStart" VALUE="true"> <PARAM NAME="autoStart" VALUE="true"> <PARAM NAME="showControls" VALUE="true"> <PARAM NAME="Volume" value="-200"> <EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" SRC="Dogsmoke.mpg" name="MediaPlayer1" width=280 height=256 autostart=1 showcontrols=1 volume=-200> </OBJECT> |
| *Note: See more about how parameters can be changed for the object-n-embed coding above by referencing almost identical Cross-browser Media Player object/embed coding at the bottom of the page of this article... How to stream music or audio from your website
Although that article references music, all values indicated in blue in the code in that article can be changed in the same fashion with a video clip, if needed. |
| This page validates as Valid HTML 4.01... |
| This page validates as Valid CSS... |
|