JW Player 6 – Textmark Plugin

Textmark v2.0 is a plugin for JW Player. This plugin is designed to create overlay text on top of Flash videos. 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. Multiple text overlays can be added onto a single video. 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.

New in version 2.0
- No need to use javascript to setup the plugin options and overlays
- Ability to style overlays individually
- Ability to center overlay vertically as well as horizontally
- Various bug fixes


    flashplayer: 'jwplayer.flash.swf',
    file: './video.flv',
            // Options below are the defaults and can be omitted
                'font': 'Verdana',
                'bold': true,
                'fontSize': 18,
                'alpha': .85,
                'overlayPadding': 0,
                'textColor': '0x00ff00',
                'glowColor': '0x000000',
                'glowWidth': 2

            // Create the overlays here
                ['overlay1',      // No "style", use style from the options above or plugin defaults
                    'text': "hello world",
                    'position': "m,t"
                ['overlay2',     // Use custom styling for this overy
                    'text': "custom style overlay",
                    'position': "*50,*20",
                        'fontSize': 40,
                        'alpha': .25,
                        'font': 'Courier',
                        'color': '0xff00ff',
                        'bold': true

Each overlay must be an array, with the first element being the overlay id. The second element of the array is an object with options for the text, position and style. The style option is an object with options for the display properties of the overlay (if you want it to look different from the default style set).

id: The id of the overlay
text: The text that should be displayed in the overlay
position: 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 v2.0

Leave a Reply

Notify of