Explore the community Forums Lectora Lectora Questions & Answers Video Player Button Alt Tags

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #427653 Score: 0
    Profile photo of Ryan Boyd
    Ryan Boyd
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @rboyd4570-ok

    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.

    #427681 Score: 0
    Profile photo of Johnattan Barona
    Johnattan Barona
    Member
    beginner
    intermediate
    wise owl
    contributor
    curious george
    8 pts
    @jbarona9656

    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;
    }
    }

    #427683 Score: 1
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    53 pts
    @wheels

    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

    This post has received 1 vote up.
    • This reply was modified 4 months, 3 weeks ago by Profile photo of Joe Wieloch Joe Wieloch.
    • This reply was modified 4 months, 2 weeks ago by Profile photo of Joe Wieloch Joe Wieloch. Reason: updated to include language option for cc button
    #427694 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    317 pts
    @timk

    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.

    This post has received 1 vote up.
    #427698 Score: 0
    Profile photo of Ryan Boyd
    Ryan Boyd
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @rboyd4570-ok

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

    #427736 Score: 0
    Profile photo of Ryan Boyd
    Ryan Boyd
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    @rboyd4570-ok

    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.

     

     

    #427796 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    53 pts
    @wheels

    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?

    #427800 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    317 pts
    @timk

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.