Home / JW Player Textmark Plugin

JW Player Textmark Plugin

Submitted by mattman on Fri, 02/03/2012 - 15:51

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
Tags: 
jw player
javascript
flash
overlay
Textmark

Comments

20
Submitted by tiberghv on Wed, 03/28/2012 - 08:33

Excellent work, thank you very much for sharing this with us. I have one question though : I can't really position my text at the bottom of my video. Whether i use 'l,b' or 'l,0' or 'l,*0%', the text is not placed right at the button of the video, it still has a quite high position in my video. It's the same problem with the left, or top, or right position, their are still very much far away from the borders of my video.
Submitted by tiberghv on Thu, 03/29/2012 - 07:41

Sorry, i figured it ou myself. It's the player.overlayOption('overlayPadding', 20); lign that needs be modified in your example with a lower number. Great plugin, thank you.
Submitted by mattman on Thu, 03/29/2012 - 13:23

Yes, the padding is in there to give a starting point for the text. The bigger the padding, the farther away from the video borders it will start. Enjoy!
Submitted by alanp on Tue, 05/01/2012 - 18:52

Hi Matt, This is exactly what I need and it works great, but it doesn't appear to work on iOS devices (iPad, iPhone, etc). Is there any plans to extend the functionality of this plugin to those devices? Thanks again alan
Submitted by mattman on Wed, 05/02/2012 - 10:09

Right now, the plugin only works for the Flash player, which means that it won't work on iOS devices. I do plan to get this working for iOS. I just haven't had much time to work on it lately. Hopefully I will get to this soon.
Submitted by Nate Beckham on Sun, 06/10/2012 - 13:29

Awesome little plugin you've made there! Quick question... is there any way to have the individual text overlays appear only during specific times in the video? For example, display text overlay #1 between seconds 5-10, then display text overlay #2 between seconds 15-20, etc etc. That would really put it over the top! :)
Submitted by mattman on Sun, 06/17/2012 - 01:53

"individual text overlays appear only during specific times in the video?" This should be able to be done via javascript. If you are able to do any javascript coding, you can set the overlay to be updated at the specified times you need.
Submitted by rockdizshi3t on Sun, 06/17/2012 - 00:09

hello, is this available on html5? this would be VERY useful for me. thanks for your contribution!
Submitted by rockdizshi3t on Sun, 06/17/2012 - 00:29

I got it to work!!! the only problem is that the location isn't changing. no matter what values I enter, the text is still at the top right. any help? thanks
Submitted by mattman on Sun, 06/17/2012 - 01:52

Can you post the code you're using here so I can see why it may not be working?
Submitted by mattman on Wed, 07/18/2012 - 02:28

I just posted an updated version. Give it a try and let me know if that fixes the problem for you.
Submitted by Ajaxjones on Sat, 07/07/2012 - 13:06

Hi Is there a way to have multiple text overlays but with different text sizes? Am looking to place a URL and then a smaller line below containing the T&C's Certainly a great plugin for sure
Submitted by mattman on Wed, 07/18/2012 - 02:29

This is not available yet. It will be in a future update.
Submitted by hawey on Tue, 07/10/2012 - 00:47

Hi, When i try to use the Chinese as the text. It display nothing, so it doesn't support Chinese?
—

Good Good Study, Day Day UP

Submitted by mattman on Wed, 07/18/2012 - 02:29

Can you post the code you're using?
Submitted by oneness on Sat, 11/24/2012 - 20:08

Hi, i set up to the player to display text ok for video .flv file. Question is: once I have mp3 audio file, text is not there. Does this plugin support mp3? Thanks. Oh, btw, for the text to display Chinese, I'd try: - type the Chinese text in Unicode utf-8 in the .html file - save the .html file as Unicode format - upload to server and it should display Unicode
Submitted by briand123 on Tue, 11/27/2012 - 00:09

This was a great plugin for JWPLAYER 5. I haven't be able to make it work with JWPLAYER 6. You can't even download JWP 5 now. 6 is all longtail offers. Has anyone been able to make this great plugin work with JWP 6?
Submitted by japanick on Wed, 11/28/2012 - 17:35

Thanks for the great plugin. Any chance you can share the source code to the Textmark.swf file?
Submitted by mleventhal on Tue, 01/15/2013 - 13:30

Is there a way not only to add time intervals of when the text appears but to animate/scroll the text in the screen in random locations? Sometimes it scrolls on top then after a few seconds the text appears at bottom or on the sides? Can I interface with a content management system using webservices and change the text based on login data?
—

MLR

Submitted by mattman on Thu, 01/17/2013 - 15:49

There is no built-in ability to do this. However, the plugin does integrate with javascript. So you could run a javascript time interval that checks the server for information, then updates the overlays. If you make an ajax call to a PHP script, it could pull the users information from a session value and feed it back to your javascript to update the text and location. I suppose you could technically scroll the text with javascript as well by updating the position in rapid intervals. Although this probably wouldn't be very smooth scrolling. I do plan to add some of these features to the plugin, but I haven't had much time lately to work on it.