JW Player Textmark Plugin

JW Player is a solid video player that is very simple to setup and use. One of my projects in the past required that I add text overlays on top of the Flash videos that were being played. This is not quite the same as a watermark that is burned into the video itself. It is merely a way to add dynamic text on top of the video without needing to re-encode it. I've developed a plugin called Textmark that will allow for text to be overlaid on top of a video. This is not an official plugin, meaning it has not been approved yet by Longtail Video to appear in their AddOns section. Until it's officially approved, I will host it here. There is a zip file attached with a working demo of the Textmark plugin.

You must place your player.swf and jwplayer.js files in the same directory as the demo files or modify the demo.html file and set the paths to these files.

demo.html

  1. <html>
  2.   <head>
  3.     <title>Textmark Demo</title>
  4.     <style>
  5.     	body { background: #000000; margin: 0px; padding: 0px; }
  6.     	.overlayUpdater { color: #fff; }
  7.     </style>
  8.     <script type="text/javascript">
  9. 	var player  = null;
  10. 	function playerReady(obj) 
  11. 	{
  12. 		player = document.getElementById(obj['id']);
  13.  
  14. 		// Set options for ALL overlays
  15. 		player.overlayOption('fontSize', 24);
  16. 		player.overlayOption('alpha', .5);
  17. 		player.overlayOption('overlayPadding', 80);
  18.  
  19. 		// Create the overlays to place on video
  20. 		player.setOverlay('o1', 'Textmark', 'l,30%');
  21. 		player.setOverlay('o2', 'Demo', 'r,30%');
  22. 		player.setOverlay('o3', 'Date', 'l,*33%');
  23. 	};
  24.     </script>
  25.  
  26.   </head>
  27.   <body>
  28.     <div id="mediaplayer">JW Player goes here</div>
  29.  
  30.     <a class="overlayUpdater" href="javascript:;" onclick="player.setOverlay('o3', new Date(), 'l,*33%');">Set overlay 3 to current date</a>
  31.  
  32. 	<script type="text/javascript" src="jwplayer.js"></script>
  33. 	<script type="text/javascript">
  34. 		jwplayer('mediaplayer').setup(
  35. 		{
  36. 			height: '90%',
  37.         	width: '100%',
  38. 			flashplayer: 'player.swf',
  39. 			file: '<a href="http://content.longtailvideo.com/videos/flvplayer.flv',
  40. ">http://content.longtailvideo.com/videos/flvplayer.flv',
  41. </a>			plugins: 'Textmark.swf'
  42. 		});
  43. 	</script>
  44.  
  45.   </body>
  46. </html>

The most important part of this file is the code in the playerReady() function:

  1. // Set options for ALL overlays
  2. 		player.overlayOption('fontSize', 24);
  3. 		player.overlayOption('alpha', .5);
  4. 		player.overlayOption('overlayPadding', 80);
  5.  
  6. 		// Create the overlays to place on video
  7. 		player.setOverlay('o1', 'Textmark', 'l,30%');
  8. 		player.setOverlay('o2', 'Demo', 'r,30%');
  9. 		player.setOverlay('o3', 'Date', 'l,*33%');

The player.setOverlay() is used to create and modify overlays. The function take 3 parameters:
id: The id of the overlay
text: The text that should be displayed in the overlay
alignment: The location of the overlay on the video (x,y), explained below

Alignment Values:

Alignments values can be direction values, pixel values or percentage values.

Directions: x: [l,m,r], y: [t,b] x: [left, middle, right], y: [top, bottom]
   Example: l,t = top left
   Example: r,t = top right
   Example: m,b = bottom middle

Pixels: x: [any px value], y: [any px value] x: [px value starting from left], y: [px value starting from top]
   Example: 0,50 = 0px from left, 50px from top

Percentage: x: [% value], y: [% value] x: [% value from left], y: [% value from top]
   Example: 10%,50% = 10% from left, 50% from top

These values can be mixed and matched to use any combination of dirctions, pixels or percentages

Special: Place a * at the start of the x value to start from right or to the start of the y value to start from bottom.
   Example: *10,b = 10px from the right, on the bottom
   Example: m,*30% = middle horizontally, 30% from the bottom

You can see an interactive demo of the Textmark plugin here: Textmark Demo

Attached Files: 
AttachmentSize
Textmark_demo_2012-07-18.zip4.93 KB