Video Player Button Alt Tags

Ideally these would be part of Publish Strings which are in the Preferences dialog. But alas they are not right now.

To override the Alt text insert a HTML Extension at the title level of type Header Scripting and add the following JavaScript modified to the language you would like:

var win = getDisplayWindow();
win.mejs.language.codes.en = undefined
win.mejs.i18n.locale.strings = { undefined

I will write up an issue to get these into the publish strings, let me know if you have any questions or suggestions.

- Joe

Hi Ryan,

Here is a solution I came up with as you cannot do it within the Lectora title without a little scripting.

First, create an HTML Extension at the Title Level, set the type to Header Scripting and copy paste the text below.

Replace the bolded text with the text you would like to have in the alt text. Unfortunately, this does not work for the mute button due to how it is programmed. It would require you to modify the javascript file, if you would like instructions to do this I can point you to the file and the text that needs changing.

undefined

ObjMedia.prototype.BuildMediaString = function () {

var autoStr=''

var contStr=''

var scaleStr=''

var pluginType = ''

var width=this.w

var height=this.h

var addIEheight=20

this.isPlaying = this.bAutoStart;

if( this.isPlaying ) autoStr = ' AUTOSTART="TRUE"'

else autoStr = ' AUTOSTART="FALSE"'

if(!this.MEJSMedia())

{

if(this.source.indexOf(".mov") >= 0)

{

this.mediaType = 'quick';

pluginType = 'type=video/x-mov';

if( this.c == 0) height += addIEheight;

scaleStr=' scale="tofit"';

}

else if ( this.source.indexOf(".mp") >= 0 )

{

if( this.c )

contStr += ' ShowControls="TRUE"'

else

contStr += ' ShowControls="FALSE"'

}

else if(this.source.indexOf(".wav") >= 0)

{

this.mediaType = 'media'

if( !is.ns ) {

if( this.c ) {

contStr += ' ShowControls="TRUE"'

height += addIEheight

}

else contStr += ' ShowControls="FALSE"'

}

}

else if( this.source.indexOf(".avi") >= 0 || this.source.indexOf(".wmv") >= 0 || this.source.indexOf(".asf") >= 0 )

{

this.mediaType = 'media'

if( !is.ns ) {

if( this.c ) {

contStr += ' ShowControls="TRUE"'

height += addIEheight

}

else contStr += ' ShowControls="FALSE"'

}

}

else if( this.source.indexOf(".wma") >= 0 )

this.mediaType = 'media';

else if( this.c )

{

this.mediaType = 'quick'

if( is.ns )

{

var plugin = "audio/x-mpeg\""

var mimeType = eval( "navigator.mimeTypes[\"" + plugin + "]")

if( mimeType undefined 0) ) {

width = 145

height = 60

}

}

else if( is.ieMac )

height -= 10;

if( !is.ns )

height += addIEheight;

}

else if( this.source.indexOf(".rm") >= 0 || this.source.indexOf(".ram") >= 0 )

{

this.mediaType = 'real'

if( this.name.indexOf("video") >= 0 )

{

contStr += ' controls="ImageWindow'

if( this.c ) contStr+=',ControlPanel'

contStr += '"'

} else if ( this.c ) contStr=' controls="ControlPanel"'

}

this.embed = 'undefined

//Setup the Media Element options

var capSelection = -1;

if(typeof (window.VarTrivSelCap) == "object")

{

var capSel = window.VarTrivSelCap.getValue();

for (var i = 0; i undefined

}

}

}

this.mediaOptions = {

enablePluginDebug: false,

plugins: ['flash','youtube','vimeo'],

type: '',

pluginPath: 'MediaPlayer/',

flashName: 'flashmediaelement.swf',

defaultVideoWidth: 480,

defaultVideoHeight: 270,

pluginWidth: -1,

pluginHeight: -1,

timerRate: 250,

bAutoPlay: this.bAllowAutoStart?this.bAutoStart:false,

pluginVars: ["smoothing=true"] ,

// fires when a problem is detected

error: function (){ console.log( "error creating media element" );}};

this.playerOptions = {

enablePluginDebug: false,

plugins: ['flash','youtube','vimeo'],

type: '',

pluginPath: 'MediaPlayer/',

flashName: 'flashmediaelement.swf',

flashStreamer : "",

pluginWidth: -1,

pluginHeight: -1,

timerRate: 250,

bAutoPlay: this.bAllowAutoStart?this.bAutoStart:false,

pluginVars: ["smoothing=true"] ,

enablePluginSmoothing : true,

hideVolumeOnTouchDevices : false,

audioVolume : 'vertical',

defaultVideoWidth: 480,

defaultVideoHeight: 270,

videoWidth: -1,

videoHeight: -1,

audioWidth: this.w,

audioHeight: this.h,

startVolume: this.initVol,

loop: this.bLoop,

enableAutosize: true,

features: (!this.bControl)?['tracks']:['playpause','progress','current','duration','tracks','volume','fullscreen'],

alwaysShowControls: this.bRollControl,

hideVideoControlsOnLoad: this.bRollControl,

iPadUseNativeControls: false,

iPhoneUseNativeControls: false,

AndroidUseNativeControls: false,

alwaysShowHours: false,

showTimecodeFrameCount: false,

framesPerSecond: 25,

enableKeyboard: this.bEnableKeys,

pauseOtherPlayers: this.bSinglePlay,

keyActions: [],

startLanguage:((capSelection == -1)?'none':this.capLang[capSelection]),

translationSelector:((this.capFile.length>1)?true:false),

toggleCaptionsButtonWhenOnlyOne:is.ie8?true:false,

playText: 'Play',

pauseText: 'Pause',

fullscreenText: 'Fullscreen',

tracksText: 'Captions/Subtitles',

success:function(mediaElem, domObj){

THIS.mePlayer = mediaElem;

//Youtube videos dont have mediaElement.player so we get it from domObject instead

if(!mediaElem.player)

mediaElem.player = domObj.player;

if (THIS.bAutoPlay || THIS.mePlayerDoPlay)

{

THIS.mePlayerDoPlay = n;

THIS.play();

}

triv$(mediaElem).bind('ended', function()

{

if(THIS.onDone)

THIS.onDone();

if(THIS.bLoop)

THIS.play();

});

THIS.initEvent(mediaElem);

triv$(".mejs-overlay-button,.mejs-overlay-loading", THIS.div).css({

'display': 'none'

});

triv$(".mejs-overlay-button,.mejs-overlay-play", THIS.div).css({

'display': 'block'

});

if(mediaElem.player){

triv$('#' + mediaElem.player.id + '_captions_en', getDisplayDocument()).prop('checked','true').click(function(){

if(typeof (getDisplayWindow().VarTrivSelCap) == "object")

VarTrivSelCap.set(this.value); });

triv$('#' + mediaElem.player.id + '_captions_none', getDisplayDocument()).prop('checked','true').click(function(){

if(typeof (getDisplayWindow().VarTrivSelCap) == "object")

VarTrivSelCap.set("none"); });

/*if(THIS.bHasCaption){ //repeating this in publish because audio/snd html is already set when this is called in wndObjDesignTime

$(".mejs-captions-position,mejs-captions-position-hover" , THIS.div).css({'bottom' : THIS.h - 6 + 'px'});

}*/

if(!THIS.bRollControl)

triv$(".mejs-controls", THIS.div).css('bottom', '0px');

if (mediaElem.player)

mediaElem.player.load();

else if(THIS.mediaPlayer)

THIS.mediaPlayer.load();

//LO-2823 this was only being called by mediaelement player on play event before so fullscreen prior to playing breaks

if (mediaElem.player)

mediaElem.player.detectFullscreenMode();

//override enterFullScreen and exitFullScreen methods in media-element-and-player.js

var meFS = mediaElem.player.enterFullScreen;

var meExitFS = mediaElem.player.exitFullScreen;

mediaElem.player.enterFullScreen = function(){

meFS.call(this);

var page = GetCurrentPageDiv();

if(page undefined

page.style.width = "100%";

page.style.height = "100%";

this.normalLeft = page.style.left;

this.transformScale = page.style.transform;

}

if(this.container undefined 0 undefined !is.iOS)

this.container[0].parentNode.style.zIndex = "9001";

THIS.isFullScreen = true;

if(!is.iOS undefined

this.container.find('.mejs-controls').css('bottom', '0px');

}

};

mediaElem.player.exitFullScreen = function(){

if(THIS.isFullScreen)

{

meExitFS.call(this);

THIS.isFullScreen = false;

var page = GetCurrentPageDiv();

if(page)

{

page.style.clip = "";

page.style.width = "";

page.style.height = "";

page.style.left = this.normalLeft;

page.style.transform = this.transformScale;

}

if(this.container undefined 0)

this.container[0].parentNode.style.zIndex = "";

if(!is.iOS undefined

mejs.Utility.calculateTimeFormat(duration, mediaElem.player.options, mediaElem.player.options.framesPerSecond || 25);

mediaElem.player.setControlsSize();

}

catch (e)

{

console.log("Error" + e);

}

}

}, false);

mediaElem.addEventListener('play', function(e) {

triv$('.mejs-overlay-loading', THIS.div).parent().hide();

triv$('.mejs-overlay-button', THIS.div).show();

}, false);

if(is.ie9)

{

THIS.mePlayer.setVideoSize(this.w, this.h);

}

}

},

error: function (){

console.log( "error creating media element player" );

}

};

