How To Brand Your Video With A Watermark
Here's the working example of this technique: [http streaming – 30 seconds@150kbps] or [download a .zip file]
You can look at the full source code
for this, but by way of explanation we'll look at two source code excerpts. First the
section where we define the layout of the video presentation:
<![CDATA[1 <head>2 <layout>3 <root-layout width="300" height="300" backgroundcolor="white"></root-layout>4 <region id="video_region">5 <region id="watermark_region" bottom="5%" right="5%" width="91" height="27" fit="meet"></region> 6 </region>7 </layout>8 </head>]]>The
root-layout element on line 3 defines the size of the playback window. Then on line 4 we set up a region called
video_region. Since we haven't specified the size and location of this region with attributes, it will, by default, take on the same size and shape as the root-layout. On line 5, inside the video_region element, we define a subregion that sits in the video_region, 5% of the way in from the bottom and right edges. This is where we'll place the watermark.
Here's the BODY of the SMIL file: [http streaming – 30 seconds@150kbps] | [download a .zip file – 568kB] | [full source code]
<![CDATA[1 <body>2 <par>3 <video src="rainier_hike.rm" region="video_region"></video>4 <img src="emedia_icon.gif" 5="" region="watermark_region" 6="" id="emedia_mark" 7="" rn:mediaopacity="50%">8 <set attributename="rn:mediaOpacity" 9="" to="50%" 10="" targetelement="emedia_mark"></set>11 <set attributename="rn:mediaOpacity" 12="" to="100%" 13="" targetelement="emedia_mark" 14="" begin="emedia_mark.inBoundsEvent" 15="" end="emedia_mark.outOfBoundsEvent"></set>16 <area href="http://www.emediacommunications.biz/articles.html" 17="" alt="More Streaming Media Tutorials" 18="" external="true" 19="" rn:sendto="_osdefaultbrowser" 20="" sourceplaystate="play">21 22 </par>23 </body>]]>For those new to SMIL, everything inside the
block that opens on line 2 and closes on line 22 will play simultaneously, in parallel. Line 3 puts our video into the video region. On line 4 we add the image tag with a few key attributes:
region defines where the image should appear,
id defines a unique way to refer to this media element in other parts of this code (which we'll do on the following lines), and
rn:mediaOpacity (a RealNetworks extension to SMIL) sets the image to be 50% transparent.
On lines 8-10, we use a set element to cause the watermark to refresh its mediaOpacity on a continuous basis. There's nothing in the SMIL spec that suggests that it should be necessary to set the mediaOpacity a second time outside of the image tag. But in practice, without this explicit set command, sometimes the transparent part of the image doesn't update itself fast enough to keep pace with the underlying video.
From lines 11-15, we use the set element again to change the watermark's mediaOpacity to 100%, but only when the mouse cursor is within the bounds of the watermark region. Finally, the area tag on lines 16-20 makes the image into a link that, when clicked, loads our Web site into the user's default browser - but only when the video is playing.
In this example we've seen how SMIL can be used to place an interactive watermark on a video. But this simple example hints at some of the capabilities for simple, powerful interactivity enabled by the SMIL language. Other examples of what's possible with SMIL can be found on the RealNetworks' SMIL Code Samples page.