Using JavaScript to override ObjMedia
March 11, 2022 12:00 AM
Is it possible to override ObjMedia using javascript?
We want to modify the path to media files because we have many users who access our modules from remote sites that have poor connectivity. Until now we have been manually editing the html files after publishing but that is a tedious and error-prone task.
I've seen a few suggesitons on StackOverflow but they only seem to be overriding functions that have no arguments.
This is generally what I want to do:
function ObjMedia(n,a,x,y,w,h,v,z,m,l,p,rol,sPlay,eKey,vol,c,d,fb,cl) {
// Update m to point to localContent folder
if (Var_localContent.getValue() != "") {
m = m.replace("media/", Var_localContent.getValue());
}
// End of update
// *** CALL ORIGINAL ObjMedia HERE ***
}
Any thoughts/suggestions would be helpful.
Thanks!
Solution
I tested the following code, it worked for me. You'll need to still add in your conditional.
Hope this gives you some good direction. Add this as a HTML Extension of type Header Scripting
var objMediaConstruct = ObjMedia.prototype.constructor;
var objMediaProto = ObjMedia.prototype;
ObjMedia = function()
{
objMediaConstruct.apply(this,arguments);
// do your override here
this.src = this.src.replace("media/", "https://external.com/");
}
ObjMedia.prototype = objMediaProto;
Discussion (8)
I have not tried this:
Add a class to the media in Lectora, then if Var_localContent.getValue():
var mediaElement = getElementsByClassName('the_class_name')[0];
var mediaObj = eval(mediaElement.id);
mediaObj.src=newSrc
There's an error in the code it needs to be document.getElementsByClassName('the_class_name')[0]
Thanks pjackson.
Sorry - it's taken me a while to get back to this. I see where you are going with your suggestion but it doesn't quite work the way you have it written. I'm running into problems with the middle line...
I'll keep playing with it and see what I can come up with. Your technique seems a lot safer than my original one was.
Susan :smile:
Hi @susanmacnab, can you create a single page title with my code plus your external source file and I will test my code in your content.
Hi @pjackson2462.
Thank you for the offer but I will continue to look at this myself for the time being. We are working within a closed/secure network so sharing isn't so simple.
I'm sure I'll get it - I just need to find the time to work on it! :smile:
Also - I forgot to mention. It doesn't look like the class name that you put in the Appearance window ever shows up in the html for media objects. Not sure if this is by design or a bug.
This means I'm going to have to do a bit more manipulation in the DOM to find the actual object.
I tested the following code, it worked for me. You'll need to still add in your conditional.
Hope this gives you some good direction. Add this as a HTML Extension of type Header Scripting
var objMediaConstruct = ObjMedia.prototype.constructor;
var objMediaProto = ObjMedia.prototype;
ObjMedia = function()
{
objMediaConstruct.apply(this,arguments);
// do your override here
this.src = this.src.replace("media/", "https://external.com/");
}
ObjMedia.prototype = objMediaProto;
Thank you so much @wheels - that worked perfectly!
I'll have to read up a bit on what exactly is happening here but for now I'm just happy that it works. :)