I'm attempting to create a userscript using JavaScript that extracts specific data from images on a webpage, particularly video data that appears when hovering over the images. The goal is to collect information including picture URL, href, title, duration, views, and the video source. Here's a simplified version of the structure:
<div class="thumb-block">
<a href="/video123">
<img src="thumbnail.jpg" alt="Video Thumbnail">
</a>
<span class="video-hd-mark">1080p</span>
<span class="thumb-related-exo">Video Title</span>
<span class="duration">10:00</span>
<span class="metadata">
<span>100K Views</span>
</span>
<!-- Video tag gets dynamically inserted after hovering over the image -->
<video src="video.mp4"></video>
</div>
I've attempted to use event listeners and mouseover events to trigger data extraction when hovering over the images, but I'm encountering issues with dynamically loaded content and retrieving the video source specifically.
Could someone provide guidance or an alternative approach to reliably extract this data, especially the video source, when hovering over the images on the webpage?
Thanks in advance for any assistance or insights!
/---------------------------------------------------/
The code I made opens a preview window and waits for me to hover over images nd trying to extract the data when the video tag dynamically appears.
Here's the code:
(function() {
'use strict';
let previewWindow;
function addDataToPreview(data) {
if (!previewWindow || previewWindow.closed) {
previewWindow = window.open('', 'Extracted Data Preview', 'width=1000,height=700,scrollbars=yes,resizable=yes');
previewWindow.document.write('<html><head><title>Extracted Data Preview</title></head><body></body></html>');
}
const table = previewWindow.document.createElement('table');
data.forEach((item) => {
const row = table.insertRow();
for (const key in item) {
const cell = row.insertCell();
cell.textContent = item[key];
}
});
previewWindow.document.body.appendChild(table);
}
function handleImageHover(event) {
const target = event.target;
if (target.tagName === 'IMG') {
const parentDiv = target.closest('.thumb-block');
if (parentDiv) {
const picture = parentDiv.querySelector('img').getAttribute('src');
const href = parentDiv.querySelector('a').getAttribute('href');
const videoHD = parentDiv.querySelector('.video-hd-mark').textContent.trim();
const title = parentDiv.querySelector('.thumb-related-exo').textContent.trim();
const duration = parentDiv.querySelector('.duration').textContent.trim();
const views = parentDiv.querySelector('.metadata span:nth-child(3)').textContent.trim();
const videoSource = parentDiv.querySelector('video').getAttribute('src');
const videoData = {
picture,
href,
videoHD,
title,
duration,
views,
videoSource
};
addDataToPreview([videoData]);
}
}
}
document.addEventListener('mouseover', handleImageHover);
})();