cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
mvandevelde
Community Contributor

Replacing the video player thumb image with a lager image

Jump to solution

I've been working on some code when I have time to change the small thumbnail image of the video player with a larger image.  I've finally got most of the code needed to do this now worked out. Funny thing is, there is actually a larger image sitting on the server, just its not used as the thumbnail. My script is working in the browser script consol after the page loads, just not as a theme JS file. Just one thing I need help with and thats using the MutationObserver function.  @James  You may be able to help me out here? 

The origional HTML on the page is:

-----------------------------------------------------

<a id="media_comment_m-xxxxxxxxxxxxxxxxxxxx" class="instructure_inline_media_comment video_comment" data-media_comment_type="video"></a>

------------------------------------------------------

It's then at some point a Canvas script updates it to this:

-----------------------------------------------------

<a id="media_comment_m-xxxxxxxxxxxxxxxxxxxxx" class="instructure_inline_media_comment video_comment" data-media_comment_type="video" href="#" style="padding: 0px;">
<span class="media_comment_thumbnail media_comment_thumbnail-normal" style="background-image: url(https://apse2.nv.instructuremedia.com/p/2/thumbnail/entry_id/m-xxxxxxxxxxxxxxxxxx/width/140/height/1...">
<span class="media_comment_thumbnail_play_button">
<span class="screenreader-only"> Click to view </span>
</span>
</span>
</a>

-------------------------------------------------------

Only after that DOM update will my script work. I just dont want to use the wait function, I'd rather be more specific.

The code I have so far is attached.

This is to help solve a problem related to several posts ...

Can the recorded media object be manipulated? 

https://community.canvaslms.com/ideas/4874 

Can I change the size of the video player embedded in a page?

1 Solution

Accepted Solutions
mvandevelde
Community Contributor

Rather than posting updates here, look for the latest version on GitHub

The latest version tested now on IE FF Chrome

GitHub - mrdatacommando/canvas-video-thumb: Canvas LMS video thumbnail enlarger Javascript theme hac... 

Mark

View solution in original post

7 Replies
James
Community Champion

mvandevelde,

Where in Canvas is this? I don't use media comments, so I'll have to talk in generalities or you'll have to tell me how to get one of these added so I can do debugging.

One thing that concerns me, since I don't know where you're at, is 

The original HTML on the page is:

With mutation observers, you need to be careful with statements like that.

If this is a content page, then the original HTML supplied for the page is what you wrote, but it is passed as JavaScript as part of the ENV.WIKI_PAGE variable and then added to the document rather than being delivered as part of the document markup itself. That means that you have to wait for the content to appear on the page and then you have to wait for the changes to be made to it. That can be done with the same MutationObserver, by the way, but it means that you have to know what's going on behind the scenes.

To identify what is ready as soon as the document is loaded, do a View Source (often Ctrl-U). Then look for the closest parent to where your content is.  For example, with a content page, you have this structure (a bunch of stuff was removed). What wasn't removed because there wasn't anything there, is everything inside the id="not_right_side", although there is a div#right-side-wrapper inside the div#not_right_side at the same level as div#content-wrapper.

<div class="ic-app" id="application">
  <div class="ic-Layout-wrapper" id="wrapper">
    <div class="ic-Layout-columns" id="main">
      <div class="ic-app-main-content" id="not_right_side">
        <div class="ic-Layout-contentWrapper" id="content-wrapper">
          <div class="ic-Layout-contentMain" id="content" role="main">
            <div id="wiki_page_show"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

When you view the document inside the browser's console, there will be a lot more there, but what you see is that the content of the page is inside the div#wiki_page_show.


This means that most likely, you will be able to add a mutation observer to div#wiki_page_show.

This fragment hasn't been tested, but it hopefully it will help you get in the right direction.

(function() {
  'use strict';
  var el = document.getElementById('wiki_page_show');
  if (el) {
    var check = el.querySelectorAll('span.media_comment_thumbnail_play_button');
    if (check.length > 0) {
      // Canvas beat us to it, there's no need for an observer
      doYourThing();
    } else {
      var observer = new MutationObserver(function() {
        var check = el.querySelectorAll('span.media_comment_thumbnail_play_button');
        if (check.length > 0) {
          doYourThing();
          observer.disconnect();
        }
      });
      observer.observe(el, {
        childList : true,
        subtree : true
      });
    }
  }

  function doYourThing() {
    // Do what you need to do
  }
})();

I would throw in a check to make sure it only runs on the right pages. That's built-in for now using the wiki_page_show, but you may need it on other places that don't have an unique id and you have to look at div#content instead. I didn't test to make sure that el was visible inside the observer. If it's not, use document instead and possibly make the selector more specific.

The childList checks for additions and deletions, but since the span.media_comment_thumbnail_play_button isn't a direct child of wiki_page_show, I needed to add in the subtree as well.

The observer.disconnect() may need removed if Canvas updates the page you're looking at with a ReactJS render() that overwrites everything you've done so far. There are other considerations to look at if that is happening. You can add the mutation observer even if the item is already there, but it won't trigger until a change happens. That's why I did the check to see if it was already there.

I also don't know if I picked the right selector, but I hope this helps.

mvandevelde
Community Contributor

Thanks James. Every bit helps.  Hopfully my next post will be the full solution.

mvandevelde
Community Contributor

Well, good news, I now have a working version of the script for use in the Canvas Theme.

It’s usable for those who want to test it.

Please let me know if you do use it in your production environment, I'd be interested to know.

There is one minor JS error that occurs with more than one video player on a page I can't fix, but it still replaces all the images for any number of videos on a page.

The Error is: "TypeError: mcID[i].firstChild is null"
This occurs for ever additional video. So for 1 video on the page, there is no error, for 4 videos there is 3 errors. Any suggestions or solutions would be welcome.

mvandevelde
Community Contributor

I have found a small improvement to locating the media server location. 

If you use the Global JS variable like such:

INST.kalturaSettings.resource_domain

In my case the result is:

apse2.nv.instructuremedia.com

The attached version update just include this update as a comment, but its easy enough to insert this directly as part of the image URL if you wish. 

mvandevelde
Community Contributor

Rather than posting updates here, look for the latest version on GitHub

The latest version tested now on IE FF Chrome

GitHub - mrdatacommando/canvas-video-thumb: Canvas LMS video thumbnail enlarger Javascript theme hac... 

Mark

View solution in original post

GideonWilliams
Community Champion

Thanks for the script and your efforts Mark

I tried the script and it works perfectly for one video but for some strange reason, the second one on the page remains the original size.

Hi  @GideonWilliams ‌,

make sure you try the github version for the latest code.

Let me know if that fixes it.

Mark