this.bMediaEle = true;

}

}

If you're going over the Publish Strings please consider making them a title option instead of a system setting. I know it has been suggested several time and it would really make my life easier.

Wow, thanks guys, I will try this tomorrow and let you know if I have any issue. Thanks for the replies.

Thanks Joe, it worked perfectly except for the option to turn on closed captions reads "English".

I tried to add a line below "None" but did not work.

"English" : "Francais",

Any suggestion would be greatly appreciated.

undefined

I've updated the example to include this, although in Lectora Online it would be different. In Lectora Online the options are on and none. We will do our best to get this into publish strings or translations. Probably all strings, including common publish strings, should go into the translation file. Hey @timk does that work for your usage?

Hi Joe

thanks it works. Best would be if we had a checkbox to "Include Publish Strings" in the translation dialogue. There should be no need to translate the texts to French each time.

Currently the selection of the language version of the Publish Strings is a Lectora setting. So I'm doing FR no problem, next is PL, but I forget to change the strings to PL and deliver PL with FR strings, which is not as good ;-) Next version. "Oh, there's a missing blank before the question mark in FR ? No problem I can correct within minutes."

Customer: "The messages now have unreadable symbols."

Me: "It would be readable, if you were Thai"

It would be much easier if I could save the language version of the Publish Strings along with the title or select the language within the Publishing dialogue. I know there's the "Languages" tab, but it won't publish the selected Publish Strings unless I also select a "translation file" which is something that I definitely want to avoid.