Get Element available under Dev Tools -> Resources -> Frames

Question

I'm trying to do this by using a Tampermonkey Script. However I'm open to new approaches...

What I want to do is extract some data (data-video), from a specific <div>. However this data is not available under the HTML code of the page, but it's available under Dev Tools -> Resources and then on Frames.

Anyone knows if it's possible to get that information available under DevTools? And how can I do that?

Comparative between the two pages can be found here: "Original HTML PAGE" and "HTML PAGE under DevTools"

On the first hyperlink the id=video-canvas cannot be seen, however it's on the <object type="application/x-shockwave-flash(...)

Answer 1

This is the approach I've used to solve my problem... I couldn't grab the code I want under Dev Tools, but I find a way to get the data from jwplayer with the function getPlaylistItem. And this is how I get the url filename of each video:

function getFilename(filename) {

    var filename;

    if(jwplayer().getPlaylistItem){
        filename = jwplayer().getPlaylistItem()['file'];
    }
    else{
        return filename;
    }

    filename = filename.substring(filename.indexOf("/mp4:") + 5);

    return filename;
}

Answer 2

As you state in your question the data you're looking for is available in DevTools under the "Resources" tab in the "Frames" folder. What you are looking at there is the Source HTML, similar to View Source.

The code you want, is what is getting replaced. It appears the site is using the JW Player Plugin, which is replacing the <div id="video-canvas"> with the appropriate HTML for the device / browser detected to play the video. With all of my browsers on my Mac, they are being forced to use the Flash, even when it's disabled. When using my iPhone, which can't play flash , and inspecting the page it uses JW's own custom video element. It appears that it must be storing the file location in memory since it is not in the generated markup.

I am able to run through the console in the dev tools and access their JS class. It appears i can call jwplayer._tracker , which has an object b . Object b has an object AlWv3iHmEeOzwBIxOUCPzg This object seems to be consistent each time i check between different browsers, you can use the for loop inmy first example to get the correct value but tirmming it down to .b Following that object is e and in e is the object http://i.n.jwpltx.com/v1.... really long string that appears to contain a url, so it will need to parsed.

So to get the HTML string i ran

for ( var loc in jwplayer._tracker.b.AlWv3iHmEeOzwBIxOUCPzg.e){
  loc
}

so if we put that in a function to parse the string and return a value

function getSubURL(){
  var initURL;
  for ( var loc in  jwplayer._tracker.b.AlWv3iHmEeOzwBIxOUCPzg.e){
    initURL = loc;
  }
  //look for 'mp4:' this is in front of the file path
  var start = initURL.indexOf("mp4%3A");

  //look for the .mp4 for the end of the file name
  var stop = initURL.indexOf(".mp4");

  //grab the string between
  //start+6 to remove characters used to find it 
  //and stop+4 to include characters used to find it
  var subPath = (initURL.substring((start+6),(stop+4))).split("%2F").join("/");

  return subPath;
}

//and run it
getSubURL();

it will return ciencia/astronomia/fimsol.mp4

you can run this from your console, but I am unaware of how you can use this in Tamper Monkey, but i think it gets ya a lot closer to what you wanted.