Top 10 Tech Web Tips

How to Validate Revver Code?

I have been doing a lot more with Revver videos lately with simple (very simple) video tutorials on several topics. I noticed that the Revver code as offered when sharing Revver videos did not validate. I searched the Revver forum and came up empty. I checked the Revver blog and noticed that it was in need of some serious validation itself.

I’m not casting stones, its a constant struggle for myself as well, but maybe we can agree that having a validated code option is good, right?

So I left a comment on the Revver blog and Alex got back to me the next evening. (Thanks Again Alex!).

He offered up the following code exampel that should validate in xhtml:

<object width=”480″ height=”392″ type=”application/x-shockwave-flash”

data=”http://flash.revver.com/player/1.0/player.swf“>

<param name=”FlashVars”

value=”width=480&height=392&mediaId=49008&affiliateId=9237&s

kinURL=http://flash.revver.com/player/1.0/skins/RevverSkin_1-1.swf“/>

<param name=”movie” value=”http://flash.revver.com/player/1.0/player.swf“/>

<param name=”scale” value=”noScale”/>

<param name=”salign” value=”TL”/>

<param name=”quality” value=”best”/>

<param name=”wmode” value=”transparent”/>

<param name=”bgcolor” value=”#ffffff”/>

</object>

 

So I repalced my affiliate ID and my video ID for the ones provided in the example above.

Then, I put the code in a blank page in Dreamweaver and tested it. Worked fine.

I then attempted to put it in an article in WordPress (famous for its ease of use with videos - That’s a joke).

It didn’t work. I played around testing and retesting. Ultimately I noticed that the code lines above had been word wrapped and when I copied them from the email message into WordPress it viewed the word wrapped lines as new lines and thus the code was literally broken by word wrap. (note the code above and below may appear word wrapped also depending on this blog and on your monitor resolution or window size, trust me that I put the code in correctly and if you attempt this at home, double check to make sure the lines do not get a break in there somewhere!)

So I put the code back together again like this

<object width=”400″ height=”312″ type=”application/x-shockwave-flash” data=”http://flash.revver.com/player/1.0/player.swf”>
<param name=”FlashVars” value=”width=400&height=312&mediaId=252187&affiliateId=17630&skinURL=http://flash.revver.com/player/1.0/skins/RevverSkin_1-1.swf”/>
<param name=”movie” value=”http://flash.revver.com/player/1.0/player.swf”/>
<param name=”scale” value=”noScale”/>
<param name=”salign” value=”TL”/>
<param name=”quality” value=”best”/>
<param name=”wmode” value=”transparent”/>
<param name=”bgcolor” value=”#ffffff”/>
</object>

This worked like a charm, but I noticed in the published page a problem that I had noticed before.

One of those problems that you catch out of the corner of your eye, like a smurf or something but never track it down or bring it into conciousness until this time at least.

The brand new Revver full screen viewing option button was available when I viewed this video on Revver in ‘My Videos’ but it was not available on the video I had shared to my WordPress blog. So I sent Alex a follow up email, just in case he might have a parameter solution.

I did try <param name=”allowfullscreen” value=”true”/> but it didn’t work. I was just guessing . . .

EDIT

After a couple short iterations Asi from Revver (see comment below) helped to identify the gap in my flash code that was preventing the full screen button from showing and then later from working. Here is that code!

<object type=“application/x-shockwave-flash” data=“http://flash.revver.com/player/1.0/player.swf” height=“312″ width=“400″>
<param name=“FlashVars” value=“mediaId=252187&affiliateId=17630&allowFullScreen=true”></param>
<param name=“movie” value=“http://flash.revver.com/player/1.0/player.swf”></param>
<param name=“allowFullScreen” value=“true”></param>
<param name=“scale” value=“noScale”></param>
<param name=“salign” value=“TL”></param>
<param name=“quality” value=“best”></param>

<param name=“bgcolor” value=“#ffffff”></param>
</object>

Note you may not be able to view all the code here, however if you copy it you should be able to paste it into notepad. I’ll work on improving the ability to share code in a future post.