Websites that allow to embed their multimedia Flash contents usually provide HTML code to be included on your blog/site.
If you need XHTML Strict code, some changes have to be made. First of all, you have to get rid of the embed tag and use instead the object tag.
In most of the cases, the value of the data attribute in the object element will be the same as the value specified in one of the param elements.
You have also to remember to change every occurence of the "&" character with the "&" entity.
Or you can just relax and use my conversion tool...
I've written a degradable tool (Javascript and PHP) that automatically converts your code to valid XHTML 1.0 Strict:
The conversion tool is also available as a Google Gadget, that can be included in your website or in your iGoogle page. If you use the Opera browser (and I hope you do!) you can also download the conversion tool as an Opera Widget.
Next, I'll show some practical examples of transformations from HTML to XHTML for mutimedia contents provided by: YouTube, Veoh, Deezer, Yahoo, DailyMotion, Revver, Brightcove, Hulu, Metacafe, Megavideo.
Youtube video
Original HTML code:
<object width="425" height="355"> <param name="movie" value="http://www.youtube.com/v/qdeMqqghXRI&rel=0"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/qdeMqqghXRI&rel=0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed> </object>
XHTML Strict code:
<object type="application/x-shockwave-flash" width="425" height="355" data="http://www.youtube.com/v/qdeMqqghXRI&rel=0"> <param name="movie" value="http://www.youtube.com/v/qdeMqqghXRI&rel=0"></param> <param name="wmode" value="transparent"></param> </object>
If you want the video to start automatically, you need to add the string: &autoplay=1 in the data attribute and in the value of the movie parameter.
If you want the enable the fullscreen mode, you need to add the string: &fs=1 in the data attribute and in the value of the movie parameter. You also need to add a new parameter: <param name="allowFullScreen" value="true" />.
Example of the conversion into XHTML 1.0 Strict, resolving all validation errors:
Veoh video
HTML code:
<embed src="http://www.veoh.com/videodetails2.swf?permalinkId=v535965tH84qqTp&id=2004410&player=videodetailsembedded&videoAutoPlay=0" allowFullScreen="true" width="540" height="438" bgcolor="#000000" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> <br/><a href="http://www.veoh.com/">Online Videos by Veoh.com</a>
XHTML Strict code:
<object type="application/x-shockwave-flash" width="540" height="438" data="http://www.veoh.com/videodetails2.swf?permalinkId=v535965tH84qqTp&id=2004410&player=videodetailsembedded&videoAutoPlay=0"> <param name="movie" value="http://www.veoh.com/videodetails2.swf?permalinkId=v535965tH84qqTp&id=2004410&player=videodetailsembedded&videoAutoPlay=0" /> <param name="allowFullScreen" value="true" /> </object>
If you want the video to start automatically, you need to edit the code fragment: &videoAutoPlay=1 in the data attribute and in the value of the movie parameter.
Deezer audio
HTML code:
<div style="width:180px;height:45px;"> <object width="180" height="29"><param name="movie" value="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900"></param> <embed src="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900" type="application/x-shockwave-flash" width="180" height="29"></embed> </object> <a href="http://www.deezer.com" style="border:none;margin:0;padding:0;"> <img src="http://www.deezer.com/embedded/footer.jpg" alt="free music" title="free music" border="0" style="border:none;margin:0;padding:0;" /> </a></div>
XHTML Strict code:
<div style="width:180px;height:45px;"> <object type="application/x-shockwave-flash" width="180" height="29" data="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900"> <param name="movie" value="http://www.deezer.com/embedded/blogplayer_3.swf?path=173748&color1=990000&color2=cc6600&color3=cc9900" /> </object> <a href="http://www.deezer.com" style="border:none;margin:0;padding:0;"><img src="http://www.deezer.com/embedded/footer.jpg" alt="free music" title="free music" style="border:none;margin:0;padding:0;" /></a> </div>
Yahoo Video
HTML code:
<object width="512" height="323"> <param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" /> <param name="allowFullScreen" value="true" /> <param name="flashVars" value="id=2918320&vid=611392&lang=en-us&intl=us&thumbUrl=" /> <embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" type="application/x-shockwave-flash" width="512" height="323" allowFullScreen="true" flashVars="id=2918320&vid=611392&lang=en-us&intl=us&thumbUrl=" > </embed></object>
XHTML Strict code:
<object type="application/x-shockwave-flash" data="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" width="512" height="323"> <param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.1.15" /> <param name="allowFullScreen" value="true" /> <param name="flashVars" value="id=2918320&vid=611392&lang=en-us&intl=us&thumbUrl=" /> </object>
Google video
Original HTML code:
<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=5749265234927691071&hl=it" flashvars=""> </embed>
XHTML Strict code:
<object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?docId=5749265234927691071&hl=it" height="326" width="400"> <param name="movie" value="http://video.google.com/googleplayer.swf?docId=5749265234927691071&hl=it" /> <param name="flashvars" value="" /> </object>
In order to activate the autoplay option, the flashvars parameter has to be edited: <param name="flashvars" value="autoPlay=true" />
DailyMotion video
Original HTML code:
<object width="425" height="364"> <param name="movie" value="http://www.dailymotion.com/swf/7qdmIvSAi4EUIHkF"></param> <param name="allowFullScreen" value="true"></param> <param name="allowScriptAccess" value="always"></param> <embed src="http://www.dailymotion.com/swf/7qdmIvSAi4EUIHkF" type="application/x-shockwave-flash" width="425" height="364" allowFullScreen="true" allowScriptAccess="always"></embed> </object>
XHTML Strict code:
<object type="application/x-shockwave-flash" width="425" height="364" data="http://www.dailymotion.com/swf/7qdmIvSAi4EUIHkF"> <param name="movie" value="http://www.dailymotion.com/swf/7qdmIvSAi4EUIHkF"></param> <param name="allowFullScreen" value="true"></param> <param name="allowScriptAccess" value="always"></param> </object>
To add the autoplay option, add the character string: &autoStart=1 (or &autoPlay=1) to the data attribute and the movie parameter.
Revver video
Original HTML code:
<object width="480" height="392" data="http://flash.revver.com/player/1.0/player.swf?mediaId=478670" type="application/x-shockwave-flash" id="revvervideoa17743d6aebf486ece24053f35e1aa23"> <param name="Movie" value="http://flash.revver.com/player/1.0/player.swf?mediaId=478670"></param> <param name="FlashVars" value="allowFullScreen=true"></param> <param name="AllowFullScreen" value="true"></param> <param name="AllowScriptAccess" value="always"></param> <embed type="application/x-shockwave-flash" src="http://flash.revver.com/player/1.0/player.swf?mediaId=478670" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="always" flashvars="allowFullScreen=true" allowfullscreen="true" height="392" width="480"></embed> </object>
XHTML Strict code:
<object width="480" height="392" data="http://flash.revver.com/player/1.0/player.swf?mediaId=478670" type="application/x-shockwave-flash" id="revvervideoa17743d6aebf486ece24053f35e1aa23"> <param name="Movie" value="http://flash.revver.com/player/1.0/player.swf?mediaId=478670"></param> <param name="FlashVars" value="allowFullScreen=true"></param> <param name="AllowFullScreen" value="true"></param> <param name="AllowScriptAccess" value="always"></param> </object>
To add the autoplay option, add the parameter: <param name="AutoStart" value="true" />
Brightcove video
Original HTML code:
<embed src='http://www.brightcove.tv/playerswf' bgcolor='#FFFFFF' flashVars='initVideoId=1260669383&servicesURL=http://www.brightcove.tv&viewerSecureGatewayURL=https://www.brightcove.tv&cdnURL=http://admin.brightcove.com&autoStart=false' base='http://admin.brightcove.com' name='bcPlayer' width='486' height='412' allowFullScreen='true' allowScriptAccess='always' seamlesstabbing='false' type='application/x-shockwave-flash' swLiveConnect='true' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'> </embed>
XHTML Strict code:
<object width="486" height="412" data="http://www.brightcove.tv/playerswf?initVideoId=1260669383&servicesURL=http://www.brightcove.tv&viewerSecureGatewayURL=https://www.brightcove.tv&cdnURL=http://admin.brightcove.com&autoStart=false" type="application/x-shockwave-flash" id="revvervideoa17743d6aebf486ece24053f35e1aa23"> <param name="Movie" value="http://www.brightcove.tv/playerswf?initVideoId=1260669383&servicesURL=http://www.brightcove.tv&viewerSecureGatewayURL=https://www.brightcove.tv&cdnURL=http://admin.brightcove.com&autoStart=false" /> <param name="base" value="http://admin.brightcove.com" /> <param name="seamlesstabbing" value="false" /> <param name="AllowFullScreen" value="true" /> <param name="AllowScriptAccess" value="always" /> </object>
Metacafe video
Original HTML code:
<embed src="http://www.metacafe.com/fplayer/1015727/all_new_reno_911____terry_and_se.swf" width="400" height="345" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> <br/><font size="1"><a href="http://www.metacafe.com/watch/1015727/all_new_reno_911_terry_and_se/">All New RENO 911! - Terry And Se... - video powered by Metacafe</a></font>
XHTML Strict code:
<object type="application/x-shockwave-flash" height="345" width="400" data="http://www.metacafe.com/fplayer/1015727/all_new_reno_911____terry_and_se.swf" > <param name="movie" value="http://www.metacafe.com/fplayer/1015727/all_new_reno_911____terry_and_se.swf" /> <param name="wmode" value="transparent" /> </object> <br/><span style="font-size: x-small;"><a href="http://www.metacafe.com/watch/1015727/all_new_reno_911_terry_and_se/">All New RENO 911! - Terry And Se... - video powered by Metacafe</a></span>
In order to add the video autoplay option, you need to add the following parameter:
<param name="flashVars" value="altServerURL=http%3A%2F%2Fwww.metacafe.com&playerVars=showStats=no|autoPlay=yes|videoTitle=" />
Megavideo video
Original HTML code:
<object width="432" height="351"> <param name="movie" value="http://www.megavideo.com/v/M6ERQIRYb8e3e58b3ddf10c1f6a3e92d31cc8bfd.34300433.0"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.megavideo.com/v/M6ERQIRYb8e3e58b3ddf10c1f6a3e92d31cc8bfd.34300433.0" type="application/x-shockwave-flash" wmode="transparent" width="432" height="351"> </embed> </object>
XHTML Strict code:
<object type="application/x-shockwave-flash" data="http://www.megavideo.com/v/M6ERQIRYb8e3e58b3ddf10c1f6a3e92d31cc8bfd.34300433.0" width="432" height="351"> <param name="movie" value="http://www.megavideo.com/v/M6ERQIRYb8e3e58b3ddf10c1f6a3e92d31cc8bfd.34300433.0"></param> <param name="wmode" value="transparent"></param> </object>
Hulu video
Original HTML code:
<object width="510" height="295"> <param name="movie" value="http://www.hulu.com/embed/-baQThXa9Ty5smvT_L3DjA"></param> <param name="flashvars" value="st=0&et=5896"></param> <embed src="http://www.hulu.com/embed/-baQThXa9Ty5smvT_L3DjA" type="application/x-shockwave-flash" flashvars="st=0&et=5896" width="510" height="295"></embed> </object>
XHTML Strict code:
<object type="application/x-shockwave-flash" data="http://www.hulu.com/embed/-baQThXa9Ty5smvT_L3DjA" width="510" height="295"> <param name="movie" value="http://www.hulu.com/embed/-baQThXa9Ty5smvT_L3DjA"></param> <param name="flashvars" value="st=0&et=5896"></param> </object>
In order to view Hulu videos you need an American IP address.
referrers Check incoming links to this article, according to Yahoo!.
|
react Send your reaction to this article by email.
|
bookmark Save this article using an online web2.0 service, the bookmark can be priate or can be shared with the rest of the world.
|
print If Javascript is disabled you'll need to use your browser's control to print this pages.
Recent articles:
