Friday, January 25, 2013

JW Player-Subtitles-Closed Caption-Audio Description Plugins


Captions plugin and Audio Description plugin are used to load both a captions SRT and an audio description MP3 file. Both can be toggled on/off through a large, descriptive button in the display area. The plugins are automatically loaded by JW Player from our CDN:
        plugins: {
            captions: { file: '/assets/Parker.srt' },
            audiodescription: { file: '/assets/Parker.mp3' }
        }
    });
</script>


Here is a basic setup with both Audio Description and Closed Captions

Embed Code

SWFObject 1.5
<script type='text/javascript' src='swfobject-1.5.js'></script><div id='mediaplayer'></div><script type="text/javascript">    var so = new SWFObject('player.swf','playerID','480','300','9');    so.addParam('allowfullscreen','true');    so.addParam('allowscriptaccess','always');    so.addVariable('file', '/assets/Parker.mp4');    so.addVariable('image', '/assets/Parker.jpg');    so.addVariable('plugins', 'audiodescription-2,captions-2');    so.addVariable('audiodescription.file', '/assets/Parker.mp3');    so.addVariable('captions.file', '/assets/Parker.srt');    so.write('mediaplayer');</script>

SWFObject 2.2
<script type='text/javascript' src='swfobject-2.2.js'></script><div id='mediaplayer'></div><script type="text/javascript">   var flashvars = {      'file':   '/assets/Parker.mp4',      'image':  '/assets/Parker.jpg',      'plugins':        'audiodescription-2,captions-2',      'audiodescription.file':  '/assets/Parker.mp3',      'captions.file':  '/assets/Parker.srt'   };       var params = {      'allowfullscreen':        'true',      'allowscriptaccess':      'always'   };    var attributes = {      'id':                     'playerID',      'name':                   'playerID'   };   swfobject.embedSWF('player.swf', 'mediaplayer', '480', '300', '9', 'false',        flashvars, params, attributes);    </script>

JW Embedder
<script type='text/javascript' src='/jwplayer/jwplayer.js'></script><div id='mediaplayer'></div><script type="text/javascript">  jwplayer('mediaplayer').setup({    'flashplayer': 'player.swf',    'id': 'playerID',    'width': '480',    'height': '300',    'file': '/assets/Parker.mp4',    'image': '/assets/Parker.jpg',    'plugins': {       'audiodescription-2': {           'file': '/assets/Parker.mp3'       },       'captions-2': {           'file': '/assets/Parker.srt'       }    }  });</script>

If you prefer a black box around the captions instead of a thin outline, set the back option to true.

Other accessibility features of this player are its keyboard controls (using the TAB and SPACE controls), its screen reader-labeled buttons and the full-screen button. Also, immediately above the player, hidden controls allow screen reader users to control the basic functionality of the player (Play / Mute / Stop).



Keywords: Closed Caption,Audio Description, Plugins, Subtitles, Tutorial, Blogger Tutorial, Tutorials,JW Player-Blogger Embedding,Website.