Video Player Button Alt Tags

rboyd4570-ok
rboyd4570-ok Community Member Posts: 15
I am creating a French Accessible Title. But am having difficulty with the video player buttons.

I have been looking for a way to change the alt tags on the default video player buttons (Play/Pause/Volume/Full Screen/Closed Caption) to display the French equivalent.

Is there a way to change these within the Lectora title?

I have set the title to French but not even sure what that accomplishes.

Comments

  • 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.

     

    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 && (!mimeType.enabledPlugin || mimeType.enabledPlugin.name.indexOf( "QuickTime" ) < 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 = '<EMBED' +this.source+contStr;
    this.embed += ' WIDTH=' + width + ' HEIGHT=' + height ;
    this.embed += ' NAME=' + this.name;
    this.embed += autoStr+scaleStr+this.loopString+pluginType+'>\n';
    }
    else //If it not any of the cases above we can assume it is media element compatible
    {
    var THIS=this;
    //Setup the Media Element options
    var capSelection = -1;
    if(typeof (window.VarTrivSelCap) == "object")
    {
    var capSel = window.VarTrivSelCap.getValue();
    for (var i = 0; i < this.capLang.length; i++)
    {
    if( capSel == this.capLang[i])
    {
    capSelection = i;
    break;
    }
    }
    }

    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 && !is.iOS)
    {
    page.style.clip = "auto";
    page.style.width = "100%";
    page.style.height = "100%";
    this.normalLeft = page.style.left;
    this.transformScale = page.style.transform;
    }
    if(this.container && this.container.length > 0 && !is.iOS)
    this.container[0].parentNode.style.zIndex = "9001";

    THIS.isFullScreen = true;
    if(!is.iOS && !is.safari){
    this.fixForFullScreenPos = this.container.find('.mejs-controls').css('bottom');
    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 && this.container.length > 0)
    this.container[0].parentNode.style.zIndex = "";

    if(!is.iOS && !is.safari){
    this.container.find('.mejs-controls').css('bottom', this.fixForFullScreenPos);
    }
    rebuildLayout();
    }
    };

    var duration = null;
    mediaElem.addEventListener('timeupdate',function() {
    if (duration !== THIS.duration) {
    try{
    duration = this.duration;
    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;
    }
    }
  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 530 eLearning ROCKSTAR Admin Team
    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 = "Francais";  // language option on CC button
    
    var md = win.mejs.MepDefaults;
    win.mejs.MepDefaults.playText = "Lecture";
    win.mejs.MepDefaults.pauseText = "Pause";
    win.mejs.MepDefaults.fullscreenText = "Plein écran";
    win.mejs.MepDefaults.tracksText = "Sous-titres";
    
    win.mejs.i18n.locale.strings = { "en-US" : { 
    
    "Mute" : "Désactiver le son",
    "Unmute" : "Activer le son",
    "Mute Toggle" : "Mute Toggle",
    "Use Up/Down Arrow keys to increase or decrease volume." : "Utilisez les flèches Haut/Bas du clavier pour augmenter ou diminuer le volume.",
    "volumeSlider" : "Volume",
    "Captions/Subtitles" : "Sous-titres",
    "None" : "Aucun",
    
    } };
    



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

    - Joe
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    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.
  • rboyd4570-ok
    rboyd4570-ok Community Member Posts: 15
    Wow, thanks guys, I will try this tomorrow and let you know if I have any issue. Thanks for the replies.
  • rboyd4570-ok
    rboyd4570-ok Community Member Posts: 15
    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.

     

     
  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 530 eLearning ROCKSTAR Admin Team
    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?
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    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.
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!